How to Create an HTML Table

In the previous lesson, you saw how what the basic HTML tables tags were. Let's now use the HTML Editor to set up a table.

So, with your editor loaded, do the following:

Click here to see the Table Dialogue Box

The default is 2 Rows and 2 columns. (the TD tags are the columns in HTML tables, and the TR tags the rows.)

Click here to see the Table Dialogue Box now

Each of the white text boxes represent your TD tags. Type inside the text boxes, so that you have all four scores displayed. Like this one in the next link:

Click here to see the Table Dialogue Box now

You could go ahead and click the OK button. But click inside the box next to "Extra Table Tags". You should see the following:

The Border tag will obviously add a border around your table. To add a caption to your table, click inside the caption dialogue box. Erase the default text, and type your own. Cell Spacing will extend the walls of each cell; Cell Padding will add some space between the contents and the walls of each cell. The defaults are 2 and 3. But change them to something else, anything you like. We'll save the Cell Colour option till later.

When you're done, click the OK button. The editor will insert the code into your page.

Save your work and view the results in your browser. If you want to centre the table, just highlight the entire table code and click Format > Centre.

But let's look at where the extra tags have gone.

<TABLE Border = 1 CellPadding = 3 CellSpacing = 2>

The Border, CellPadding and Cellspacing attributes have all gone in the first TABLE tag. The Caption tag comes after the TABLE tag, but before the first TR tag. Try experimenting with the Border and Cell Spacing/Padding tags. Change the border size to something like 6 or 7 and see what happens. The BGCOLOR = white part is the HTML Editor inserting the default background colour for all the cells. We'll see how to change this default colour later. For now, let's see what we can do to extend the Table tags.

Table height and Table width

You can change the size of the entire table by adding the Width and Height attributes to the TABLE tag. Like this:

<TABLE WIDTH =300 HEIGHT = 300>

That changes the size of your entire table (the Border, CellSpacing and CellPadding tags have been left out for convenience sake. They are optional, anyway.) If you don't specify a Height and Width for your table, your browser will size the table based on the contents on the cells. The measurement above is in Pixels. A typical monitor size in pixels might be 800 by 600 or 1024 pixels by 768.

A better idea is to specify a table size as a percentage. Like this:

<TABLE WIDTH =100% HEIGHT = 100%>

The figure is the percentage of the screen you wish to take up with your table. The maximum is not 100%. Experiment with figures higher and lower than 100 and see what happens to your table. You can use your editor to add the Width and Height attributes for you. To add a Height and Width using the editor, do the following:

Click here to see the Table Attributes Dialogue Box

Row height and Row width

You can make changes to the Height and Width of not only the entire table, but to each individual cell, or row of cells. Just use your editor again to add the Width and Height attributes to the TR or TD cell.

You can add the Height and Width attributes to individual TD cells, too, but the results are often erratic. If you want one big cell next to smaller cells, the ROWSPAN and COLSPAN tags are used.

Inthe next part, you'll see how to handle rows and columns in your tables.

<-- Back One Page Move on to the Next Part -->

<--Back to the Web Design Contents Page

View all our Home Study Computer Courses