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:
- width="x", height="y" - You've seen this before in relation to images, and here it does the same thing: Predefines the size of the table. If you don't define the size of a table, it will auto-fit itself around the contents. The difference between this and the images version is that this can be declared either in pixels (like the image size), or in percentages of size of the page. If you define in pixels, then the table will always be the same size, whereas percentages keep the table versatile. To distinguish between these, pixels are just written as a number (width="100"), whilst percentages have a % sign after them (width="80%")
- cellpadding=* - This is the border that the browser places around the inside of all of the cells that you have in the table (we'll come onto defining those cells in a minute). So, for example, if you had a table with a block of text in it, then the cellpadding would cause there to be a gap of * number of pixels between the edge of the text, and the edge of the cell.
- cellspacing=* - This puts * number of pixels in between each cell of the table, rather than inside each cell of the table.
- border=* - This allows you to define, in pixels, the border around your table. If you define it as 0, then your table will have no border. Borders appear as a kind of picture frame around the outside of the table, and dividing up all the cells.
- align=left|center|right - This tells the table that everything inside it is to be aligned to either the left, the right, or the center, in a horizontal manner, depending on which one you declare (eg align=left)
- valign=top|middle|bottom - This tells that table that everything inside is to be vertically aligned to either the top middle or bottom of the table.
- additional attributes - It is also possible to define a background image, background colour, and text and link colours inside a table, by simply putting the information into the table tag, just as you put it inside the body tag.
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 ....
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:
Contents of cell 1
Contents of cell 2
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>:
- width="x" height="y" - You cannot define the width if you've already defined it in the TABLE tag, as one will override the other.
- align=left|center|right - This will override any similar declaration that you may have made in the TABLE tag.
- valign=top|middle|bottom - Again, this will override any declaration made in the TABLE tag.
- additional attributes - Again, you can declare all the background and text and link colours, which will override those declared in the TABLE tag.
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:
- width="x" height="y" - Again, this will override any previous declarations that you've made.
- align=left|center|right - As before
- valign=top|middle|bottom - As before
- rowspan=* - This makes the table division span over two rows. The way that tables work is by making it into a grid, and as such, if you have a row that has an image in it, and has thus wrapped around it to a certain height, it will make the other divisions on that row the same height, which may be too large for your purposes. Rowspan allows you to overcome that problem, by splitting the larger division over two rows. Here * is the integer number of rows that you wish to span.
- colspan=* - This works the same way as rowspan, except that it makes a division span over a certain number of columns in the standard grid.
- nowrap - There are no values assigned to this parameter. It simply prevents the text in the division from wrapping automatically. To effect line breaks, you will need to use the <br> tag.
- Additional Attributes - Again, all backgrounds and text colours can be specified for each individual division.
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>
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.
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:
<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:
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.
[Introduction to HTML]
[Building an HTML Document Template]
[Basic Text Formatting]
[Advanced Text Formatting, plus Other Tags]
[Client-Side Image Maps]
[Glossary of Terms]
Return to Front Page