HTML Tables

HTML tables allow you to organize data into rows and columns. This chapter will guide you through the basics of creating tables in HTML and demonstrate how to use various attributes and elements to control their appearance and structure.

1. Basic Table Structure

A basic HTML table is created using the <table> tag, with rows defined by the <tr> tag, and cells within rows defined by <td> (table data) tags.

<table>
    <tr>
        <td>Row 1, Cell 1</td>
        <td>Row 1, Cell 2</td>
    </tr>
    <tr>
        <td>Row 2, Cell 1</td>
        <td>Row 2, Cell 2</td>
    </tr>
</table>

2. Adding a Table Header

Table headers are defined using the <th> tag, which is typically used within a <thead> section for better semantics and accessibility.

<table>
    <thead>
        <tr>
            <th>Header 1</th>
            <th>Header 2</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Row 1, Cell 1</td>
            <td>Row 1, Cell 2</td>
        </tr>
        <tr>
            <td>Row 2, Cell 1</td>
            <td>Row 2, Cell 2</td>
        </tr>
    </tbody>
</table>

3. Adding a Caption

A table caption provides a title or description for the table. It is added using the <caption> tag, which should be placed immediately after the <table> tag.

<table>
    <caption>Table Caption</caption>
    <thead>
        <tr>
            <th>Header 1</th>
            <th>Header 2</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Row 1, Cell 1</td>
            <td>Row 1, Cell 2</td>
        </tr>
        <tr>
            <td>Row 2, Cell 1</td>
            <td>Row 2, Cell 2</td>
        </tr>
    </tbody>
</table>

4. Merging Cells

You can merge cells using the colspan and rowspan attributes. colspan merges cells horizontally, while rowspan merges them vertically.

<table>
    <tr>
        <th>Header 1</th>
        <th>Header 2</th>
        <th>Header 3</th>
    </tr>
    <tr>
        <td colspan="2">Row 1, Cell 1 and 2</td>
        <td>Row 1, Cell 3</td>
    </tr>
    <tr>
        <td rowspan="2">Row 2 and 3, Cell 1</td>
        <td>Row 2, Cell 2</td>
        <td>Row 2, Cell 3</td>
    </tr>
    <tr>
        <td>Row 3, Cell 2</td>
        <td>Row 3, Cell 3</td>
    </tr>
</table>

5. Styling Tables

Tables can be styled using CSS to improve their appearance. You can style the table, headers, and cells using various CSS properties.

<style>
    .styled-table {
        border-collapse: collapse;
        margin: 25px 0;
        font-size: 1.2em;
        min-width: 400px;
        border-radius: 5px 5px 0 0;
        overflow: hidden;
        box-shadow: 0 0 20px rgba(0, 0, 0, 0.15);
    }
    .styled-table thead tr {
        background-color: #009879;
        color: #ffffff;
        text-align: left;
        font-weight: bold;
    }
    .styled-table th,
    .styled-table td {
        padding: 12px 15px;
    }
    .styled-table tbody tr {
        border-bottom: 1px solid #dddddd;
    }
    .styled-table tbody tr:nth-of-type(even) {
        background-color: #f3f3f3;
    }
    .styled-table tbody tr:last-of-type {
        border-bottom: 2px solid #009879;
    }
</style>
<table class="styled-table">
    <thead>
        <tr>
            <th>Header 1</th>
            <th>Header 2</th>
            <th>Header 3</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Row 1, Cell 1</td>
            <td>Row 1, Cell 2</td>
            <td>Row 1, Cell 3</td>
        </tr>
        <tr>
            <td>Row 2, Cell 1</td>
            <td>Row 2, Cell 2</td>
            <td>Row 2, Cell 3</td>
        </tr>
        <tr>
            <td>Row 3, Cell 1</td>
            <td>Row 3, Cell 2</td>
            <td>Row 3, Cell 3</td>
        </tr>
    </tbody>
</table>

Conclusion

HTML tables are a powerful way to organize and display data. By using various table elements and attributes, you can create well-structured and visually appealing tables. Remember to keep your tables accessible and follow best practices for styling and usability.