Overview

Tables are essential for presenting tabular data clearly and organized on a web page. This lesson will guide you through the process of creating HTML tables, defining rows, columns, headers, and data cells. We'll cover the core table elements like <table>, <thead>, <tbody>, <tr>, <th>, and <td>, along with attributes like colspan and rowspan for more complex layouts. Understanding tables is crucial for displaying data like financial reports, product specifications, or contact lists effectively.

Key Points

• <table>: The main container element for all table content.

• <thead>, <tbody>, <tfoot>: These elements semantically divide a table into a header, body, and footer section, improving accessibility and allowing browsers to scroll the body independently.

• <tr> (Table Row): Defines a row of cells within a table.

• <th> (Table Header): Defines a header cell, typically bold and centered by default. It describes the data for a column or row.

• <td> (Table Data): Defines a standard data cell in a table.

• colspan Attribute: Used on <th> or <td> to make a cell span across multiple columns.

• rowspan Attribute: Used on <th> or <td> to make a cell span across multiple rows.

• Accessibility: Always use <th> with the scope attribute (scope="col" or scope="row") for better screen reader interpretation.

Quick Example

Creating a simple table for product information:

html
<table>
    <thead>
        <tr>
            <th>Product Name</th>
            <th>Price</th>
            <th>Availability</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Laptop Pro</td>
            <td>$1200</td>
            <td>In Stock</td>
        </tr>
        <tr>
            <td>Ultra Monitor</td>
            <td>$350</td>
            <td>Limited Stock</td>
        </tr>
        <tr>
            <td colspan="3">Special Offer: Free shipping on orders over $1000!</td>
        </tr>
    </tbody>
</table>

Summary

In this lesson, you learned how to construct HTML tables to present structured, tabular data. You are now familiar with the <table>, <thead>, <tbody>, <tr>, <th>, and <td> elements, and how to use colspan and rowspan for more intricate table designs. Properly using tables ensures your data is presented clearly and remains accessible to all users.