Format Table Elements The Basic Table More Data Cells More Rows Header Cells

Attributes Table Width TD and TH Width Table Border Cellpadding Cellspacing

Tables begin and end with the <table> and </table> tags. All table information must appear between these tags.

• A table can have a visible or invisible border, and can contain captions, header cells and data cells. These are formed into rows and columns. The cells can contain text, images, links, or even another table!
• A table with no border is a very useful and helpful tool which is often used for page layout purposes. I use lots of borderless tables on my pages ... in fact, this whole page is constructed within a table!
• Each element of a table can have its own set of attributes. It is the attributes that can make table coding look complicated.

<TR> ... a Table Row
The <tr> tag designates a row within your table.
All table cells must be placed within a table row.
Always close your table row with the </tr> tag.

<TD> ... a Table Data Cell
The data cell can contain anything! Text, images, links, ... even another table!
All HTML tags work within your data cell. These are the "body" of your table.
Always close with the </td> tag.

<TH> ... a Table Header Cell
Virtually the same as <td> Use the header cell to put headings in your tables.
It will appear in bold type and the data will be centered.
Always close with the </th> tag.

<table>

opens the table

<tr>

begins a row in the table

<td>

opens a data cell

Enter your data here... text, links, images, etc.

</td>

closes the data cell

</tr>

closes the table row

</table>

closes the table

<table border=1>
<tr>
<td>
data goes here
</td>
</tr>
</table>

Ah.....that's better! Now you will note several things: You can use all your HTML tags within the table. The border fits snugly around the widest parts of the table. The text is aligned to the left of the table. (Except this part, because I have used an ordered list here.) A table automatically defaults to the left of your page unless you specify otherwise. The border is expressed in number of pixels, ranging from 0 to ... well ... I'm not sure ... but 25 gives you a really w-i-d-e border!

In the following example, I have placed an image in the table instead of text.

The tag is < table border=25>

It's easy to have extra data cells.
You just repeat the <td> data </td> tags as many times as you wish.

<table border=1>
<tr>
<td>Kangaroo</td>
<td>Goanna</td>
<td>Emu</td>
</tr>
</table>

Note how the vertical dividers have appeared! They are prompted when you start your new cell. The size of the cell is determined by the size of what you put in it. We will deal with changing your cell size later.

To create another row in your table, close your first table row using </tr> and then begin your next table row!
Enter each row of data cells (either <td> or <th> cells), one by one, working from left to right.

<table border=1>
<tr>
<td>Kangaroo</td>
<td>Frill-necked lizard</td>
<td>Emu</td>
</tr>
<tr>
<td>Wombat</td>
<td>Crocodile</td>
<td>Kookaburra</td>
</tr>
<tr>
<td>Koala</td>
<td></td>
<td>Jabiru</td>
</tr>
</table>

Note how the horizontal dividers have appeared! They are prompted by the <tr> tag.

You can even have a cell with no data in it. The table will still form around it.

TH

As mentioned above, <th> is virtually the same as <td>. It will appear in bold type and the data will be centered. So, lets add some headers to our table.

<table border=5>
<tr>
<th>Mammals</th>
<th>Reptiles</th>
<th>Birds</th>
</tr>
<tr>
<td>Kangaroo</td>
<td>Frill-necked lizard</td>
<td>Emu</td>
</tr>
<tr>
<td>Wombat</td>
<td>Crocodile</td>
<td>Kookaburra</td>
</tr>
</table>

Well ... we have made some tables, but they don't look too wonderful! ... They seem out of balance, the cells are different sizes, and the borders fit very closely to the edges of the data.

One way to improve our tables, is to make use of the table element attributes. You can use lots of different attributes in different combinations.

In all of the following examples, we will work on the table above. I will only show you the relevant section of code.

Up to now, our tables have been as wide as the data stored within them.
You can control the width of your table with the width attribute.
Width is expressed as "%" of the page width, or in pixels.

<table border=5 width="65%">

<table border=5 width="100%">

<table border=5 width="30%">

You can also set the width of each individual column of data cells, so that it is no longer determined by the width of the widest data in the cell. The width is defined by the width attribute. It is expressed in "%" of the table width, or in pixels.

So, let's give our table cells of the same width.

NOTE: You only need to specify the width for each cell in the first row only. Because tables form with their cells in neat columns, the subsequent data cells will take the preset widths of the first row of data cells.

<table border=5 width="55%">
<tr>
<th width="33%">Mammals</th>
<th width="33"%>Reptiles</th>
<th width="33%">Birds</th>
<tr>... etc ... etc ... etc

NOTE: If your text is wider than your preset limits, then it will form another line of text within that cell, and will also affect that entire row of cells.

And this table has uneven sized set width cells.

<table border=5 width="100%">
<tr>
<th width="15%">Mammals</th>
<th width="50%">Reptiles</th>
<th width="35%">Birds</th>
<tr>... etc ... etc ... etc

We have discussed border previously, but here is another example.
You will note that when you have a wider border, the internal lines remain the same narrow width. Border is expressed in pixels.

A table with no border is a very useful and helpful tool which is often used for page layout purposes. I use lots of borderless tables on my pages. For example, all of these tutorial pages are created within a table, and the bullet index list at the top of this page is another table!

<table border=5 width="65%">

<table border=25 width="65%">

This creates extra space between the edge of your data and the table borders. Cellpadding is expressed in pixels.

<table border=10 cellpadding=10>

<table border=15 cellpadding=30>

This alters the size of the space between the data cells - the width of the cell walls. Cellspacing is expressed in pixels.

<table border=10 cellpadding=5 cellspacing=10>

<table border=20 cellspacing=20 cellpadding=20>