Tables 4 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 4 - COLOURED LINES & OUTLINES

COLOURED LINES

A few lessons back we looked at horizontal lines (<HR>) and I mentioned that in IE the line could be coloured, but not in Netscape. (No, not even in 7.) There are several ways to do a coloured line which will work in either browser.

One very simple way is to use a one pixel gif file, with any TR background colour you want. In this case I have used a red background, like this:

To give you this:

You will find several tiny gif files in the Images download file. You could also use any small suitable graphic, setting the WIDTH to the length you want and the HEIGHT to 1 or 2, like this:

Another quite effective method is to use a one cell table and a horizontal line. It will look like this:

Here is the code:

Other variations - make the line width 90% and the table width, 70%. Use a subtle shade to give emphasis to a piece of text like this:

Please read the agreement before installing the software

Or here it is with no HR line, just a non-breaking space:

You can make the line thicker by using <TD WIDTH=x>, for example, change x to 30 or more for a thick line, or add a couple of <BR>s.

You can also run two or more rows together to give a graduated effect:

There is yet another way to do a coloured HR line. And this leads us neatly to the next section.

OUTLINED TABLES

I call these outlined tables because they have a coloured border. This is achieved by using a background colour for the table and another colour, in this case white, for the content within the <TD> or <TH> section. There are other ways to do this which we will look at in the Advanced section .

*DON'T GET CAUGHT* Make sure your anti-virus definitions are up to date. And add a firewall

Here is the code for the above:

You can play around with the widths and colours to get some interesting effects.

FRAMED TABLES

You can also use a background image to make fake borders around your table, rather like a picture frame. First you need to create a table with three rows. The image you are using will go into the top and bottom rows, with the centre of the middle row reserved for the content. The right and left cells of the middle or content row will also contain the image. Using <COLSPAN> in the top and bottom cells, the image will be seen across the entire table. Use non-breaking spaces,   in "empty" cells.


	This is a representation of a "framed" table. The image you are using will go into the top and bottom rows, with the centre of the middle row reserved for the content. The right and left cells of the middle or content row will also contain the image.

Set a width and height in percentages for the background cells. They don't have to be the same - in this representation, the top and bottom cells are 4% and the two side cells are 6%. Depending on which browser you are using (and which version of it) you may need to play around with the percentages to get it looking even.

The other thing to add in the table definition is CELLSPACING=0, otherwise you will end up with a gap between the top and bottom. You can also use CELLSPACING=X to vary the effect in the centre section. You can even use 2, 3 or 4 different images for a way out effect, but I don't recommend it.

Here is an example of a framed table using a background image. It is called "bgtable.jpg" and is included in the download files. You can use any image but try to use one with no obvious edges so it will seem to flow in an apparently seamless way.


	This is an example of a "framed" table. The image you are using will go into the top and bottom rows, with the centre of the middle row reserved for the content. The right and left cells of the middle or content row will also contain the image.

I am not giving the code here. Once again you can figure it out as an exercise. If you are desperate, just ask for help.

Next: Tables 5 - Nesting Tables

Intermediate Index