Tables & Structured Data

🌐 HTML Basics Lesson 7 Beginner

HTML tables organize structured data into grid rows and columns using semantic headers and cell spans.

1 Table tags, headers, and spanning parameters

Key table parameters include:

thead, tbody, tfoot: Semantic sections to divide table headers, body rows, and calculations footers.
colspan: Extends a table cell across multiple columns.
rowspan: Extends a table cell vertically across multiple rows.

2 Table Elements Code

Let's check table grids configurations:

HTML — Tables

<table border="1">
    <thead>
        <tr>
            <th>Product</th>
            <th>Quantity</th>
            <th>Price</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Book</td>
            <td>2</td>
            <td>$10.00</td>
        </tr>
    </tbody>
</table>

3 Code Challenge

Challenge: Write a table with a footer row that merges the first two cells using `colspan="2"` to display a single, centered "Total" label.