Quick Jumps

Table Tags


Fun with Tables


Rowspan...Columnspan

Now for the Challenge - Tables!

Tables are used to separate areas of your page. It is advisable to design your page first, work out where you want your tables to be placed and what information goes into them. This whole website is made up of tables. If you had a look at the source page you would see how I have used tables. Let's start off with some simple tables.

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

Table Header Closing Table Header Opening Table Tag Table Row Closing Table Row Table Data Closing Table Data Closing Table Tag

Tags used for Tables

Fruit	Vegetables
oranges apples bananas	potatoes onions pumpkin

The above table uses all the tags listed.I have added a border to the table tag so you can see the table easily. The table is made up of rows and columns. Each row has data cells with information.

This is the coding for the above table.

<table border="3">

<tr><th>Fruit</th><th>Vegetables</th></tr>

<tr><td>oranges<br>apples<br>bananas</td>

<td>potatoes<br>onions<br>pumpkin</td></tr></table>

Having Fun With Tables

The size of the table border can be changed to suit your preferance. Try adjusting your border sizes to see what happens. The bigger the size the wider the border. They can look quite effective.

You can put just about anything into the table data cell; information, pictures, links.

You can either have a background color for the whole table with the bgcolor="?" tag added inside the table tag, or you can change the color of each data cell. Just add the bgcolor tag inside the <td> tag.

Fruit	Vegetables
oranges apples bananas	potatoes onions pumpkin

You would have noticed this table is much wider. I have added width="50%" inside the table tag.

I could place a photo in this data cell.

And then have information in this data cell.

<cellpadding="10">   <cellspacing="5">

Have you noticed that there is now more space around the words, they no longer hug the border. I have done this by adding the cellpadding tag. I have also added the cellspacing tag, that puts a little more room between each data cell. Cellpadding and Cellspacing is defined by pixels and can be added into the table tag.

I made the border black by simply adding bgcolor="black" to the table tag. Then I changed the color of each data cell. Clever!

Rowspan and Columnspan

Rowspan and columnspan are attributes that can be included inside the <td> and <th> tags.

Colspan is used when you want a data cell to span out across the entire width of your table. It is commonly used for a heading. The number of columns you want it to span is included in the tag. Example:

<table border="3" cellpadding="5" width="50%">

<tr><th colspan="4">Palmerston Houses</th></tr>

<tr><td>Roper</td><td>McArthur</td><td>Todd</td><td>Daly</td></tr></table>

Palmerston Houses
Roper	McArthur	Todd	Daly

Rowspan is used when you want to make one column of your table longer than the other columns. Example:

<table border="5" cellpadding="2" width="80%">

<tr><th colspan="4">Plants</th></tr>

<tr><th rowspan="4">These are in My Garden</th>

<th>Prickly</th><th>Shrubs</th><th>Flowers</th></tr>

<tr><td>cacti</td><td>Alamanda</td><td>Hibiscus</td></tr>

<tr><td>cacti</td><td>Alamanda</td><td>Hibiscus</td></tr>

<tr><td>cacti</td><td>Alamanda</td><td>Hibiscus</td></tr> </table>

Plants
These are in My Garden	Prickly	Shrubs	Flowers
	cacti	Alamanda	Hibiscus
	cacti	Alamanda	Hibiscus
	cacti	Alamanda	Hibiscus

---

TOP  BACK   HOME   NEXT

---