W28

WEEK 28

Table Style and Code Comments

web.selah-hcs.orgweb design for kids // html5 + css3one day academy

THIS WEEK'S JOB // Make your tables handsome and start leaving notes to your future self in the code. (Book pages 206-210 in Mrs. Gaiser's book.)

THE THREE IDEAS

border-collapse and padding

border-collapse: collapse merges the double lines; padding in cells stops the numbers from touching the walls. Two properties, instant dignity.

Stripe the rows

Alternating row colors (a class on every other row, or nth-child if you are bold) helps eyes track across wide tables.

Comments are notes, not code

HTML hides notes inside comment markers and CSS inside slash-star pairs. The browser skips them; the next person reading your code (you, in March) does not.

TRY IT IN THE PAINT BOOTH

<style>
  table { border-collapse: collapse; }
  td, th { border: 1px solid #444; padding: 6px 10px; }
  /* stripe: every other row */
  tr.alt { background: #171236; color: #eae6ff; }
</style>
<table>
  <tr><th>Shop</th><th>Street</th></tr>
  <tr><td>Bakery</td><td>Main</td></tr>
  <tr class="alt"><td>Arcade</td><td>Main</td></tr>
</table>

OPEN THE PAINT BOOTH, PRELOADED »

ON YOUR LOT

Style your week-18 table and leave two honest comments in your files: one in the HTML, one in the CSS, explaining a choice you made.

« W27 W29 »