website_tables.md

1. Introduction

🔥 Today we're going to make a table in our website. You could make it for your favourite movies, games, or music bands etc.

2. Tables HTML

Firstly you have to say you want a table:

<table>

</table>

Then inside your table, you declare that you'd like a row:

<tr>

</tr>

tr = table row

then you specify you want a cell:

<td>Hello!</td>

Then all together it should look like this:

<table>
  <tr>
    <td>One!</td>
    <td>Two!</td>
    <td>Three!</td>
  </tr>
  <tr>
    <td>Four!</td>
    <td>Five!</td>
    <td>Six!</td>
  </tr>
  <tr>
    <td>Seven!</td>
    <td>Eight!</td>
    <td>Nine!</td>
  </tr>
</table>

3. CSS Borders

Next with CSS we can make it look a little prettier!

table {
    border-collapse: collapse;
}

td{
  border: 3px dotted #ffcc00;
}

4. CSS Row Colours

You can also declare fill the cells (and alternate row colours):

tr:nth-child(odd) {
   background-color:#ffcc00; 
}
tr:nth-child(even) {
   background-color:#cc0000; 
}

5. CSS Padding

Finally, we can add a little padding into our cells (extra space) like this:

padding:20px;

6. Finishing

🔥 Make sure you have a table with at least 5 things in it before moving on! You can also put an image inside a cell if you wanted!

Next we're going to look at making some hyperlinks. To prepare you need want to make at least 2 extra web pages