Tables
Tables organize data in rows and columns. Use <table>, <tr> (row), <th> (header cell), <td> (data cell). Add <thead> and <tbody> for structure.
Appy Says…
Tables get a bad reputation (people used them for page layouts in 2004 — don't do that). But for actual tabular data — leaderboards, schedules, comparison charts, spreadsheets — <table> is exactly the right tool.
What are HTML Tables?
An HTML table displays data in rows and columns. It's made of nested elements: the table, rows, header cells, and data cells.
- •
<table>— the container - •
<thead>— header section;<tbody>— data rows;<tfoot>— footer - •
<tr>— a row - •
<th>— header cell (bold, centred by default) - •
<td>— data cell - •
colspan="2"— cell spans 2 columns - •
rowspan="3"— cell spans 3 rows - •
scope="col"on<th>— improves accessibility
Think of it like a Minecraft crafting grid
A 3×3 crafting grid is a table — rows and columns of slots, each holding an item. HTML tables work the same: rows go side to side, columns stack vertically, and each cell holds content.
How It Works
- •1.
<table>opens the table - •2.
<thead><tr><th>Name</th><th>Score</th></tr></thead>— header row - •3.
<tbody>contains the data rows - •4. Each
<tr>is a row;<td>cells fill each column position - •5. Columns are implicit — defined by how many cells are in each row
- •6. Style with CSS:
border-collapse: collapsemerges borders cleanly
Real-World Examples
- •A game leaderboard: columns for Rank, Player, Score, Date
- •A class timetable: rows for time slots, columns for days
- •A price comparison table: rows for features, columns for plans
- •Sports results: teams, points, wins, losses per row
Key Facts
- •Tables are NOT for page layout — that's what CSS Grid and Flexbox are for
- •
<th scope="col">tells screen readers whether a header applies to a column or row - •CSS
table-layout: fixedmakes column widths equal regardless of content - •Responsive tables often use
overflow-x: autoon a wrapper div to scroll horizontally on mobile
Watch Out!
Don't use tables for page layout — it was a 1990s hack. It breaks responsiveness, harms accessibility, and is considered terrible practice today. Use CSS Grid or Flexbox for layout. Tables are only for tabular data.
Remember
Tables = data that belongs in rows and columns (like a spreadsheet). Not for page layouts. Use <thead>, <tbody>, and <th scope> for proper semantics.
What You Learned
- •Tables:
<table> → <thead>/<tbody> → <tr> → <th>/<td> - •Use
scopeon headers for accessibility;colspan/rowspanto merge cells - •Unlocks: leaderboards, schedules, pricing comparisons, any data with rows and columns
Key Facts
- →Tables are NOT for page layout — that's what CSS Grid and Flexbox are for
- →
<th scope="col">tells screen readers whether a header applies to a column or row - →CSS
table-layout: fixedmakes column widths equal regardless of content - →Responsive tables often use
overflow-x: autoon a wrapper div to scroll horizontally on mobile
Real-World Examples
Remember
Tables = data that belongs in rows and columns (like a spreadsheet). Not for page layouts. Use <thead>, <tbody>, and <th scope> for proper semantics.
Quick Quiz
What is <td>?