What is this Session about?

By the end of this session you should...

• Know how tables work
• Know some clever tricks with tables
• Know when not to use tables

To view this page as a video, download this file (24.4mb), you'll need quicktime.

How do tables work?

Tables are more than just a single tag, they are a set of tags. <table>, <tr>, <th> and <td>. Each has a specific meaning and purpose in the grand scheme of all things table related.

Tag	Purpose
<table>	It is the block of space that the table takes up and thus used to show where the table is
<tr>	Table row, each pair of <tr> tags is one horizontal row on the table
<th>	Table Heading, used (optionally) in the first row of cells on the table, they look a little different from the other cells, they are placed inside a pair of <tr> tags along with the other cells in their row
<td>	Table cell, each pair of <td> tags holds the data of one cell, they are placed inside a pair of <tr> tags along with the other cells in their row

Lets look at an example table shall we? Drag to web browser and we get... It took me a little while to get my head around why it's done in this way but it makes sense when you've written a few tables. To add a new row, simply add another block of <tr> tags. Adding a new column is slightly harder, you must add a new <th> or <td> inside each <tr> pair in the table. So making out 2x3 table above become a 3v3 table would be done like so.
Which will display as... Tricky? Try creating some tables yourself, it'll soon become clear to you when you play with the code yourself.

Some clever table tricks

If at this point you cannot work out roughly how to write a table with 4 rows (including header) and 5 columns then I advise you stop reading and come back to this bit later as without that understanding, this will almost certainly confuse you more.

Merging Cells

Using the colspan or rowspan attributes you can cause a cell to grow into the one next to it. Both are by default a value of 1, if you give a <td> tag a colspan value of "2" then it will count as being two cells, it in effect absorbs the one next to it (so you also need to remove the now surplus <td>/<th> tag). It's probably best shown by example Shows as As can be seen, the Wide and Tall cells are wide and tall. Again, it's something you just need to mess around with and get the hang of, there's only so much that words can teach you.

You can combine colspan and rowspan together to make a cell both taller and wider at the same time. You can also use the colspan and rowspan attributes in <th> tags just as you can in <td> tags.

When not to use tables

Some bright spark came up with a very cunning use for tables, you can use them to layout a page in a manner similar to this one. You can get a nice menu-bar on the side with the main page content not running into it, spaced as you wish. However, there are problems with doing this.

• It's very easy to get wrong if you have a complicated table
• If you use Tables inside the page in addition to a table for layout it can cause problems
• A table cell only displays when all the content inside it is loaded, normally a page will display as it loads
• Partially sighted users have a very hard time reading the page with tables
• Maintaining the page is very hard

Later when you learn how to style pages with pretty colours (or like my sister, just pink and nothing else) you will be able to learn how to create page layouts that suffer none of the problems of table based layouts.