Basic Tables
When beginners hear the term “table” being used, they usually dream up the image of something like this:
| Best films | Monsters, Inc. | Toy Story 2 | The Lion King |
|---|---|---|---|
| Best music | Doves | Elliott Smith | Daft Punk |
| Best comics | Calvin and Hobbes | The Far Side | Penny Arcade |
In reality, tables are far more abundantly used than simply to show data in formats like that. Tables used to be the most flexible layout systems available to web-designers, until we were gifted with the expanded possibilities of CSS layout. Even though most working designers have moved on from using tables for layout, they are still exactly what you need when you need to lay out a data set to be easily understood, and knowing how to write a clean, intelligible table is a vital skill.
This page was last updated on 2012-08-21
Basic Table Code
Tables are made up of many parts, all inside one another, which is where much of the complications come from. Thankfully, there is a very rigid and logical system for writing tables.
<table border="1">
<tr>
<td>cell 1</td><td>cell 2</td>
</tr>
<tr>
<td>cell 3</td><td>cell 4</td>
</tr>
</table>
The code above would create this:
| cell 1 | cell 2 |
| cell 3 | cell 4 |
Even though that’s about as basic as a table can be, that might still look more complicated than you’re used to. Allow me to explain:
<table>holds all the other table-related elements inside of it. It has aborderattribute, which can be set to a number. This defines how wide the table’s border is — set it to zero for no border.<tr>starts a new Table Row. Rows are ended with a closing</tr>.<td>means Table Data, but we will always call them “table cells”. Each box you see in the resulting HTML page is a cell.tds are closed similarly with a</td>.</table>ends the table.
Cells resize themselves if the text you put into the tds is too big, and each row in a table must contain the same amount of cells, unless you use special attributes (dealt with later). You cannot put anything in a table that is not within a td and a /td — i.e. you can't start writing after an opening tr tag, you must open the td first.
Be careful that you close all your elements. Since the tds are contained in the trs, and they are contained in the <table>, if you forget any end tags, your whole table might be messed up (especially in the more recent browsers who are clamping down on this).
Table Attributes
You’ve already seen me make use of the border attribute of tables. I’ll go through that and the rest now.
bordercan be set to any value, for bigger borders around your tables and between your cells. Note that most tables have their border set to 0 — i.e. invisible, with background colours used to define the edges of the cells.alignjust like most elements, whole tables can be aligned to thecenter,leftorright.widthis used to specify how wide the table is, either in pixels or in a percentage of the screen width. For example, you could specifywidth="400"orwidth="80%".
Spacing your tables out
These two table-specific attributes affect how much space is left both between table cells, and between the table border and its contents. Together they can make a big difference to how easily your tabulations can be read.
cellpadding is the space around anything in the td. For instance, in the first of these tables, cellpadding is set to 0, and in the second it is 5.
|
|
You can see in the first one that the content is right up against the border, while in the other one it has been padded out from the edge. This is generally much better for readability, so give your text some breathing space.
cellspacing is the space between cells. The border between them is split. You’ll understand this much better with an example. Again, it’s 0 and 5.
|
|
|---|
The default (value it is set to if you make no change) for both of these attributes is 2.
Cell Alignment
Not only can you align the entire table to either side or to the middle, you can also align the text, or images, or whatever, inside a cell to either side, middle, or to the top or bottom. For instance:
| center | right |
You simply put the align attribute in the td element (or in the tr if you want to affect the whole row). Like <td align="right">.
valign means Vertical Align. In the first cell below the valign is set to bottom and in the second valign="top".
| bottom | top | middle |
left is the default for align and middle for valign.
Table and Cell Width
You can add the width="x" attribute into either your table element or into individual cells. If you put it into the table element, you’ll be specifying how wide the table is on the screen, in pixels or as a percentage of the screen. Try to keep the widths under 750 pixels at most, so that it fits into the width of most people’s monitors. If you’re setting it as a percentage, don’t forget the % mark.
Usually cells resize themselves depending on what you’ve put into them, but you can directly specify how wide you want them by putting the width attribute in. This way you’re specifying their width in pixels as before, or their percentage of the table that they’re in. Once you’ve set one, the others will sort the remaining space out themselves.
Remember, anything can go inside a table cell. Images, text: the lot. You could put all your content in a table and use it to align things up or lay out charts and graphs. See what you can come up with.
sourcetip: In certain old browsers, when you add text into a table cell, the text’s font always goes back to the default size, face and colour. Just write a simple stylesheet and define fonts for your tables to solve this problem.
The next tutorial contains some more advanced ninja techniques for laying out complex tables.
