Stay at Home and Learn

Web Design Tutorials

Computer Tutorials List

HTML Tables and Cell Colours

The background colour of the entire table can be changed. To change the colour of the entire table, just add the BGCOLOR tag to the TABLE tag. Like this:

<TABLE BGCOLOR = Lime>

Because the HTML Editor adds a default colour of white to each individual cell, however, these would have to be deleted from the TD tag to see the full effect.

You can add a splash of colour to individual cells. The BGCOLOR attribute is just added to the TD tag whose colour you want to change. Like this:

<TD BGCOLOR = "Yellow">Arsenal</TD>

Much easier is to use the HTML editor to add the colour to cells for you.

Create a new table with two rows and two columns
The Table dialogue box will look like this:

Set up a new table

Click inside the box next to "Extra Table Tags"
Extra Table tag options will appear:

Extra Table tags

You may, at this point, want to delete any text or numbers from the text boxes and your own (or even leave them blank)
Click the black down-pointing arrow of the Cell Colour box to see a list of colour options. Select one of them:

Drop Down box of colours

Next, click inside one of your text boxes
The background colour will change
Select another colour from the drop-down box, and click another text box
Continue until all four text boxes are coloured:

Bacground Cells all coloured

Finally, click the OK button

Save your work, and view the results in a browser. OK, it might look awful, but it does demonstrate how individual cells can have their colours changed.

If you want to use a colour other than those in the drop down box, highlight the colour you want to change. From the menu bar, click on Format > Body Colour. From the colour dialogue box that pops up, click a colour that takes your fancy.

In the next part, we'll take a look at how to add images to table cells.

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

<--Back to the Web Design Contents Page

View all our Home Study Computer Courses