Tables: Basic Layouts and Structural Optimization

Tables are designed for displaying structured, grid-based tabular data (like schedules, pricing tables, or financial reports). In the early days of web design, tables were used for page layouts, but today layout is handled strictly by CSS. HTML tables should only contain data.

1. Basic Table Structure

A simple table is composed of the following elements:

• <table>: The wrapper for all table content.
• <tr> (Table Row): Defines a horizontal row of cells.
• <th> (Table Header): Defines a header cell (rendered as bold and centered text by default).
• <td> (Table Data): Defines a regular data cell.

<table border="1">
    <tr>
        <th>Product</th>
        <th>Price</th>
    </tr>
    <tr>
        <td>Astro Course</td>
        <td>$49.00</td>
    </tr>
    <tr>
        <td>HTML Guide</td>
        <td>Free</td>
    </tr>
</table>

2. Advanced Layouts: Spanning Rows and Columns

Sometimes a single cell needs to stretch across multiple columns or rows. HTML handles this using the colspan and rowspan attributes.

A. Column Span (colspan)

Stretches a cell horizontally across multiple columns:

<tr>
    <td colspan="2">Double Width Cell</td>
</tr>

B. Row Span (rowspan)

Stretches a cell vertically down across multiple rows:

<tr>
    <td rowspan="2">Double Height Cell</td>
    <td>Normal Cell 1</td>
</tr>
<tr>
    <td>Normal Cell 2</td>
</tr>

3. Structural Optimization: Thead, Tbody, and Tfoot

For complex or long tables, you should group rows semantically. This improves accessibility, SEO, and allows browsers to repeat table headers when printing multi-page documents.

• <thead>: Wraps the header rows.
• <tbody>: Wraps the body content data rows.
• <tfoot>: Wraps summary or total rows at the bottom.

<table>
    <thead>
        <tr>
            <th>Expense Item</th>
            <th>Cost</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Domain Name</td>
            <td>$12.00</td>
        </tr>
        <tr>
            <td>VPS Hosting</td>
            <td>$5.00</td>
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <td>Total</td>
            <td>$17.00</td>
        </tr>
    </tfoot>
</table>

In the next guide, we will wrap up our HTML Basics chapter by exploring special character entities and UTF-8 encoding standards.