Beginner's Guide Series - Basic HTML, part 3

In this last part for basic HTML, we'll be looking at generating a table. Tables, in HTML, are used to display data. It can be a report. It can be a list of people and their related information. It can be, well, a lot of things. It should not, however, be used to create the layout for your page. There are much better and more convenient ways to do that, which we'll see in a couple of sections.

The tags

Tables are represented by a collection of tags. As such, they are one of the most complex aspects of pure HTML. Luckily, it's not really that bad, and once these are mastered everything else should be pretty easy. Here are the basic tags for tables in HTML:

• <table>: This is the outer tag. It encloses the entire table;
• <tr>: This represents a table row. It's inside the table and contains all the cells for that row;
• <th>: This is a column header. It is contained within a table row;
• <td>: This is an actual cell. It is contained within a table row.

There are other tags available for defining tables, however they are not within the scope of this entry. For now, we just want to be able to design a table and output it in the browser.

Like I wrote earlier, tables are a relatively complex object. Like lists, we need to nest a couple of tags to get the desired result:

Here's how that looks like:

Column 1	Column 2
Row 2, Cell 1	Row 2, Cell 2
Row 3, Cell 1	Row 3, Cell 2

You can see we have three distinct rows, each identified in the code with a <tr> tag. In the first row, we've defined headers with <th>. In the other two rows we've used regular cells with <td>. Notice the first row's cells are in bold text and are centered. This is how most browsers output <th> tags.

One of the neat things we can do with table cells is merge them. Using the colspan attribute, we can tell a cell to span more than one column. Let's take the previous example, and modify it so there is only one header cell.

This is a header
Row 2, Cell 1	Row 2, Cell 2
Row 3, Cell 1	Row 3, Cell 2

The colspan attribute can be used in both <th> and <td> tags. Another nice feature is making a cell span over multiple rows. Let's take the first column for rows 2 and 3 and merge it:

This is a header
This is a merged cell!	Row 2, Cell 2
	Row 3, Cell 2

Notice I had to remove a cell in row 3. Since the first cell in row 2 spanned two rows, there's less space for cells in row 3. Again, the rowspan attribute can be used in both <th> and <td> tags.

There are plenty of other things we can do with tables in HTML. We'll get back to it in another episode. However, that'll have to wait, as starting in the next post we'll be looking at basic ColdFusion.

Stay tuned...