If you have kept up so far, then at this point tables become very easy to understand. Really, they are just like lists, only when you create them, they have much for structure. However, it is the most complex thing we have dealt with yet, so there is lots to learn here. But it's not hard, I think? So here is the basic HTML mark-up of a table.
<table>
<tr>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
</tr>
</table>
Okay, lets break it down:
- The "table" tags, begin and end the table.
- The "tr" tags, begin and end each row (tr - Table Row) in the table.
- The "td" tags, begin and end each cell (td - I don't know what it stands for...look it up and let me know) in the table row.
So, all your "td"s fit in the "tr"s, which fit in the "table".
Keep in mind (for now, we'll talk about how to change that lower down) that you want to have the same number of cells (td) per row (tr) all the way down your table.
Well, we are getting into the more advanced stuff in this HTML tutorial now, and if you have followed along so far you should be ready for some more. So lets add one more mark-up tag associated with tables, "th". It's rather simple:
<table>
<tr>
<th></th>
<th></th>
</tr>
<tr>
<td></td>
<td></td>
</tr>
</table>
The "th" is for the header row, so you make all the cells of that row "th" and then use "td" the rest of the way down. What it does depends on the browser your visitors are using, and what styling you give it with CSS.
We can add a 'caption' tag if you want:
<table>
<caption>My Table</caption>
<tr>
<th>Game</th>
<th>Fun-o-meter</th>
</tr>
<tr>
<td>Catch</td>
<td>93.5%</td>
</tr>
<tr>
<td>Throw</td>
<td>95.663%</td>
</tr>
</table>
Easy so far? Okay, lets add one more thing that you may use from time to time, the "colspan" attribute. Now, I don't want to get ahead of myself, but really you need some style to understand the "colspan". The "colspan" is an attribute of the "td" or "th" tags. It means that you can extend, on that row, the cell over the distance that you put two or more cells in a "tr" below or above. Are you with me? If not, the example below should help.
<html>
<head><title>Tables</title>
<style type="text/css">
table, caption, tr, th, td{
border:1px solid grey;
background-color:#ffeedd;
}
</style>
</head>
<body style="margin:150px;">
<table>
<caption>My Table</caption>
<tr>
<th colspan="2">Game</th>
<th>Fun-o-meter</th>
</tr>
<tr>
<td>1.</td>
<td>Catch</td>
<td>93.5%</td>
</tr>
<tr>
<td>2.</td>
<td>Throw</td>
<td>95.663%</td>
</tr>
</table>
</body>
</html>
Alright, you can see how I did the style tag, and play around with it if you like for now, but we'll cover all that at length when we get into the CSS tutorial. I am not going to explain what I did there for now.
Just an additional note on style. If you look at the HTML mark up of many websites you will see that tables are used as a styling method. You are welcome to do this if you want, but I would strongly discourage it. HTML is moving along and style and mark-up is increasingly being separated. You can start using nested tables and images for corners and things like that, but I would rather say stay away from that, especially while you are first learning HTML. It is the reason why I have taught this tutorial this way. It makes the HTML rather simple, and the CSS much more tricky to grasp, but it is worth it all in the long run.
There was a lot to learn in this tutorial and the best way to get a feel of it is to play around. Try it out. Put tables into lists and tables in tables. Try out a lot of things. Even just making small changes. If you have different browsers, see what different things look like in the different browsers. If you don't, you can download some browsers for free, just Google "free browsers" and you will get lots of options. If you are on a Linux machine, why not try Lynx, a browser you use in terminal?
The next section will talk about Forms, a little more advanced topic than what we have done so far.
