HTML Lists and Tables

HTML lists are used to organize related items, while HTML tables are used to present structured data in rows and columns.

1. Introduction to HTML Lists

Lists are useful when multiple related items need to be displayed in an organized format.

HTML provides three main types of lists:

• Unordered Lists
• Ordered Lists
• Description Lists

2. Unordered List

An unordered list displays items using bullets. It is created using the <ul> element with <li> list items.

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

3. Ordered List

An ordered list displays items in a numbered sequence. It is created using the <ol> element.

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

4. Description List

A description list is used for terms and their descriptions. It uses <dl>, <dt>, and <dd>.

<dl>

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

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

</dl>

5. Nested Lists

A list can contain another list inside one of its list items. This is called a nested list.

<ul>

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

    <li>
        Backend
        <ul>
            <li>C#</li>
            <li>.NET</li>
            <li>SQL</li>
        </ul>
    </li>

</ul>

6. Introduction to HTML Tables

HTML tables are used to display structured data in rows and columns.

A basic table uses:

• <table> for the table.
• <tr> for a table row.
• <th> for a header cell.
• <td> for a data cell.

7. Basic HTML Table

<table>

    <tr>
        <th>Name</th>
        <th>Course</th>
        <th>Duration</th>
    </tr>

    <tr>
        <td>Samadhan</td>
        <td>HTML</td>
        <td>2 Months</td>
    </tr>

    <tr>
        <td>Pradnya</td>
        <td>CSS</td>
        <td>2 Months</td>
    </tr>

</table>

8. Table Rows

The <tr> element creates a table row.

<tr>
    <td>Sam</td>
    <td>21</td>
</tr>

9. Table Headers

The <th> element creates a header cell. Header cells usually identify the data in each column.

<tr>
    <th>Student Name</th>
    <th>Course</th>
    <th>Marks</th>
</tr>

10. Table Data Cells

The <td> element is used for normal table data.

<tr>
    <td>John</td>
    <td>HTML</td>
    <td>85</td>
</tr>

11. Table Border

CSS is commonly used to add borders to tables and their cells.

<style>
    table,
    th,
    td {
        border: 1px solid black;
        border-collapse: collapse;
    }
</style>

12. Table Caption

The <caption> element provides a title or description for a table.

<table>

    <caption>Student Details</caption>

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

    <tr>
        <td>John</td>
        <td>HTML</td>
    </tr>

</table>

13. thead, tbody and tfoot

Larger tables can be structured using <thead>, <tbody>, and <tfoot>.

<table>

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

    <tbody>
        <tr>
            <td>Laptop</td>
            <td>50000</td>
        </tr>

        <tr>
            <td>Mouse</td>
            <td>1000</td>
        </tr>
    </tbody>

    <tfoot>
        <tr>
            <td>Total</td>
            <td>51000</td>
        </tr>
    </tfoot>

</table>

14. Colspan

The colspan attribute allows a cell to span across multiple columns.

<table>

    <tr>
        <th colspan="2">
            Student Information
        </th>
    </tr>

    <tr>
        <td>John</td>
        <td>HTML</td>
    </tr>

</table>

15. Rowspan

The rowspan attribute allows a cell to span across multiple rows.

<table>

    <tr>
        <th rowspan="2">Course</th>
        <td>HTML</td>
    </tr>

    <tr>
        <td>CSS</td>
    </tr>

</table>

16. Styling HTML Tables with CSS

<style>

    table {
        width: 100%;
        border-collapse: collapse;
    }

    th,
    td {
        border: 1px solid #000;
        padding: 10px;
        text-align: left;
    }

    th {
        background-color: #f2f2f2;
    }

</style>

17. Difference Between Lists and Tables

18. Common Uses of Lists

19. Common Uses of Tables

20. Complete Lists Example

<!DOCTYPE html>
<html>

<head>
    <title>HTML Lists</title>
</head>

<body>

    <h1>Programming Courses</h1>

    <h2>Unordered List</h2>

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

    <h2>Ordered List</h2>

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

    <h2>Description List</h2>

    <dl>
        <dt>HTML</dt>
        <dd>Structure of a webpage</dd>

        <dt>CSS</dt>
        <dd>Styling of a webpage</dd>
    </dl>

</body>

</html>

21. Complete Table Example

<!DOCTYPE html>
<html>

<head>

    <title>Student Table</title>

    <style>

        table {
            width: 100%;
            border-collapse: collapse;
        }

        th,
        td {
            border: 1px solid black;
            padding: 10px;
        }

        th {
            background-color: #f2f2f2;
        }

    </style>

</head>

<body>

    <h1>Student Details</h1>

    <table>

        <caption>Student Information</caption>

        <thead>
            <tr>
                <th>Name</th>
                <th>Course</th>
                <th>Marks</th>
            </tr>
        </thead>

        <tbody>

            <tr>
                <td>John</td>
                <td>HTML</td>
                <td>85</td>
            </tr>

            <tr>
                <td>David</td>
                <td>CSS</td>
                <td>90</td>
            </tr>

        </tbody>

        <tfoot>
            <tr>
                <td colspan="2">Average</td>
                <td>87.5</td>
            </tr>
        </tfoot>

    </table>

</body>

</html>

22. Best Practices

• Use lists for lists of related items.
• Use tables for actual tabular data.
• Use meaningful table headers.
• Use <thead>, <tbody>, and <tfoot> for structured tables.
• Use CSS to style tables instead of relying on outdated HTML presentation attributes.
• Keep tables readable on smaller screens.
• Do not use tables for general webpage layout.

23. Common Mistakes

• Using tables for page layout instead of tabular data.
• Forgetting to close list or table elements.
• Mixing table cells incorrectly between rows.
• Using colspan or rowspan incorrectly.
• Using unclear table headers.
• Creating tables that are difficult to read on small screens.

24. Practice Task