Welcome to Day 2 of learning HTML

Today, we will be learning about HTML structure and elements. Let's get started!

1. Nested list

A nested list is a list that contains another list within it. This can be useful for organizing information hierarchically.

Example of nested list

• Fruits
  • Apple
  1. Red Apple
  2. Green Apple
  • Banana
  1. Ripe Banana
  2. Raw Banana
  • Orange
  1. Sweet Orange
  2. Sour Orange
• Dairy
  • Milk
  1. Full Cream Milk
  2. Skimmed Milk
  • Cheese
  1. Cheddar Cheese
  2. Swiss Cheese
  • Yogurt

code of creating nested list

            <ul>
                <li>Fruits    
                    <ul>
                        <li>Apple</li>
                        <ol>
                            <li>Red Apple</li>
                            <li>Green Apple</li>
                        </ol>
                        <li>Banana</li>
                        <ol>
                            <li>Ripe Banana</li>
                            <li>Raw Banana</li>
                        </ol>
                        <li>Orange</li>
                        <ol>
                            <li>Sweet Orange</li>
                            <li>Sour Orange</li>
                    </ul>
                </li>
                <li>Dairy
                            
                    <ul>
                        <li>Milk</li>
                        <ol>
                            <li>Full Cream Milk</li>
                            <li>Skimmed Milk</li>
                        </ol>
                        <li>Cheese</li>
                        <ol>
                            <li>Cheddar Cheese</li>
                            <li>Swiss Cheese</li>
                        </ol>
                        <li>Yogurt</li>
                    </ul>
                </li>
            </ul>
            

2. Tables

Tables are used to organize data in rows and columns. They are created using the <table> tag, with rows defined by <tr> tags and cells defined by <td> tags.

body and header raw span of table

The <thead> tag is used to group the header content in a table, while the <tbody> tag is used to group the body content. This helps to separate the header from the rest of the table and makes it easier to style and manage.

The <th> tag is used to define header cells in a table. Header cells are typically displayed in bold and centered by default, and they provide context for the data in the corresponding columns or rows.

The <td> tag is used to define standard data cells in a table. Data cells contain the actual data that is being presented in the table, and they are typically displayed in a regular font and aligned to the left by default.

The <caption> tag is used to provide a title or caption for a table. The caption is typically displayed above the table and provides context for the data being presented.

The <colgroup> tag is used to group columns in a table. This can be useful for applying styles or attributes to a group of columns, such as setting the width or background color.

The <col> tag is used to define individual columns within a <colgroup>. This allows you to apply specific styles or attributes to individual columns, such as setting the width or background color.

The <tfoot> tag is used to group the footer content in a table. This can be useful for summarizing data or providing additional context for the information presented in the table.

The <rowspan> attribute is used to specify the number of rows that a cell should span in a table. This can be useful for creating cells that cover multiple rows, such as when creating a header that spans multiple columns.

The <colspan> attribute is used to specify the number of columns that a cell should span in a table. This can be useful for creating cells that cover multiple columns, such as when creating a header that spans multiple rows.

Example of a table

   
            <table border="1">
                <tr>
                    <th> Name </th>
                    <th> Age </th>
                    <th> City </th>
                </tr>
                <tr>
                    <td> Shivam </td>
                    <td> 30 </td>
                    <td> Delhi </td>
                </tr>
                <tr>
                    <td> Rohan</td>
                    <td> 25 </td>
                    <td> Mumbai </td>
                </tr>
                <tr>
                    <td> Rohit </td>
                    <td> 35 </td>
                    <td> Prayagh </td>
                </tr>
            </table>
            

resouces of this topic

Article on Notion