← Basic Web Development

Lesson 1 of 10

Geological Wonders

Put facts in a table with HTML. Then change how the table looks with CSS.

What you will learn

  • <table>
  • <tr>, <th>, <td>
  • Linking a stylesheet
  • CSS selectors
  • :hover
  • :nth-child

Before you start

Nothing. Start here. This lesson uses no JavaScript.

What this page does

  • It shows a table. Each row is one geological wonder.
  • Every second row has a slightly different colour. This is called zebra striping. It makes long tables easier to read.
  • Move your mouse over a row. The row changes colour. This tells you which row you are on.

How a table is built

A table is made of rows. Each row is made of cells. Four tags do all the work.

TagWhat it isNotes
<table>The whole tableIt holds everything else.
<tr>One rowtr means table row.
<th>A header cellThe browser makes it bold and centred. Use it for column names.
<td>A data cellIt holds your content.
<table>
  <tr>                  <!-- one row -->
    <th>Column A</th>   <!-- a header cell -->
    <th>Column B</th>
  </tr>
  <tr>                  <!-- another row -->
    <td>some data</td>  <!-- a data cell -->
    <td>more data</td>
  </tr>
</table>

Build it step by step

Build the structure first. Add the style last. You can open the page in a browser after every step.

  1. Make the page

    Make a file called index.html. Add <!DOCTYPE html>, then the <html>, <head>, and <body> tags. Put a <title> in the <head>. Also put the stylesheet link in the <head>. Open the file. You see a blank page with your title on the browser tab.

    <link rel="stylesheet" href="index.css">

  2. Choose your columns

    Write down the facts that describe each item in your topic. For video games you might use Title, Studio, Genre, and Year. These become your header row.

  3. Make the header row

    Inside <body>, add a <table>. Inside it add one <tr> with one <th> for each column. Open the page. You see your column names in bold.

    <table>
  <tr>
    <th>Title</th>
    <th>Studio</th>
    <th>Year</th>
  </tr>
</table>

  4. Add one row of data

    Under the header row, add a <tr> with the same number of <td> cells. Fill it with one real item. Check that the cells line up under the headers. This row is your template.

  5. Add the rest of the rows

    Copy that row once for each item. Change the content each time. Keep the number of cells the same in every row. Your table is now complete, but it has no style yet.

  6. Add the style

    Make a file called index.css. Add one rule at a time and reload the page after each one. This way you see what each rule does.

    index.css
    body   { background: #f4f6f9; color: #0f172a; }
table  { border-collapse: collapse; width: 90%; margin: 2rem auto; }
th, td { border: 1px solid #cfd6e0; padding: 0.75rem; }
th     { background: #e8ecf2; }
tr:nth-child(odd)  { background-color: #f0f3f7; }
tr:hover           { background-color: #e4e9f0; }
  • border-collapse: collapse removes the gap between cell borders. Delete this line to see what it does.
  • margin: 2rem auto puts space above and below the table. The word auto centres the table on the page.
  • th, td is one rule for two tags. The comma means and.
  • padding adds space inside a cell, between the border and the text.

Change the styling

Every one of these is a line in index.css. Move a control, then open that file and find the line that changed.

0.75rem

The space inside each cell, between the border and the text. Set it to 0 and see why it matters.

#f4f6f9
#ffffff
#e8ecf2
#f0f3f7
#e4e9f0

Selectors you will use

A selector says which parts of the page a CSS rule changes. This example uses six kinds.

  • Element selector — table or td. It selects every tag of that type.
  • Group selector — th, td. It applies one rule to more than one tag.
  • Class selector — .wonder-title. It selects only tags with class="wonder-title". Use it to style some cells and not others.
  • Descendant selector — .wonder-title b. It selects a <b> tag inside a .wonder-title cell.
  • Pseudo-class — :hover or :nth-child(odd). It selects by state or by position.
  • Position selector — td:nth-child(4). It selects the 4th cell in every row. Use it to make one column narrower.

Try these changes

Make these in the files beside this guide. None of them need anything the lesson has not covered.

  • Add a `<caption>` right after `<table>`. It gives the table a visible title.
  • Put your header row inside `<thead>` and your data rows inside `<tbody>`.
  • Add one more column. Remember to add a cell for it in every row.
  • Add an `<img>` inside a cell. Then use `max-width` in CSS to keep it small.
  • Stop the header row from changing colour on hover. Use `tbody tr:hover` instead of `tr:hover`.
  • Read your text again and fix any spelling mistakes. HTML does not check spelling for you.
Teacher's versionHow to run this lesson, what to check, and any answers. Students do not need this.

How to teach it

  • Let the student choose the topic before any code is written. Ownership of the topic carries the whole lesson.
  • Build the header row, then one data row, and stop. Check that the cells line up before the student copies the row ten times.
  • Add the CSS one rule at a time. Reload after each rule. The point is that the student can name what each rule changed.
  • Delete border-collapse: collapse on purpose and reload. The double borders appear. Put it back.
  • Change :nth-child(odd) to even and reload. The stripes move onto the header row and the first data row. This is the cheapest way to show what a pseudo-class does.