HTML Tables

HTML tables are used to organize data into rows and columns. The basic structure of an HTML table includes the <table>, <tr> (table row), <th> (table header), and <td> (table data) elements.

Basic Table

A basic HTML table is created using the <table> tag along with <tr>, <th>, and <td> tags.

Example
Try yourself 
        
            <table border="1">
    <tr>
        <th>Header 1</th>
        <th>Header 2</th>
        <th>Header 3</th>
    </tr>
    <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>
</table>

In this example, the table contains three columns and three rows. The first row contains table headers defined by the <th> tag, and the remaining rows contain table data defined by the <td> tag.

Table Borders

To add borders to an HTML table, you can use the border attribute or CSS styling.

Example
Try yourself 
        
            <table border="1">
    <tr>
        <th>Header 1</th>
        <th>Header 2</th>
        <th>Header 3</th>
    </tr>
    <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>
</table>

This example shows how to add borders to a table using the border attribute.

Table with Caption

You can add a caption to your table using the <caption> tag. The caption tag is used to provide a title for the table.

Example
Try yourself 
        
            <div class="table-caption">
    Table caption content
</div>

In this example, the table has a caption describing its contents.

Table with Colspan and Rowspan

The colspan attribute allows a cell to span multiple columns, while the rowspan attribute allows a cell to span multiple rows.

Example
Try yourself 
        
            <table border="1">
    <tr>
        <th colspan="2">Header spanning 2 columns</th>
    </tr>
    <tr>
        <td rowspan="2">Rowspan 2 rows</td>
        <td>Row 1, Cell 2</td>
    </tr>
    <tr>
        <td>Row 2, Cell 2</td>
    </tr>
</table>

This example demonstrates how to use the colspan and rowspan attributes to create cells that span multiple columns and rows.

Styling Tables with CSS

You can use CSS to style your tables and make them more visually appealing. This includes adding borders, padding, background colors, and more.

Example
Try yourself 
        
            table {
    width: 100%;
    border-collapse: collapse;
}

th, td {
    padding: 10px;
    text-align: left;
}

th {
    background-color: #f2f2f2;
}

tr:nth-child(even) {
    background-color: #f9f9f9;
}

In this example, CSS is used to style the table, including adding borders, padding, and background colors.

Responsive Tables

To make tables responsive, you can use CSS to allow horizontal scrolling on smaller screens.

Example
Try yourself 
        
            table {
    width: 100%;
    border-collapse: collapse;
}

th, td {
    padding: 10px;
    text-align: left;
}

th {
    background-color: #f2f2f2;
}

tr:nth-child(even) {
    background-color: #f9f9f9;
}

@media screen and (max-width: 600px) {
    table, thead, tbody, th, td, tr {
        display: block;
        width: 100%;
    }

    thead {
        display: none;
    }

    tr {
        margin-bottom: 15px;
    }

    td {
        text-align: right;
        padding-left: 50%;
        position: relative;
    }

    td:before {
        content: attr(data-label);
        position: absolute;
        left: 0;
        width: 50%;
        padding-left: 10px;
        font-weight: bold;
        text-align: left;
    }
}

This example demonstrates how to make a table responsive using CSS.

Important Notes

Here are some important notes and best practices when using tables in HTML: