Creating Tables

Introduction

It's quite rare that you'll see a website that doesn't use tables of some form in it's layout, often many are hidden or 'invisible' and more and more people are beginning to see the benefits of tabless layouts as tables really are only intended to show tabular data, but it's still something that you really need to learn at least the basics of.

The Tags

The following are the most common tags used within tables:

<table></table> - Creates a new table.
<tr></tr> - Sets off each row inside a table.
<td></td> - Sets off each column inside a table.

And the following attributes which will define the look of the tables:

<table border=#> - Sets the size of the border around table cells.
<table cellspacing=#> - Sets the amount of space between table cells.
<table cellpadding=#> - Sets the distance between a table cells border and it's contents.
<table width=# or %> - Sets the width of a table (in pixels or as a percentage of the page width).
<tr align=?> or <td align=?> - Sets alignment for cells (left, right or center).
<tr valign=?> or <td valign=?> - Sets vertical alignment for cells(top, middle or bottom).
<td colspan=#> - Sets the number of collums for a cell to span.
<td rowspan=#> - Sets the number of rows for a cell to span.
<td nowrap> - Prevents the lines within a cell being broken to fit.

The Basics

Lets have a look at the basic format of creating a table:

<table>
<tr>
 <td></td>
</tr>
</table>

This would give us a table with one column, your content would be placed within the <td></td> tags.

Now if you just added that to a page and don't see anything, the reason is because we didn't define a border, so lets quickly look at the border attribute.

Borders

Basically the size of the border you see around the table is defined using border="x" with x being the size of the border you want to use, example:

<table border="1">
<tr>
 <td>text</td>
</tr>
</table>

This is the table we laid out above but with a border value of 1 added to the opening <table> tag, i've also just added the word 'text' where your content would be to make things easier to see, and this is what it would look like on our page:

text

Lets say we wanted a thicker border, i'll replace border="1" with border="5" and this is what we get:

text

Now there's other values you can define for your tables such as the border colour, the type of border, e.g solid, dotted, dashed but all of these should be set within your stylesheet or within the style tags in the head of your page, and not within the table tags.

There's an exception to this which is the 'frame' element something that basically defines which parts of the table the border is visible on, examples:

Here's our basic table again:

text

And here's the same table using frame="above" inside the <table> tag:

text

Notice that now only the top side of the border is visible, here's some other frame values we can use:

frame="below" - bottom border only
frame="hsides" - top and bottom borders only
frame="vsides" - left and right borders only
frame="lhs" - bottom border only
frame="rhs" - left hand border only
frame="below" - right hand border only

There's also frame="border" (normal all sides) and frame="void" (no border) but you don't often have the need for these as it's two values that are already set by border="x"

That's the very basics of setting the table borders, lets look at two more common values, cellpadding and cellspacing.

Cellpadding

Cellpadding is used to set the distance between the border of a table cell and it's contents, by default if you don't specify a cellpadding value it'll be set as 0

Here's our table again:

text

Now because we didn't set a cellpadding value, it's given 0 by default and the text is right against the sides of the table, so lets set the cellpadding value to 3

<table border="1" cellpadding="3">
<tr>
 <td>text</td>
</tr>
</table>

And here's how it looks:

text

Notice now we have a space between the border and the content, and basically the higher the cellpadding value the larger the space.

Cellspacing

Cellspacing is used to set the distance between table cells, and if we don't give it a value then by default it's set to 1

Here's our table from above, but with the cellspacing value set as 0 so you can see the difference.

<table border="1" cellpadding="3" cellspacing="0">
<tr>
 <td>text</td>
</tr>
</table>

And here's how it looks:

text

When your table only has one column like in this example then unless you want that double border type effect, you'll probally find yourself using cellspacing="0" most of the time, different cellspacings are really more useful when you create tables with multiple collumns or rows, which we'll look at in a now.

Rows and Collumns

As i mentioned above we use <tr></tr> to set of a new row inside a table and <td></td> to set off a new column, here's some examples:

One row, two columns:

<table border="1" cellpadding="3" cellspacing="0">
<tr>
 <td>text</td>
 <td>text</td>
</tr>
</table>

Result:

text

Two rows, one column:

<table border="1" cellpadding="3" cellspacing="0">
<tr>
 <td>text</td>
</tr>
<tr>
 <td>text</td>
</tr>
</table>

Result:

text

One row, four columns:

<table border="1" cellpadding="3" cellspacing="0">
<tr>
 <td>text</td>
 <td>text</td>
 <td>text</td>
 <td>text</td>
</tr>
</table>

Result:

text

And so on.

Sizing

You can use two different methods to set the overal width of your tables, (pixels and percentages)

Both are defined using the width="" value inside your table tag (or within a stylesheet), example:

<table width="100%" border="1">
<tr>
 <td>text</td>
</tr>
</table>

This would create our table 100% of the page width.

The benefit of using percentages instead of pixel values like width="500" etc is that you have to remember that different people use different screen resolutions, so as an example if you were using 1280x1024 and you made a table with the value width="1024" it would span 80% of your screen, but for somebody viewing your page using 800x600 they would need to scroll accross to view the entire table.

So instead if you use width="80%" the table will span the same amout of the screen regardless of which resoloution the viewer is using, making your pages more universal.