HTML Full Course (Day 06)

1. Unordered and ordered lists (ul, ol, li):

HTML provides two main types of lists: unordered lists (`<ul>`) and ordered lists (`<ol>`). Both lists contain list items (`<li>`) that represent individual items within the list. Here's how they work:

   - Unordered list (`<ul>`): 

An unordered list is used to represent a list of items where the order is not important. It is typically displayed as a bulleted list. Each item within the list is marked with the `<li>` element.

   - Ordered list (`<ol>`): 

An ordered list is used when the order of the list items is significant. It is typically displayed as a numbered or lettered list. Each item within the list is marked with the `<li>` element.

2. Nested lists and list styling:

HTML allows for nested lists, where lists can be placed inside other list items. This creates a hierarchical structure. Here's an example:

HTML CODE

<ul>

  <li>List item 1</li>

  <li>List item 2

    <ul>

      <li>Nested item 1</li>

      <li>Nested item 2</li>

    </ul>

  </li>

  <li>List item 3</li>

</ul>

To style lists, you can use CSS to modify the appearance of the list markers (bullets or numbers) or add custom styling to the list items (`<li>`). CSS properties like `list-style-type` and `list-style-image` can be used to customize the list markers. Additionally, you can apply styling to the list items themselves, such as changing the font, color, or adding background effects.

3. Creating tables (table, tr, td):

HTML tables are used to organize and display tabular data. Here are the main components used to create tables:

   - `<table>`: 

The `<table>` element is the container for the entire table. It defines the structure of the table.

   - `<tr>`: 

The `<tr>` element represents a table row. It defines a single row within the table.

   - `<td>`: 

The `<td>` element represents a table cell. It defines a single cell within a row and contains the actual data or content.

   Here's an example of a simple HTML table structure:

   ```HTML

   <table>

     <tr>

       <td>Cell 1</td>

       <td>Cell 2</td>

     </tr>

     <tr>

       <td>Cell 3</td>

       <td>Cell 4</td>

     </tr>

   </table>

   ```

4. Table headers and captions:

To provide additional information and context to tables, HTML allows the use of table headers (`<th>`) and table captions (`<caption>`):

   - `<th>`: 

The `<th>` element represents a table header cell. It is used to define the header for a column or a row within a table. By default, header cells are bold and centered.

   - `<caption>`:

 The `<caption>` element is used to provide a caption or a title for the table. It is typically placed immediately after the opening `<table>` tag. The caption appears centered above the table.

   Here's an example of a table with headers and a caption:

   ```HTML

   <table>

     <caption>Monthly Sales Report</caption>

     <tr>

       <th>Product</th>

       <th>Quantity Sold</th>

       <th>Revenue</th>

     </tr>

     <tr>

       <td>Product A</td>

       <td>100</td>

       <td>$5000</td>

     </tr>

     <tr>

       <td>Product B</td>

       <td>75</td>

       <td>$4000</td>

     </tr>

   </table>

   ```

By using the appropriate HTML elements for lists and tables, including `<ul>`, `<ol>`, `<li>`, `<table>`, `<tr>`, `<td>`, as well as considering nesting, styling, headers, and captions, you can effectively structure and present information in a structured and organized manner on your HTML pages.