Tables — the right way (not for layout!)
Use tables for TABULAR DATA only (not for page layout). thead, tbody, tr, th, td.
index.html
v3.1
Live preview
updates as you type
🧠 How it works
table — the container. thead — table header (top row). tbody — table body. tfoot — table footer (rare). tr — table row. th — table header cell (bold, centered by default). td — table data cell. Add 'border: 1px solid black; border-collapse: collapse;' in a <style> tag to see borders. colspan='2' makes a cell span 2 columns. rowspan='2' spans 2 rows. NEVER use tables for page layout — use CSS grid/flexbox instead. Tables are for DATA only.
✏️ Try these changes
-
Add <style>table, th, td { border: 1px solid black; border-collapse: collapse; padding: 8px; }</style> at the top→ visible borders appear -
Change <td>Ada</td> to <td colspan="2">Ada</td>→ Ada's cell spans 2 columns -
Add a third row with your own data→ table grows -
Add <caption>Users</caption> right after <table>→ table gets a title