Creating Tables

Months of the Year
January	February	March	April
May	June	July	August
September	October	November	December

That groovy looking thing above is a table created entirely using HTML tags.

Want to know how to make one? Read on...

Basic tables are quite simple to create, as long as you remember a few basic tags:

At the beginning of the table, insert:

<table>
Before each piece of data (ie. the words to go in each box of the table), insert:
<td>
To start a new row in the table, insert:
<tr>
At the end, remember to insert:
</td> </tr> </table>
to show that you have finished creating the table.

This will create a basic table, without borders, like this:

January	February	March
April	May	June

There are some other tags you can use to make your table more attractive.
If you want a caption (or title) to be above the table (like in the example at the top), insert:

<caption>insert caption here </caption>
right after the point where you've inserted <table>

You can create borders in the table with the following tag:

where:
Table border will determine the width of the border.
Cellspacing will determine the size of the space between the words in the table.
Cellpadding will determine the space between the words and the borders.

In each of these cases, insert a number instead of #.
The larger the number, the larger the border/spaces.

OK, so you now know how to make a pretty groovy table.
You want more? Well, here it is..

Sometimes it's useful to create a row of data that spans the entire width of the table. You could use this to create a table heading that is within the actual table, like this:

Months of the year
January	February	March
April	May	June

Pretty cool, huh?

To create this heading, insert the following after the <table>:

<td colspan="number of columns you want to span>insert heading here<tr>

Then just continue as normal.

Note: there are two things you must insert in this tag (marked in italics). Firstly, insert the number of columns you want to span (ie. how many columns wide is the table?). Secondly, insert the heading.

Note: I've centered the text in the heading box. You can do this by following the instruction given in the "Basics" section of this site.

This can also work if you would like to create the reverse, with a long column in your table. In this case, follow the above method, but insert "rowspan" instead of "colspan". It's that easy!

Happy table making!

LinkExchange Member

Free Home Pages at GeoCities

This page hosted by Get your own Free Home Page