W18

WEEK 18

Tables: Data in Rows and Columns
web.selah-hcs.orgweb design for kids // html5 + css3one day academy
THIS WEEK'S JOB // Build honest tables for things that are truly grids: schedules, scores, price lists. (Book pages 137-146 in Mrs. Gaiser's book.)

THE THREE IDEAS

table, tr, td, th
table wraps the grid, tr makes a row, td makes a cell, th makes a header cell. Rows hold cells; that is the whole grammar.
Tables are for data
Once upon a time whole pages were built out of tables. We do not do that anymore; CSS does layout now. Tables are for things with rows and columns by nature.
Headers help everyone
th cells label your columns, look bold by default, and tell screen readers what each number means. Data without labels is a puzzle, not a table.

TRY IT IN THE PAINT BOOTH

<table>
  <tr><th>Class</th><th>Day</th></tr>
  <tr><td>Web Design</td><td>Monday</td></tr>
  <tr><td>Robotics</td><td>Wednesday</td></tr>
</table>
OPEN THE PAINT BOOTH, PRELOADED »

ON YOUR LOT

Add one real table to your site: your schedule, a top-five list with ratings, anything honestly grid-shaped.
« W17W19 »