TABLES



Starting your Table

Tables are very useful functions in HTML. They allow for the convenient presentation of images and text in an organised fassion without too much hassle. Here, I'm going to teach you everything that you will need to know for now about tables, which will make this lesson the longest so far, as they are extremely versatile.

When you begin and end a table, you will always need to use:

<table> and </table>

The TABLE tag is a tag that has a lot of optional parameters, which we shall look at now:

A possible table tag, therefore, could look something like this:

<table width="50%" height="500" border=1 cellpadding=5 cellspacing=5 align=left valign=top background="table_back.gif" bgcolor="#ffffff" text="#000000" link="#ff0000" vlink="#00ff00" alink="0000ff">

....Table Contents ....

</table>

Remember, of course, that all of these parameters are optional, and if you leave any out, then they will return to a default value, whilst the colours of text and links and so on will remain as defined in the body tag.


Table Rows and Table Data

Now that you can define your table environment, it is time to learn how to put things into your table. The two tag pairs that you need to know are:

<tr> and </tr> - Table Row

<td> and </td> - Table Data

The way that these tags, and indeed a table, works, is that you define a table row, and then you divide that row up into cells, thus:

<table>
	<tr>
		<td>
		Contents of cell 1
		</td>
		<td>
		Contents of cell 2
		</td>
	</tr>
</table>

And of course, you can define as many rows and cells as you want to.

Each one of these tags has many parameters that can be set. Here are the parameters for <tr>:

All parameters specified in this section will only be in effect throughout that particular table row. As soon as you end the row, then the values will all revert to what they were before.

So a possible table row tag might look like this:

<tr width=50% height="200" align=right valign=middle>

You won't find that you use many parameters in the TR section, but rather, that you'll put most of them in the TD section. Here are the optional functions for that:

This means that you may find a TD tag that looks something like this:

<td width=50% height="200" align=center valign=bottom rowspan=2 colspan=2 nowrap>


Table Headers

The final tag that you need to know for creating tables, and actually a tag that you may not use much is:

<th> and </th>

This stands for Table Header, and acts in exactly the same way as table division (so see above for the parameters that can be used), except that the default for the alignment is "center" rather than "left", and the text is automatically bold, so does not need to have a bold tag inside it.


Table Layout

To end this section, we need now only understand the way in which tables must be laid out.

Whenever building a table, you must perform it in the following order, before you can enter any contents:

<table>
	<tr>
		<td> or <th>

This is the point at which you can enter your first text. Then you can declare as many table divisions as you want (remembering that they've all got to fit on the page, side by side), before moving onto your next table row. You must make sure, though, that you do things in the right order. A good way to keep track of where you are in a table is to indent each section as you go, so that you can see whereabouts in the table you are:

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

So you can probably see that if I were to enter the right parameters, then the above code would produce a 2 x 2 table grid.

Tables can be interpreted strangely by browsers, so it's always a good idea to play around with them until you get it right. Be aware that different browsers will have the table looking different to other browsers. It may also be necessary to specify the default values just to make sure that the table appears correctly.





Now have a go at the exercise for this section.

Once you have done that, move on to the next tutorial page.


[Index] [Introduction to HTML] [Building an HTML Document Template] [Basic Text Formatting] [Image Includes] [Anchor Tags] [Tables] [Advanced Text Formatting, plus Other Tags] [Lists] [Client-Side Image Maps] [Very Basic JavaScript] [Frames] [Forms] [Conclusion] [Reference List] [Glossary of Terms]

Return to Front Page