"Imagination is more important than knowledge.
Knowledge is limited. Imagination encircles the world."
Albert Einstein

Formatting using tables

Written and HTML encoded by :)Ali

Introduction

The basic table structure

Borders

<tr></tr>, <th></th> and <td></td> tags

Width attributes

Table width
Cell width

Introduction

It's useful sometimes to be able to arrange text on the page a bit more elaborately. I do this using tables, which don't always need to have visible edges.

A table starts with the
<table> tag, and ends with a
</table>, then you need to code for each row by
<tr>
and each cell by
<td>

Remember that tables start being built from the top left hand corner, across the colums of the first row, then to the second row, across the colums of the second row.... and so on.

The basic table structure

The HTML for the basic table structure is like this:

<table border=1>
<tr><th colspan=3> Header Row</th></tr>
<td>row 1 col 1</td>
<td>row 1 col 2</td>
<td>row 1 col 3</td>
</tr>
<tr>
<td>row 2 col 1</td>
<td>row 2 col 2</td>
<td>row 2 col 3</td>
</tr>
<tr>
<td>row 3 col 1</td>
<td>row 3 col 2</td>
<td>row 3 col 3</td>
</tr>
</table>

Header Row

row 1 col 1 row 1 col 2 row 1 col 3

row 2 col 1 row 2 col 2 row 2 col 3

row 3 col 1 row 3 col 2 row 3 col 3

Borders

The border attribute in the <table> tag gives grid lines around the table. You can make these lines thicker by increasing the border= number or you can make the gridlines disappear altogether by using border=0. These "invisible" tables are very useful when you want to position graphics and text precisely on a page - have a look at the source code on any of the InterLink pages to see what I mean!

<tr></tr>, <th></th> and <td></td> tags

Note how each row is defined by Table Row tags <tr></tr> and individual cells are defined by Table Data tags <td></td>. The HTML in the first row - the Table Header tags <th></th> work in exactly the same way as the <td></td> tags except that any text inside is automatically made bold and all items are centered.

Each <td></td> tag can contain any other type of HTML tag - headers, styled text, coloured text, hypertext links, graphics etc. Within this tag you can also use several attributes to control the alignment of items in a single cell:

Horizontal Alignment Vertical Alignment

<td align=left> aligns all elements to the left side of the cell (this is the default setting) <td valign=top> aligns all elements to the top of the cell

<td align=right> aligns all elements to the right side of the cell <td valign=bottom> aligns all elements to the bottom of the cell

<td align=center> aligns all elements to the centre of the cell <td valign=middle> aligns all elements to the middle of the cell (this is the default setting)

Horizontal Alignment	Vertical Alignment
<td align=left> aligns all elements to the left side of the cell (this is the default setting)	<td valign=top> aligns all elements to the top of the cell
<td align=right> aligns all elements to the right side of the cell	<td valign=bottom> aligns all elements to the bottom of the cell
<td align=center> aligns all elements to the centre of the cell	<td valign=middle> aligns all elements to the middle of the cell (this is the default setting)

You can combine these attributes. For example:

This HTML would produce a cell where the items within it are aligned towards the bottom left hand corner.

Width attributes

Table width

There are lots of other things you can do with tables once you get the hang of them. For a start you can define how much of the page they take up. A table like this one:

Header Row

row 1 col 1 row 1 col 2 row 1 col 3

row 2 col 1 row 2 col 2 row 2 col 3

row 3 col 1 row 3 col 2 row 3 col 3

Header Row
row 1 col 1	row 1 col 2	row 1 col 3
row 2 col 1	row 2 col 2	row 2 col 3
row 3 col 1	row 3 col 2	row 3 col 3

normally takes up as much space across the page as it needs to.

By adding a width specification into the <table> tag like this: <table width="100%"> you can get it to stretch right across the page:

Header Row

row 1 col 1 row 1 col 2 row 1 col 3

row 2 col 1 row 2 col 2 row 2 col 3

row 3 col 1 row 3 col 2 row 3 col 3

Header Row
row 1 col 1	row 1 col 2	row 1 col 3
row 2 col 1	row 2 col 2	row 2 col 3
row 3 col 1	row 3 col 2	row 3 col 3

A tag of <table width="50%"> would allow the table to take up 50% of the page width, and so on.

You can also use an "absolute" tag, eg <table width="250">, which means it is 250 pixels wide, which looks like.......

this!

Cell width

You can use the <width="X%"> and <width="X"> tags inside the <td> tag too, which allows you to decide how wide each individual cell or column will be. This table.......

<table border=1>
<tr><th colspan=3> Header Row</th></tr>
<td width="50%">row 1 col 1</td>
<td>row 1 col 2</td>
<td>row 1 col 3</td>
</tr>
<tr>
<td>row 2 col 1</td>
<td>row 2 col 2</td>
<td>row 2 col 3</td>
</tr>
<tr>
<td>row 3 col 1</td>
<td>row 3 col 2</td>
<td>row 3 col 3</td>
</tr>
</table>

Header Row

row 1 col 1 row 1 col 2 row 1 col 3

row 2 col 1 row 2 col 2 row 2 col 3

row 3 col 1 row 3 col 2 row 3 col 3

.....was created by adding just one width attribute of 50% into one cell - the whole of that column then automatically becomes the same width.

Cell Padding

Unless you tell it otherwise, text in a cell generally squashes itself up against the cell border

like this

which doesn't look very elegant.

You can make it look much better by using the <table cellpadding=X> tag:

<table border=1 cellpadding=10>
<tr>
<td>like this</td>
</tr>
</table>

like this

.... which puts a layer of "padding" (blank space) around the text in each cell - in this case it's 10 pixels wide, but you can change the number up or down to get more or less blank space.

Cell Spacing

Cell spacing widens the borders AND gridlines of your table (whereas the <table border=X> tag only widens the border) like this:

<table border=1 cellspacing=10>
<tr>
<td>like this,</td>
</tr>
</table>
<table border=1 cellspacing=10>
<tr>
<td>this,</td>
</tr>
</table>
<table border=1 cellspacing=10>
<tr>
<td>this</td>
</tr>
</table>
<table border=1 cellspacing=10>
<tr>
<td>and this</td>
</tr>
</table>
This is using the <cellspacing=10> tag:

like this, this,

this and this

compare this with the <table border=10> tag!

like this, this,

this and this

With the <table border=X>, <table cellpadding=X> and <table cellspacing=X> tags, X can have any value you like. The higher the number, the wider the border, padding or spacing.

Merging cells

You may have noticed the tag <th colspan=3> in the Example row at the beginning of the table. This tag allows you to create tables where rows or columns can be merged. Like this:

<table border=1 cellpadding=5>
<tr>
<td colspan=3 align=center>merging three columns</td>
</tr>
<tr>
<td rowspan=2>merging two rows</td>
<td>one cell</td>
<td>one cell</td>
</tr>
<tr>
<td>one cell</td>
<td>one cell</td>
</tr>
</table>

merging three columns

merging two rows one cell one cell

one cell one cell

Tables within tables

Once you've REALLY got to grips with tables, you can even start putting tables within tables. Like this:

<table border=1 cellpadding=5>
<tr>
<td>
<table border=1 cellpadding=5>
<tr>
<td>here's</td>
<td>a</td>
</tr>
<tr>
<td>little</td>
<td>table</td>
</tr>
</table>
<p>
Inside a bigger table!</td>
</tr>
</table>

here's a

little table

Inside a bigger table!

Now you've got it sussed! Just remember that you need to put the little table INSIDE the <td></td> tags of the bigger table - and don't forget to close all your tags!