Welcome to Part 5 of the HTML5 & Semantic Web Development Course. In this part, we will explore HTML Tables.

Tables are used to display data grids or structured tabular information (like a calendar, pricing chart, or schedule). While tables were historically misused to build page layouts, modern standard web development uses tables exclusively for data representation. We will cover basic table elements, semantic rows, merging cells, and making tables accessible.

---

Chapter 24: Basic Table Structure

An HTML table is built using rows of cells. The core tags are:

• <table>: The container element for the entire table.
• <tr> (Table Row): Defines a horizontal row of cells.
• <td> (Table Data): Defines a standard individual cell containing data.

24.1 A Simple Table Example

Here is the code to build a basic $2 \times 2$ grid:

<table border="1">
    <tr>
        <td>Row 1, Cell 1</td>
        <td>Row 1, Cell 2</td>
    </tr>
    <tr>
        <td>Row 2, Cell 1</td>
        <td>Row 2, Cell 2</td>
    </tr>
</table>

Note: The border attribute is obsolete in modern HTML5. You should style table borders using CSS, but it is useful for visualization during basic learning.

---

Chapter 25: Table Headers & Accessibility

To make a table understandable, you must define header cells.

• <th> (Table Header): Defines a cell that represents a column or row header. By default, browsers bold and center the text inside <th> elements.

25.1 The scope Attribute

For screen readers, it is critical to declare whether a header cell applies to a column or a row:

• scope="col": The header is for a vertical column.
• scope="row": The header is for a horizontal row.

<table>
    <tr>
        <th scope="col">Product</th>
        <th scope="col">Price</th>
    </tr>
    <tr>
        <td>Laptop</td>
        <td>$999</td>
    </tr>
    <tr>
        <td>Mouse</td>
        <td>$25</td>
    </tr>
</table>

---

Chapter 26: Merging Cells (Rowspan & Colspan)

Sometimes a table cell needs to stretch across multiple columns or down multiple rows. We do this using merging attributes.

26.1 Column Spanning (colspan)

The colspan attribute merges cells horizontally across columns:

<table border="1">
    <tr>
        <th scope="col">Time</th>
        <th scope="col">Monday</th>
        <th scope="col">Tuesday</th>
    </tr>
    <tr>
        <td>9:00 AM</td>
        <td colspan="2">Conference Seminar (All Morning)</td>
    </tr>
</table>

26.2 Row Spanning (rowspan)

The rowspan attribute merges cells vertically down rows:

<table border="1">
    <tr>
        <th scope="col">Shift</th>
        <th scope="col">Employee</th>
    </tr>
    <tr>
        <td rowspan="2">Morning Shift</td>
        <td>Alice</td>
    </tr>
    <tr>
        <td>Bob</td>
    </tr>
</table>

---

Chapter 27: Advanced Table Sections

For complex tables, HTML5 provides structural grouping tags. These help browsers render tables more efficiently (especially when printing long pages) and improve styling consistency.

• <caption>: Adds a title or description above the table. It must be the first child tag inside <table>.
• <thead>: Wraps the header row(s).
• <tbody>: Wraps the body data rows.
• <tfoot>: Wraps the summary or footer rows (like a total row).

<table>
    <caption>Student Exam Scores</caption>
    <thead>
        <tr>
            <th scope="col">Student Name</th>
            <th scope="col">Grade</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Emily Watson</td>
            <td>A+</td>
        </tr>
        <tr>
            <td>John Doe</td>
            <td>B</td>
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <td>Average Grade</td>
            <td>A-</td>
        </tr>
    </tfoot>
</table>

Using these elements makes tables clean, structured, and easy to style.