Lists and tables are used to organize and present information in a structured format. HTML provides different types of lists and table elements for displaying data clearly.

---

Ordered Lists (<ol>)

An ordered list displays items in a numbered sequence.

Use it when the order of items is important.

Syntax

<ol>
    <li>Learn HTML</li>
    <li>Learn CSS</li>
    <li>Learn JavaScript</li>
</ol>

Output

1. Learn HTML
2. Learn CSS
3. Learn JavaScript

---

Components

Tag	Purpose
ol	Ordered List
li	List Item

---

Different Number Types

Alphabetical

<ol type="A">
    <li>HTML</li>
    <li>CSS</li>
</ol>

Output

A. HTML
B. CSS

---

Lowercase Letters

<ol type="a">
    <li>HTML</li>
    <li>CSS</li>
</ol>

Output

a. HTML
b. CSS

---

Roman Numerals

<ol type="I">
    <li>HTML</li>
    <li>CSS</li>
</ol>

Output

I. HTML
II. CSS

---

Starting From a Different Number

<ol start="5">
    <li>HTML</li>
    <li>CSS</li>
</ol>

Output

5. HTML
6. CSS

---

Common Uses

• Step-by-step instructions
• Rankings
• Procedures
• Recipes

---

Unordered Lists (<ul>)

An unordered list displays items using bullets.

Use it when the order of items does not matter.

Syntax

<ul>
    <li>HTML</li>
    <li>CSS</li>
    <li>JavaScript</li>
</ul>

Output

• HTML
• CSS
• JavaScript

---

Components

Tag	Purpose
ul	Unordered List
li	List Item

---

Example

<ul>
    <li>Apple</li>
    <li>Banana</li>
    <li>Mango</li>
</ul>

Output

• Apple
• Banana
• Mango

---

Common Uses

• Navigation menus
• Feature lists
• Product specifications
• Categories

---

Definition Lists (<dl>)

Definition lists are used to display terms and their descriptions.

---

Tags Used

Tag	Purpose
dl	Definition List
dt	Definition Term
dd	Definition Description

---

Example

<dl>
    <dt>HTML</dt>
    <dd>
        HyperText Markup Language
    </dd>

    <dt>CSS</dt>
    <dd>
        Cascading Style Sheets
    </dd>
</dl>

Output

HTML
    HyperText Markup Language

CSS
    Cascading Style Sheets

---

Common Uses

• Glossaries
• Dictionaries
• FAQs
• Technical documentation

---

Nested Lists

A nested list is a list inside another list.

Nested lists are used to create subcategories and hierarchical structures.

---

Nested Unordered List

Example

<ul>
    <li>
        Frontend
        <ul>
            <li>HTML</li>
            <li>CSS</li>
            <li>JavaScript</li>
        </ul>
    </li>

    <li>Backend</li>
</ul>

Output

• Frontend
    • HTML
    • CSS
    • JavaScript

• Backend

---

Nested Ordered List

Example

<ol>
    <li>
        Setup Environment
        <ol>
            <li>Install VS Code</li>
            <li>Install Browser</li>
        </ol>
    </li>

    <li>Learn HTML</li>
</ol>

Output

1. Setup Environment
    1. Install VS Code
    2. Install Browser

2. Learn HTML

---

Multiple Levels

Lists can be nested multiple levels deep.

Example

<ul>
    <li>
        Frontend
        <ul>
            <li>
                HTML
                <ul>
                    <li>Tags</li>
                    <li>Forms</li>
                </ul>
            </li>
        </ul>
    </li>
</ul>

---

Tables (<table>)

Tables display data in rows and columns.

---

Basic Structure

<table>
    <tr>
        <th>Name</th>
        <th>Age</th>
    </tr>

    <tr>
        <td>Samir</td>
        <td>21</td>
    </tr>
</table>

Output

+--------+-----+
| Name   | Age |
+--------+-----+
| Samir  | 21  |
+--------+-----+

---

Table Elements

Tag	Purpose
table	Creates a table
tr	Table Row
th	Table Header
td	Table Data Cell

---

Example

<table>
    <tr>
        <th>Course</th>
        <th>Duration</th>
    </tr>

    <tr>
        <td>HTML</td>
        <td>2 Weeks</td>
    </tr>

    <tr>
        <td>CSS</td>
        <td>3 Weeks</td>
    </tr>
</table>

---

Table Sections

HTML provides semantic table sections that improve readability and organization.

Structure

<table>
    <thead>
    </thead>

    <tbody>
    </tbody>

    <tfoot>
    </tfoot>
</table>

---

Example

<table>
    <thead>
        <tr>
            <th>Product</th>
            <th>Price</th>
        </tr>
    </thead>

    <tbody>
        <tr>
            <td>Laptop</td>
            <td>$500</td>
        </tr>
    </tbody>

    <tfoot>
        <tr>
            <td>Total</td>
            <td>$500</td>
        </tr>
    </tfoot>
</table>

---

Rowspan

The rowspan attribute merges cells vertically across multiple rows.

Syntax

<td rowspan="2">
    Frontend
</td>

Example

Frontend | HTML
         | CSS

---

Colspan

The colspan attribute merges cells horizontally across multiple columns.

Syntax

<td colspan="2">
    Frontend
</td>

Example

+----------------+
|   Frontend     |
+----------------+

---

Complete Example

<table border="1">
    <tr>
        <th>Name</th>
        <th>Course</th>
        <th>Duration</th>
    </tr>

    <tr>
        <td>Samir</td>
        <td>Frontend</td>
        <td>3 Months</td>
    </tr>

    <tr>
        <td>Aayush</td>
        <td>Backend</td>
        <td>4 Months</td>
    </tr>
</table>

---

When to Use Lists vs Tables

Use Lists For

• Features
• Steps
• Categories
• Navigation Menus

Use Tables For

Name      | Age | Address
Price     | Quantity | Total
Student   | Marks | Grade

---

Summary

Element	Purpose
ol	Ordered List
ul	Unordered List
li	List Item
dl	Definition List
dt	Definition Term
dd	Definition Description
table	Table Container
tr	Table Row
th	Table Header
td	Table Data
thead	Table Header Section
tbody	Table Body Section
tfoot	Table Footer Section
rowspan	Merge Rows
colspan	Merge Columns

---

Key Takeaway

Example

<ul>
    <li>HTML</li>
    <li>CSS</li>
</ul>

<ol>
    <li>Learn HTML</li>
    <li>Learn CSS</li>
</ol>

<table>
    <tr>
        <th>Name</th>
        <th>Course</th>
    </tr>

    <tr>
        <td>Samir</td>
        <td>Frontend</td>
    </tr>
</table>

Lists organize related items.

• Nested Lists create hierarchies.
• Definition Lists describe terms.
• Tables display structured row-column data.