Tables and Layout Elements
HTML Tables
Tables display tabular data — information that has a natural row-and-column structure, like a spreadsheet.
<table>
<thead>
<tr>
<th>Name</th>
<th>Track</th>
<th>Cohort</th>
</tr>
</thead>
<tbody>
<tr>
<td>Amara Okafor</td>
<td>Frontend Engineering</td>
<td>Cohort 12</td>
</tr>
<tr>
<td>Chidi Eze</td>
<td>Data Analysis</td>
<td>Cohort 12</td>
</tr>
</tbody>
</table>
Table Structure Elements
| Element | Purpose |
|---|---|
<table> | The table container |
<thead> | Groups the header row(s) |
<tbody> | Groups the data rows |
<tfoot> | Groups the footer row(s) — totals, summaries |
<tr> | A table row |
<th> | A header cell — bold and centered by default |
<td> | A data cell |
<caption> | A title for the table |
Spanning Columns and Rows
colspan makes a cell span multiple columns; rowspan makes it span multiple rows:
<table>
<tr>
<th colspan="2">Course Schedule</th>
</tr>
<tr>
<td>Saturday</td>
<td>10:00 AM – 1:00 PM</td>
</tr>
<tr>
<td>Sunday</td>
<td>2:00 PM – 5:00 PM</td>
</tr>
</table>
When NOT to Use Tables
Tables are for data, not for page layout. In the early 2000s, developers used tables to lay out entire pages. This is now considered bad practice:
- Tables are not responsive on mobile
- Screen readers announce table data as grid data, confusing users if it is actually navigation
- CSS Flexbox and Grid are the correct tools for page layout
Use tables for: pricing comparison charts, schedules, data grids, leaderboards, statistics.
Do not use tables for: navigation bars, multi-column layouts, image galleries.
Layout Elements: div and span Revisited
When you need a container purely for layout or JavaScript purposes — and no semantic element fits — use:
<div> — block-level generic container:
<div class="card">
<h3>HTML Fundamentals</h3>
<p>6 lessons · 46 minutes</p>
</div>
<span> — inline generic container:
<p>Progress: <span class="highlight">4 of 6 lessons complete</span></p>
Common Layout Patterns with div
Wrappers for centering content:
<div class="container">
<h1>CareerEx Dashboard</h1>
<p>Welcome back, Amara.</p>
</div>
Card components:
<div class="card-grid">
<div class="card">
<img src="html.svg" alt="HTML icon" />
<h3>HTML Fundamentals</h3>
<p>6 lessons</p>
</div>
<div class="card">
<img src="css.svg" alt="CSS icon" />
<h3>CSS Styling</h3>
<p>8 lessons</p>
</div>
</div>
The actual layout behaviour (centering, grid, flex) comes from CSS — the HTML just provides the structure.
The Full Table Picture
Here is a complete, well-structured table:
<table>
<caption>CareerEx Cohort 12 — Frontend Track</caption>
<thead>
<tr>
<th scope="col">Student</th>
<th scope="col">Progress</th>
<th scope="col">Last Active</th>
<th scope="col">Status</th>
</tr>
</thead>
<tbody>
<tr>
<td>Amara Okafor</td>
<td>Module 3, Lesson 2</td>
<td><time datetime="2025-03-01">1 Mar 2025</time></td>
<td>On track</td>
</tr>
<tr>
<td>Chidi Eze</td>
<td>Module 2, Lesson 6</td>
<td><time datetime="2025-03-02">2 Mar 2025</time></td>
<td>On track</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="4">Total students: 2</td>
</tr>
</tfoot>
</table>
The scope attribute on <th> tells screen readers whether the header applies to a column (col) or row (row).
Try it yourself
Key Takeaways
- Use <table>, <thead>, <tbody>, <tfoot>, <tr>, <th>, and <td> to create well-structured data tables
- colspan makes a cell span multiple columns; rowspan makes it span multiple rows
- Tables are for tabular data only — never use them for page layout; use CSS Flexbox or Grid instead
- Add a <caption> element to give the table a descriptive title for accessibility
- <div> is a block-level generic container; <span> is an inline generic container — use both only when no semantic element fits
- The scope attribute on <th> ('col' or 'row') helps screen readers associate header cells with their data cells
Quick Quiz
1.Which element should you use to group header rows in a table?
2.What does colspan='3' do on a table cell?
3.Should you use an HTML table to create a multi-column page layout?
4.What is the purpose of the <caption> element in a table?
5.What is the difference between <div> and <span>?
Ready to go further?
CareerEx gives you structured 12-week training, live classes every Saturday and Sunday, real tutor feedback, and a certificate. Join the next cohort.
Join CareerEx