Block-Level Elements
Yep. Three bloody pages of them. Don't say we're not going into this in any detail! (pauses, eyes the list of items not in this tutorial) Alright, you can say it, just not very loud, okay?
Tables
Tables can be useful for organising data, so it was only natural that they'd appear in HTML. Unfortunately, tables are also a pretty divisive subject. Some love 'em, others hate 'em.
Why? A quick history lesson. Back in the early days of the World Wide Web, style sheets were not in common use or supported by many browsers. If you wanted to create an interesting layout for your site, you had to resort to using tables as a layout tool. A lot of people still do it today, and really it's not a very good idea as it can lead to pages loading or being read by search engines in an illogical order. These days we can use <div> elements and stylesheets for layout.
When in doubt, use tables only for the display of tabular data and you can't go wrong.
There are lots of tags that can be used in tables, but just to keep it simple I'm going to use just five in this tutorial: <table>, <tr>, <th>, <td> and <caption>. The following table uses all five of those tags. As usual, I'll show you the code afterwards, and then I'll explain each of the tags.
| Table Heading #1 | Table Data #1 | Table Data #2 |
|---|---|---|
| Table Heading #2 | Table Data #3 | Table Data #4 |
And here's the code!
<table>
<caption>This is a table caption</caption>
<tr>
<th>Table Heading #1</th>
<td>Table Data #1</td>
<td>Table Data #2</td>
</tr>
<tr>
<th>Table Heading #2</th>
<td>Table Data #3</td>
<td>Table Data #4</td>
</tr>
</table>
Let's go through this tag by tag. The first one we encounter is <table>. Quite simply, the table begins with </table> and ends with <table>. Anything outside of those tags is not part of the table. <caption> delimits a caption for the table. It's not displayed in any of the table cells; it's just a useful heading.
Onto the contents of the table, and we come across <tr>. TR stands for 'Table Row', and it's vitally important that you don't leave this tag unclosed. Admittedly you shouldn't leave any tags unclosed at all, but this is especially important in tables. In fact, you should create a few documents with improperly formed tables, just so you know what happens.
Finally, we encounter <th> and <td>. Both of these elements create cells for the table but have slightly different effects. <th> creates a heading. Unless you specify otherwise, these headings are in boldface and aligned to the centre of the cell. <td> creates a regular, common or garden cell used for the storage of one item of table data.
I hasten to add that there is a Hell of a lot more to tables than that. There are more elements and loads of attributes that all help to make tables more meaningful. I don't want to bog you down with details right now, but if you're interested I encourage you to go and look them up.