Basics of HTML
Organization: Tables
Table Basics
Tables used to be HTML's only way of displaying columns. Nowadays, it's preferable to use Styles for this. It's especially not good current practice to use tables for what I've used them for quite a bit in the past, and that is arranging images on a web page (like here).
However, tables do still have their uses, particularly in displaying chart-like information. The information in this box will tell you all you need to know to construct tables for these traditional uses.
Tables are made in HTML using a series of paired, nested tags. <table></table> surrounds the entire element, with <tr></tr> around each row and <td></td> around each cell. The td tags are the heart of the table, where the content resides.
So, a very simple table that looks like this:
| This | is a |
| very simple | table |
would have source code that looks like this:
<table border="2">
<tr><td>This</td><td>is a</td></tr>
<tr><td>very simple</td><td></td></tr>table.
</table>
Of course, the lines of HTML don't have to be separated like this, you can just run them all together and the rows and cells will still display perfectly. But since table coding can sometimes get a little complicated-looking, even for a tiny table like this, I separated the code for each row for ease of reading.
There are two rows, so there are two sets of <tr></tr> tags, with two sets of <td></td> tags nested in each of them. And everything is cosily nested into the <table></table> tags.
This little bit of HTML is actually a little more complicated than it needs to be since I added a border attribute that gave it a 2 pixel-wide border. If you don't specify a border width, no border will display in modern browsers. If I hadn't put in the border specification above, this is how the table would look:
| This | is a |
| very simple | table. |
As you can see, borderless tables are what are commonly used for positioning images and chunks of text. You can obviously have thicker borders by increasing the value of your border attribute. All the<table> attributes are reviewed here at W3Schools.
You will notice an important fact about tables in my little example. The size of each table column is determined by the longest chunk of text (very simple in my example) in a cell in that column. This is a fact of HTML tables that cannot easily be avoided (you can specify the sizes of your columns, but this runs the danger of a table displaying oddly if your viewer's screen or window isn't sized the same as yours). You can vary font size from cell to cell, use <br /> tags to divide up your text, or, of course, re-write your cell content to condense or expand the cells.
That is all there is to simple tables. They can get much more complex, but these simple rules still apply. See elsewhere on this page for explanations of some of this complexity.
Spacing & Headings
There are many ways in which tables can be customized, and when you see how easy this is, you'll understand why they have been so widely used for purposes other than just presenting spreadsheet data.
Spacing
Spacing in your table can be specified two different ways, with two different attributes added to the<table> tag:
- cellspacing specifies the space between cells
- cellpadding specifies the space between the cell wall and the cell content
Here's an example of a table with the spacing set at 10 pixels <table cellspacing="10">:
| Language | Formal | Familiar |
| German | Sie | du |
| Spanish | usted | tu |
And with <table cellpadding="10">, we see this:
| Language | Formal | Familiar |
| German | Sie | du |
| Spanish | usted | tu |
The values for these attributes must be given in pixels.
Headings
If you are using tables for chart-like elements or spreadsheets, headings come in very handy. They automatically bold and center the headings of table columns or rows. Here's an example of their use:
| Language | Formal | Familiar |
| German | Sie | du |
| Spanish | usted | tu |
This automatic heading styling is achieved by using <th></th> tags instead of the usual <td></td> ones around the text that you want to serve as a heading.
If you want to add stylistic elements to your headings, like colored text or a different font, you can put this information in <thead></thead> tags within the <table></table> nest. You can do the same for the last row in your table, using <tfoot></tfoot> tags. If you use these head and foot tags, your main table content needs to be enclosed in <tbody></tbody> tags. See more details at W3Schools.
You can also put captions on tables, but I've never found this tag particularly satisfactory. For one thing, it's not automatically bolded, which I find odd. Plus, it appears right smack dab on top of the table, and I usually prefer some white space between a title and a table. But here's how you do it:
| Language | Formal | Familiar |
| German | Sie | du |
| Spanish | usted | tu |
Should you want to use a caption like Languages in the example above, just insert <caption></caption> tags, with the caption text between them, right after the <table> tag.
Thick Rows, Wide Columns
Very useful table cell attributes, for making charts as well as for positioning content, allow you to make columns span multiple columns, and make rows span multiple rows. The attributes are <tdrowspan="x"> and <td colspan="x"> where x is the number of rows or columns that you want to span.
For a simple example of spanned rows:
Math |
Algebra |
Calculus |
|
English |
Composition |
Literature |
The source code for this table is:
<table border="1" cellpadding="2">
<tr><td rowspan="2">Math</td>
<td>Algebra</td></tr>
<tr><td>Calculus</td></tr>
<tr><td rowspan="2">English</td>
<td>Composition</td></tr>
<tr><td>Literature</td></tr>
</table>
(Remember that the source code doesn't have to be divided up nicely, line-by-line like this, in order to display correctly.)
And here's an example of spanned columns:
| German | Spanish | ||
| Formal | Informal | Formal | Informal |
| Sie | du | usted | tu |
Here's the source code for this table:
<table border="1" cellpadding="2">
<tr><td style="text-align: center;" colspan="2">German</td>
<td style="text-align: center;" colspan="2">Spanish</td></tr>
<tr><td>Formal</td>
<td>Informal</td>
<td>Formal</td>
<td>Informal</td></tr>
<tr><td>Sie</td>
<td>du</td>
<td>usted</td>
<td>tu</td></tr>
</table>
Nesting Tables and other Elements
Particularly in using tables for layout (although, I must re-iterate, Styles is the preferred way of setting up a page's layout) the idea of nesting one inside another is particularly useful.
For example:
| How a |
|
||||
| might | look |
All you need to do for this to work is put the complete tagging for a table within the cell of an existing table. The source code for the table above (minus some of the color effects I added to make it easy to see what was nested within what) looks like this (the <td> with the embedded table is shown in red):
<table border="2" >
<tr><td>How a</td>
<td>
<table border="2" >
<tr><td>table</td><td>within</td></tr>
<tr><td>a</td><td>table</td></tr>
</table></td></tr>
<tr><td>might</td><td>look</td></tr>
</table>
You can put other elements into table cells, too.
Lists
Just enclose the appropriate list and list item tags within the desired cell, between <td></td> tags. For example, the source code for this table:
| Spurs championship years: |
|
would look like this:
<table border="1">
<tr><td>Spurs<br />championship<br />years:</td>
<td><ul>
<li>1999</li>
<li>2003</li>
<li>2005</li>
<li>2007</li>
<li>2014</li>
</ul></td>
</tr>
</table>
The <br />'s made each word in the first cell appear on its own line.
Using Colors in Tables
Giving different cells or rows differnt background colors is very useful when you use tables for layout. (Of course, it can also be a nice touch in chart-like tables, too.)
This is accomplished by adding a style attribute to the element you want to color, like this:
<td style="background-color:red">
Giving just one of the cells of a table this attribute would look like this:
| fancy | plain |
| plain | plain |
Be sure to also specify a light-colored text if you make your backgrounds dark:
| blue | yellow |
| pink | turquoise |
The previous examples showed tables with borders, but of course for layouts, you'll want borderless tables. They can be used to position elements all over a page (although Styles is the preferred way to do this: see the tab). But you can also use little tables for nice little stylistic touches as well.
For example:
Spurs championships: |
|
1999 |
|
2003 |
|
2005 |
|
2007 |
|
2014 |
I created the whitespace between the columns by putting additional cells there with a non-breaking space character in each. You could also put a transparent gif in the "spacing" cells (See the Invisible Graphics heading at the bottom of the Graphics page.) That would allow you to make the spaces as wide as you like.
Images
Entire tables, and individual table cells, can also have images as backgrounds. Just add the appropriate style attribute to the appropriate element (see the Page Decoration tab).
Graphics Credits
The cute train line on this page came from Realm Graphics, a nice free graphics site. I made the tables graphic myself—this is a good example of the fact that even unartistic people can make graphics!
Last updated:
