Now, we move on to tables. Please grab yourself a chair, although I'm not going to give you a table to sit at, I'm going to give you knowledge of HTML tables. So, if you can survive my terrible attempts at jokes, that is, horrendous jokes that could be used to torture innocent people, let us continue with the famous Website Building Tutorials.
Tables are for Tabular Information
Tables, have a very specific use. Tables are used for displaying tabular information to your visitors. In a modern website, there should only be tables on your web-page if you have tabular data to display! So... examples... we'll use, a simple schedule. Let's say you have one very important thing to do on three specific days next week. This means you have your three days... say... Monday, Friday and Saturday, and then you have the activity for each day. Let's say additionally... you wanted to include approximately how long the activity would take you. This type of information is a perfect candidate for a table. You could make a list like so:
- Monday, Go to college for a change, should take about 4 hours
- Friday, Prank call my favourite call centre, should take about 1 hour
- Saturday, nip to the pub for a sensible pint, should take about 10 hours
Well, that's all well and good, and does display the information but, it's a bit untidy, and quite frankly I can't be bothered to read it! Have a look at the following.
| Day | Monday | Friday | Saturday |
|---|---|---|---|
| Activity | Go to college for a change | Prank call my favourite call centre | Nip to the pub for a sensible pint |
| Potential Length in Time | 4 hours | 1 hour | 10 hours |
Now that's much better! It's far easier to read, looks nicer and you can get to the bit of information you need really quickly!
Building that Table
The first thing you do to get a table going, is create the table element, which consists of the opening and closing table tags.
<table>
</table>
Then, you decide how many rows you want. In this table we have three rows, and each row is created using the table row element:
<table>
<tr></tr>
<tr></tr>
<tr></tr>
</table>
Now, inside your table rows, you have each of the cells themselves. There must be the same number of cells in each row! This is how you get your columns. In our above example, we have four columns. The first row consists of all heading information, so we want to specify that all of the cells on the first row are heading cells. To do this, we use the table heading tag.
<table>
<tr>
<th></th>
<th></th>
<th></th>
<th></th>
</tr>
<tr></tr>
<tr></tr>
</table>
The structure of the next two rows are slightly different. We have a single heading cell, followed by three regular cells. A regular cell is created using a <td> element, which is closed by the </td> tag.
<table>
<tr>
<th></th>
<th></th>
<th></th>
<th></th>
</tr>
<tr>
<th></th>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<th></th>
<td></td>
<td></td>
<td></td>
</tr>
</table>
And finally, to complete this table, we fill out all of the information, so the final markup will look something, like this:
<table>
<tr>
<th>Day</th>
<th>Monday</th>
<th>Friday</th>
<th>Saturday</th>
</tr>
<tr>
<th>Activity</th>
<td>Go to college for a change</td>
<td>Prank call my favourite call centre</td>
<td>Nip to the pub for a sensible pint</td>
</tr>
<tr>
<th>Potential Length in Time</th>
<td>4 hours</td>
<td>1 hour</td>
<td>10 hours</td>
</tr>
</table>
And, since I know how you really don't want to scroll upwards, here's that output again:
| Day | Monday | Friday | Saturday |
|---|---|---|---|
| Activity | Go to college for a change | Prank call my favourite call centre | Nip to the pub for a sensible pint |
| Potential Length in Time | 4 hours | 1 hour | 10 hours |
And that's tables! Now... some of you out there probably thought that this was the chapter where I show you how to layout your web-pages using tables. Well, I have news for you. Tables are not for laying out web-pages. Just to re-cap: tables are for tabular information. I will show you how, with CSS you can layout your web-pages later on!
And now, precious mortals. Make your own table to make sure you're ready. And finally, be far out, gnarly and tabular (as opposed to tubular haha!) and take the end of chapter quiz.