I’ve been putting off writing this free HTML tutorial for a long time… Tables are messy, tricky, and surrounded with controversy. They are, IMHO, the most abused tags in HTML. And a tutorial that teaches how to use them needs to be executed most carefully.
What are Tables For?
Before I even begin to dig into HTML tags or anything code specific, I want to discuss what tables are for.
In a non-Internet world, what are tables used for? Well, you put data into tabular form so that it’s easy to read. Financials, your Excel spreadsheets, names in the phone book, all are organized into tables in order to make the information easy to understand.
Tables are clearest when they have a title and labels for the information contained in rows and columns. Sometimes colors, lines, bolding, or different font sizes are used to make certain parts of the table stand out and improve the table’s clarity.
Tables are NOT intended to be used for site layouts. Can you imagine an advertisement or a piece of art with black lines all across it, dividing the drawing into nice little boxes? That’s the kind of reaction I have when I see a web site using tables for layout.
I suppose I should say tables should no longer be used for layout. In the earlier days of the web, tables were among the best layout methods available. Now, however, support for CSS has advanced to a level where tables are usually unnecessary for site layouts.
Tables are for tabular data.
Building a Table
In HTML, tables are very complex beasts. I’m going to put off the advanced features of tables and virtually all information about how to change a table’s appearance for future tutorials—this is meant to be a basic primer for tables. A really good advanced article you can read now, if you’d like, is 456 Berea St.’s Table Article
The first tags are <table> and </table> They tell your browser where the table begins and ends.
<table>
</table>
Tables are like sandwiches—you stack them. Inside of your table, you need to specify rows. A single row begins with <tr> and ends with </tr>. Here’s what our table code looks like with two rows:
<table>
<tr></tr>
<tr></tr>
</table>
Finally, we have the individual cells that make up each row. As a general rule of thumb, the number of cells in each row needs to be the same (there are some ways to work with this rule that I will explain later). Let’s add three cells to each row using <td> and </td> tags with some content in between.
<table>
<tr>
<td>Cell 1</td>
<td>Cell 2</td>
<td>Cell 3</td>
</tr>
<tr>
<td>Cell 4</td>
<td>Cell 5</td>
<td>Cell 6</td>
</tr>
</table>
Tada! Here’s our table, one of the most basic, complete tables that can exist:
| Cell 1 |
Cell 2 |
Cell 3 |
| Cell 4 |
Cell 5 |
Cell 6 |
Captions and Summaries
A good table will almost always have a caption or title to briefly describe what its contents are. We can also include a summary that will tell visitors using screen readers (and search engines) what content can be found in our table. A caption goes right after the <table> tag, like this:
<table>
<caption>Table 1: Some Data</caption>
A summary is an attribute added to the <table> tag:
<table summary=”Our data is a collection of information used to demonstrate tables.”>
Here’s how our table looks so far:
Table 1: Some Data
| Cell 1 |
Cell 2 |
Cell 3 |
| Cell 4 |
Cell 5 |
Cell 6 |
Table Headers: Column Labels
It’s good practice to tell people what the category of information in a column falls into. We’ll do this by adding a row that uses <th> and </th> tags to label each of the columns.
<table summary=”Our data is a collection of information used to demonstrate tables.”>
<caption>Table 1: Some Data</caption>
<tr>
<th>Header 1</th>
<th>Header 2</th>
<th>Header 3</th>
</tr>
<tr>
<td>Cell 1</td>
<td>Cell 2</td>
<td>Cell 3</td>
</tr>
<tr>
<td>Cell 4</td>
<td>Cell 5</td>
<td>Cell 6</td>
</tr>
</table>
Table 1: Some Data
| Header 1 |
Header 2 |
Header 3 |
| Cell 1 |
Cell 2 |
Cell 3 |
| Cell 4 |
Cell 5 |
Cell 6 |
Combining Cells
You can combine the cells in various columns or rows in order to make irregular tables. This is one of the tasks of creating tables that is the hardest.
Colspan combines cells that are in the same row to make them wider. The colspan attribute goes in the <td> tag of the cell you want to keep. Use colspan=”2″ to combine two cells, and larger numbers to combine more cells. Make sure to get rid of the extra cells that got combined together.
Rowspan combines cells in the same column to make them taller. This attribute also goes in a <td> tag. Make sure to eliminate the cells directly above and/or below the cell you want to keep. They will be found in different rows of the table. Here is a final example that shows some combined cells (I have highlighted some cells for illustration purposes only—the following code won’t highlight anything under normal circumstances).
<table summary=”Our data is a collection of information used to demonstrate tables.”>
<caption>Table 1: Some Data</caption>
<tr>
<th>Header 1</th>
<th>Header 2</th>
<th>Header 3</th>
</tr>
<tr>
<td colspan=”2″>Cell 1</td>
<td rowspan=”2″>Cell 3</td>
</tr>
<tr>
<td>Cell 4</td>
<td>Cell 5</td>
</tr>
</table>
Table 1: Some Data
| Header 1 |
Header 2 |
Header 3 |
| Cell 1 |
Cell 3 |
| Cell 4 |
Cell 5 |
Conclusion
Now that you know the basics of constructing tables, you are well on your way to being able to display tabular data clearly and efficiently on your web site. Later I will write about advanced table features and how to improve your tables’ appearance with stylesheets.
