📊 Chapter Roadmap
Think of an HTML table exactly like a Microsoft Excel Spreadsheet. It is used to arrange data (like numbers, names, or schedules) into neat rows and columns.
1 Table Basics
Building a table is like building a house brick by brick. You need three essential tags to build the most basic table:
<table>
The Main Wrapper
Tells the browser, "Hey, I am starting a table here!"
<tr>
Table Row
Creates one horizontal line (row) across the table.
<td>
Table Data
A single box or cell. This is where your actual text goes!
<td>Red</td>
| Apple | Red |
2 Table Headers (<th>)
Usually, the very first row of a table acts as a title or a label for the columns. Instead of using normal <td> cells for these titles, we use <th> (Table Heading).
<th> tag automatically becomes Bold and Centered!
| <th> Fruit | <th> Color |
|---|---|
| <td> Banana | <td> Yellow |
3 Advanced Table Structure
For larger, more professional tables, we group our rows into three specific sections. This helps screen readers understand the table and allows browsers to scroll the body independently of the headers!
-
<thead>
Table Head: Wraps the top header rows.
-
<tbody>
Table Body: Wraps the main data/content rows.
-
<tfoot>
Table Foot: Wraps the bottom row (often used for totals or summaries).
4 Merging Cells (Colspan & Rowspan)
Just like you can "Merge Cells" in Microsoft Excel, you can combine multiple HTML table cells into one giant cell using attributes.
colspan
Merges columns Horizontally (left to right ➡️).
<td colspan="2">Merged</td>
| Cell 1 | Cell 2 |
| Colspan 2 (Stretches across 2 columns) | |
rowspan
Merges rows Vertically (top to bottom ⬇️).
<td rowspan="2">Merged</td>
| Rowspan 2 (Stretches across 2 rows) |
Cell A |
| Cell B |