Geological Wonders

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.
• Point at 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.

<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. 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 page. It is blank, and your title is on the browser tab.

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

2. 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. 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. 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. 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. 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.

   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.

Selectors you will use

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

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