HTML Tables & Iframes
[Classroom Tip] This demo demonstrates semantic table structure,
colspan & rowspan cell merging, table accessibility with scope,
and iframe sandboxing — all interactive.
A well-structured table uses <caption>, <thead>, <tbody>, and <tfoot>.
<table>
<caption>Course Grades</caption>
<thead>
<tr>
<th scope="col">Student</th>
<th scope="col">Assignment</th>
<th scope="col">Score</th>
</tr>
</thead>
<tbody>
<tr>
<td>Alice</td>
<td>Lab 1</td>
<td>92%</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="2">Average</td>
<td>87%</td>
</tr>
</tfoot>
</table>
| Student | Assignment | Score |
|---|---|---|
| Alice | Lab 1 | 92% |
| Bob | Lab 1 | 85% |
| Carol | Lab 1 | 89% |
| Alice | Lab 2 | 95% |
| Bob | Lab 2 | 78% |
| Average | 87.8% | |
Click a header row button to highlight how cells span across columns or rows.
| Monthly Schedule (colspan="3") | ||
|---|---|---|
| Lecture | Lab | Tutorial |
| Combined Lecture+Lab | Tutorial | |
<th colspan="3">Monthly Schedule</th> <td colspan="2">Combined Lecture+Lab</td>
| Day | Session | Room |
|---|---|---|
| Mon | Lecture | A101 |
| Tutorial | B204 | |
| Tue | Lab | Lab03 |
<td rowspan="2">Mon</td>
scope AttributeThe scope attribute tells screen readers whether a <th> applies to a column or a row.
<th scope="col">...</th> <!-- Header for an entire column --> <th scope="row">...</th> <!-- Header for an entire row -->
Without scope, screen readers cannot determine which header belongs to which cell — breaking table navigation for blind users.
| Midterm | Final | Average | |
|---|---|---|---|
| Alice | 82 | 91 | 86.5 |
| Bob | 74 | 80 | 77 |
| Carol | 90 | 95 | 92.5 |
Blue headers = scope="col" | Navy headers = scope="row"
Set rows and columns, then click Generate to build a table skeleton.
The sandbox attribute restricts what embedded content can do. Toggle features on/off below.
<iframe src="embed.html" sandbox="" width="400" height="200"> </iframe>
allow-same-origin + allow-scripts together — it can escape the sandbox