Introduction
Some information only makes sense in rows and columns: a class marks sheet, a school timetable, a shop's price list, a cricket scorecard. That is the table's job. In this lesson you build a real student marks table the way professionals do — a header part and a data part — and you learn the one trick every timetable needs: merging cells across columns and rows. (Roman Urdu: Numberon ki sheet ho ya time table — data ko kataaron aur khaanon mein dikhana table ka kaam hai.)
Key points
- A table shows data in rows and columns — a marks sheet, a timetable, a price list.
- The 4 basic tags:(Roman Urdu: tr = kataar (row), th = heading wala khana, td = aam khana.)
<table>— the whole table.<tr>— one row (table row).<th>— a header cell. Bold and centered by default.<td>— a data cell (normal cell).
- Build the table row by row. Every row should be planned: how many cells does this row have?
<thead>holds the header row(s),<tbody>holds the main data rows. This keeps a big table organized and easy to read. When the class grows from 4 students to 40, you simply add more rows inside<tbody>— the header in<thead>never moves and never repeats in your code.- Merging cells (the lesson's main trick): You have already seen a span at work in every school timetable: one tall "Lunch Break" or one wide merged cell standing in place of many small cells.
colspan="2"— one cell covers 2 columns (goes wide).rowspan="2"— one cell covers 2 rows (goes tall).
- When a cell spans, the row has fewer
<td>tags — the spanned cell already covers those places. Always count the places, not the tags. - Tables are for data only. Making the whole page layout with a table is the old way — page layout is CSS's job (coming in the CSS series).
Code examples
Example 1 — A student marks table with thead and tbody
<table>
<thead>
<tr>
<th>Name</th>
<th>Math</th>
<th>English</th>
</tr>
</thead>
<tbody>
<tr>
<td>Ali</td>
<td>85</td>
<td>78</td>
</tr>
<tr>
<td>Ayesha</td>
<td>92</td>
<td>88</td>
</tr>
</tbody>
</table>What it does: The header row (Name, Math, English) sits in <thead>. Each student's marks are one row of <td> cells in <tbody> — exactly like the marks table built in the video.
What you will see: a grid with a bold top row — Name, Math, English — then one row per student under it, every number standing exactly under its subject. Without any CSS the borders are invisible, but the rows and columns already stand in perfect lines.
Example 2 — Merging cells with colspan
<tr>
<td colspan="2">Lunch Break</td>
</tr>What it does: One cell stretches across 2 columns. In a timetable, the lunch cell covers both period columns — and this row needs no second <td>.
What you will see: in that row, a single wide cell with "Lunch Break" in it, as wide as two normal cells together — no dividing line in the middle.
Example 3 — Merging cells with rowspan
<table>
<tr>
<th>Day</th>
<th>9–10 AM</th>
</tr>
<tr>
<td rowspan="2">Monday</td>
<td>Math</td>
</tr>
<tr>
<td>English</td>
</tr>
</table>What it does: The "Monday" cell covers two rows (rowspan="2"), so the second period row needs only one <td> — the English cell. Count the places: every row still covers 2 columns — row 3 gets its first place from the tall Monday cell.
What you will see: "Monday" standing in one tall cell on the left, as high as two rows, with "Math" beside its top half and "English" beside its bottom half — exactly how a real class timetable shows one day with many periods.
Quick recap
- A table =
<table>+ rows<tr>+ header cells<th>(bold, centered) + data cells<td>. - Build row by row, and count places, not tags — every row must cover the same number of columns.
<thead>holds the header,<tbody>holds the data — add students by adding rows in<tbody>.colspanmerges a cell wide (across columns);rowspanmerges it tall (across rows). A spanned row needs fewer<td>tags.- Tables are for data only — page layout belongs to CSS.
Common mistakes
- Different number of cells in each row — one row has 3 cells, the next has 2 (without a span), and the table breaks into a strange shape. Count every row.
- Forgetting spans change the count — after
colspan="2", writing the normal number of<td>tags makes the row too wide. - Using a table for page layout — header in one row, menu in another. It works on your screen but breaks on mobile and confuses Google. Tables are for data.
Practice
- Make a marks table for 4 students and 3 subjects, with
<thead>and<tbody>, like Example 1. - Make a one-day class timetable (4 periods). Add a "Lunch Break" row that covers all 4 columns with
colspan.