HTML Tables

HTML Tables

HTML tables are used to organize and display data in rows and columns on a webpage. They are useful for displaying information such as student records, product prices, employee details, schedules, and other structured data.

HTML provides several tags to create and manage tables, including <table>, <tr>, <th>, and <td>.

1. Basic HTML Table

The <table> tag is used to create an HTML table. Each row is created using <tr>, while <th> defines a header cell and <td> defines a regular data cell.

Example:

<table border="1">
    <tr>
        <th>Name</th>
        <th>Age</th>
        <th>City</th>
    </tr>
    <tr>
        <td>Rahul</td>
        <td>22</td>
        <td>Kolkata</td>
    </tr>
    <tr>
        <td>Priya</td>
        <td>21</td>
        <td>Bankura</td>
    </tr>
</table>

Output:

2. HTML Table Tags

HTML provides different tags to define the structure of a table.

3. HTML Table with a Caption

The <caption> tag adds a title to an HTML table. It should be placed immediately after the opening <table> tag.

Example:

<table border="1">
    <caption>Student Information</caption>
    <tr>
        <th>Name</th>
        <th>Class</th>
    </tr>
    <tr>
        <td>Amit</td>
        <td>10</td>
    </tr>
</table>

4. HTML Table with thead, tbody, and tfoot

You can divide a table into three main sections using <thead>, <tbody>, and <tfoot>.

• <thead>: Contains the table heading rows.
• <tbody>: Contains the main data rows.
• <tfoot>: Contains summary or footer rows.

Example:

<table border="1">
    <thead>
        <tr>
            <th>Product</th>
            <th>Price</th>
        </tr>
    </thead>

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

    <tfoot>
        <tr>
            <td>Total</td>
            <td>50500</td>
        </tr>
    </tfoot>
</table>

5. HTML Table Borders

You can use CSS to add borders to table elements. The border property defines the border around cells and the table.

Example:

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

    th, td {
        padding: 10px;
    }
</style>

6. HTML Table Cell Padding

Cell padding controls the space between the content of a table cell and its border. Use the CSS padding property to add space inside table cells.

Example:

<style>
    th, td {
        padding: 15px;
    }
</style>

7. HTML Table Cell Spacing

Cell spacing controls the space between table cells. You can use the CSS border-spacing property when borders are separated.

Example:

<style>
    table {
        border-spacing: 10px;
    }
</style>

8. HTML Table Colspan

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

Example:

<table border="1">
    <tr>
        <th colspan="2">Student Details</th>
    </tr>
    <tr>
        <td>Name</td>
        <td>Rahul</td>
    </tr>
</table>

Output:

9. HTML Table Rowspan

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

Example:

<table border="1">
    <tr>
        <th>Name</th>
        <th>Subject</th>
    </tr>
    <tr>
        <td rowspan="2">Rahul</td>
        <td>HTML</td>
    </tr>
    <tr>
        <td>CSS</td>
    </tr>
</table>

Output:

10. HTML Table Background Color

You can use CSS background-color to change the background color of a table, row, or individual cell.

Example:

<table style="width:100%; border-collapse:collapse;">
    <tr style="background-color:#2563eb; color:white;">
        <th>Name</th>
        <th>Age</th>
    </tr>
    <tr style="background-color:#f1f5f9;">
        <td>Rahul</td>
        <td>22</td>
    </tr>
</table>

11. Responsive HTML Tables

Sometimes a table contains many columns and does not fit on smaller screens. You can make it horizontally scrollable using CSS overflow-x: auto.

Example:

<style>
    .table-container {
        width: 100%;
        overflow-x: auto;
    }

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

    th, td {
        padding: 10px;
        border: 1px solid #ccc;
        white-space: nowrap;
    }
</style>

<div class="table-container">
    <table>
        <tr>
            <th>Name</th>
            <th>Email</th>
            <th>Course</th>
        </tr>
        <tr>
            <td>Rahul</td>
            <td>rahul@example.com</td>
            <td>HTML</td>
        </tr>
    </table>
</div>

12. Important HTML Table Attributes

Conclusion

HTML tables provide an effective way to organize and present structured information. By learning table tags, borders, cell spacing, colspan, rowspan, and responsive table techniques, you can create clear and well-organized tables for your websites.