Introduction to HTML Tables

HTML tables organize data into rows and columns, ideal for displaying structured information like schedules, comparison charts, or financial data. The <table> element forms the foundation, with nested elements defining the table’s structure.

• Purpose: Present tabular data in a clear, accessible format.
• Key Elements: <table>, <tr>, <th>, <td>.

Basic Table Structure

A table is built using:

• <table>: The container for the entire table.
• <tr>: Defines a table row.
• <th>: Defines a header cell (bold and centered by default).
• <td>: Defines a data cell for content.

Example: Simple table:

<table>
    <tr>
        <th>Name</th>
        <th>Age</th>
    </tr>
    <tr>
        <td>Alice</td>
        <td>25</td>
    </tr>
    <tr>
        <td>Bob</td>
        <td>30</td>
    </tr>
</table>

<table>
    <tr>
        <th>Name</th>
        <th>Age</th>
    </tr>
    <tr>
        <td>Alice</td>
        <td>25</td>
    </tr>
    <tr>
        <td>Bob</td>
        <td>30</td>
    </tr>
</table>

Table Attributes

Attributes enhance table functionality, though some are styled with CSS in modern web development:

• border: Adds a border (e.g., border=”1″, better handled with CSS).
• colspan: Merges cells across columns.
• rowspan: Merges cells across rows.
• id/class: For styling or scripting.

Example: Table with merged cells:

<table>
    <tr>
        <th colspan="2">Profile</th>
    </tr>
    <tr>
        <td>Name</td>
        <td rowspan="2">John</td>
    </tr>
    <tr>
        <td>Age</td>
    </tr>
</table>

<table>
    <tr>
        <th colspan="2">Profile</th>
    </tr>
    <tr>
        <td>Name</td>
        <td rowspan="2">John</td>
    </tr>
    <tr>
        <td>Age</td>
    </tr>
</table>

Semantic Table Elements

Semantic elements improve accessibility and structure:

• <thead>: Groups header rows.
• <tbody>: Groups body rows.
• <tfoot>: Groups footer rows (e.g., for totals).
• <caption>: Adds a table title.

Example: Semantic table:

<table>
    <caption>Monthly Sales</caption>
    <thead>
        <tr>
            <th>Product</th>
            <th>Units Sold</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Book</td>
            <td>50</td>
        </tr>
        <tr>
            <td>Pen</td>
            <td>100</td>
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <td>Total</td>
            <td>150</td>
        </tr>
    </tfoot>
</table>

<table>
    <caption>Monthly Sales</caption>
    <thead>
        <tr>
            <th>Product</th>
            <th>Units Sold</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Book</td>
            <td>50</td>
        </tr>
        <tr>
            <td>Pen</td>
            <td>100</td>
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <td>Total</td>
            <td>150</td>
        </tr>
    </tfoot>
</table>

Accessibility for Tables

• Use <th>: Clearly define headers for screen readers.
• Add scope: Specify whether headers apply to rows or columns (e.g., scope=”col”).
• Include <caption>: Summarize the table’s purpose.
• Avoid Layout Tables: Use CSS for visual layouts instead.

Example: Accessible table:

<table>
    <caption>Employee Schedule</caption>
    <tr>
        <th scope="col">Day</th>
        <th scope="col">Shift</th>
    </tr>
    <tr>
        <td>Monday</td>
        <td>Morning</td>
    </tr>
</table>

<table>
    <caption>Employee Schedule</caption>
    <tr>
        <th scope="col">Day</th>
        <th scope="col">Shift</th>
    </tr>
    <tr>
        <td>Monday</td>
        <td>Morning</td>
    </tr>
</table>

Best Practices for Tables

• Keep It Simple: Avoid excessive nesting or merging.
• Use CSS for Styling: Control borders, spacing, and colors with CSS.
• Test Responsiveness: Ensure tables display well on mobile devices (may require CSS or <div> alternatives).
• Validate Structure: Ensure all rows have the same number of cells.

Example: Styled table (CSS implied):

<table>
    <thead>
        <tr>
            <th>Item</th>
            <th>Price</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Coffee</td>
            <td>$5</td>
        </tr>
        <tr>
            <td>Tea</td>
            <td>$3</td>
        </tr>
    </tbody>
</table>

<table>
    <thead>
        <tr>
            <th>Item</th>
            <th>Price</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Coffee</td>
            <td>$5</td>
        </tr>
        <tr>
            <td>Tea</td>
            <td>$3</td>
        </tr>
    </tbody>
</table>