Tables and Data Representation

All in one: every table tag and attribute, side by side

What this example compares

Table or not: tabular data (student × subject, day × period, product × feature) vs things that only sit side by side
The parts: <table>, <caption>, <thead>, <tbody>, <tfoot>, <tr>, and <caption> vs <figcaption>
The cells: <th> vs <td> vs a bold <td>, a row header in the body, a cell with no <tr> and <tc> (no such tag)
The lines: no CSS vs the old border="1" vs CSS border + border-collapse
Merging: colspan (sideways) vs rowspan (downwards), Figure 19.2 and the lab timetable
Counting cells: colspan="3" + one cell, and the row under a rowspan, vs repeating, an empty cell and colspan instead
Screen readers: scope="col", "row", "colgroup", "rowgroup" vs headers="mon t9" with id
The fix: th + scope + caption vs divs, fonts and colours
Whole columns: <colgroup> + <col>, <col span="2">, a column width, vs a style on every cell
The order: caption, colgroup, thead, tbody, tfoot vs three wrong orders
Not for layout: a layout table vs role="presentation" vs <header>, <nav>, <main> + CSS Grid
Worked example: the marks sheet with a merged grand-total row

Point at any word in the code to see what it means (tap on a phone); click a word to keep its meaning on screen. Read the comment above each numbered panel, press Run, then Edit & experiment to try the TRY lines yourself.

The complete code

Loading the example…

What you should see

You should see twelve panels; the last ones are further down inside the preview, so scroll it. Panel 1 shows three small grids and a photo beside its text. Panel 2 shows the marks table with a grey title, a saffron header row, green data rows and a blue Average row. In panel 3 the first card's headers are bold and centred, the second card's are plain and on the left, the third card's are bold but on the left, and in the last card 85 sits above the table while Rahul's row is one cell short. Panel 4 shows no lines, double lines, then single lines. In panel 6 every red card has a row sticking out to the right. Panels 7 and 8 print grey scope=, id= and headers= tags. In panel 10 the first three cards look alike, but in the last one Marks has fallen below the table as plain text. The page has no JavaScript, so there is no console output.

Quick check: in panel 6, card E fixes the row under rowspan="2" with an empty <td></td>. Why does that row still stick out, and what is the right fix?

An empty cell is still a cell, so the row now has three cells plus the column already filled by the tall Unit 2 cell: four, in a three-column table. The right fix is card C: leave that cell out of the row completely, because the rowspan cell above already fills it.