Tables 2 HTML Tutorials

Free HTML Tutorials • CSS • Popups tutorial • Frames Tutorials • Forms Tutorials • Beginners HTML Tutorials • Advanced HTML Tutorials • JavaScripts • Free Web Page Tutorials • Free Downloads

	Intermediate Section
TABLES 2 - HEADINGS & SIZING

TABLE HEADERS

It's quite OK to use the <TD> tags throughout your table even for row or column headers, but there is another tag you can use. It is the <TH> or Table Header tag. Why bother, you ask? Well, the <TH> tag will give you automatic bold and will be centred in the cell. Here's an example:

MY ADDRESS BOOK
Name	Address	Phone No	Email
Leonard Cappa	14 Cinerama Dr, Waverley Hills	5555 4321	lecap@etastic.com
Julio Ribbets	2 Hopping Lane, Frog Hollow	4444 4132	tadpole@wildpond.com
Kylee Minnow	88 Pond Place, Seaton	3333 1234	tiddler@lakeside.com.uk

As you can see, the headings are in bold and centred in their cells, while the name and address entries are left aligned - the default. I have used the <TR BGCOLOR> tag to change the row colours and the <COLSPAN> tag which you will come to next. Here is the code:

If you want your entire table text to be bold and centred, you can use the <TH> tags throughout. If you want your text to be centred but NOT bold you can use the ALIGN commands as in the previous lesson.

SPANNING MULtipLE ROWS AND COLUMNS

As seen above (in red), there is more to add to table commands. Two more commands you can use are COLSPAN and ROWSPAN.

• COLSPAN=" " Defines the number of HORIZONTAL columns the cell takes up. The number of columns to be spanned goes inside the quote marks.

As an illustration I will use part of a table you may recall from an earlier lesson. In this, the header "COLOUR CODES" is in a cell that spans three columns.

COLOUR CODES
BLACK=#000000	AQUA=#00FFFF	YELLOW=#FFFF00
GRAY=#808080	BLUE=#0000FF	LIME=#00FF00

Here is the code for the above table.

• ROWSPAN=" " Defines the number of VERTICAL rows the cell spans or crosses. The number of rows to be spanned goes inside the quote marks.

Now let's imagine you have a tall image and you want it to span two rows. (The next lesson will cover putting images into cells, and lots more interesting stuff.)

	Despite what has been said, a rose by any other name
	would probably smell just as sweet

This is the same principle as we used for COLSPAN above. This time we used the rowspan command in the table cell and we set ROWSPAN="2" as the cell with the picture takes up 2 table rows. (You can also put in the height and width attributes for the image.) Here is the code:

TABLE WIDTH

You will have noticed that some tables spread across the page more than others. This can be defined using the WIDTH=" " command. You can define the width in pixels or as a percentage of the page. I prefer to use percentage because of the huge variety in monitor sizes and screen resolutions. By using a percentage the table will usually have the same proportions no matter what the monitor or screen resolution. Here are a few examples:

Here is the result:

A table

with a width

set at 500 pixels

And here is another table with the width expressed as a percentage. Just replace "WIDTH=500" with whatever percentage of the page you want. In this case it is 75%:

A table

with a width

set at 75%

And with a width of 95%.

A table

with a width

set at 95%

NOTE: If you are putting the text, etc of a whole web page inside a table you will need to allow for any additional tables you place within that table. For example, if your web page is in a table with a width of 90% and you want your inner table to take up the entire width, you would specify the width as 100%. Be sure to close the inner or nested table with the usual </TABLE>. And use COMMENT tags to keep track of which table you are in.

ADJUSTING COLUMN WIDTHS

The other thing you can do is to assign each column or row a percentage of the whole. In this case I have assigned a width of 20% to the first column, 35% to the second column and 45% to the third column.

Here is the code:

Note I have put a   (non-breaking space) between <TD WIDTH=20% BGCOLOR=#0000FF> and </TD>. If you don't put something it just won't work properly. Normally you would be putting text or images, but for plain colours like this, use a  .

In any table, the total percentage must come to 100%, of course. You don't need to specify the third percentage as the browser will assign it automatically. For instance, in a two column table, if I assign a percentage of 30% to the first column, the second will be - you guessed it - 70%. Here's an example of that, this time without a border ( <BORDER=0> ) :

The code this time:

You can add <BR> or <P> after the   if you want it deeper if you just want to create an effect (as I did here).

Next: Tables 3 - Text, Colour, Images & Links

Intermediate Index