Any comments: e-mail me, feedback or show your appreciation

Adding Colour and Graphics to Tables

This section describes how to add colour and graphics to tables within your HTML documents. It assumes you already know the basics of writing tables with HTML. Coloured tables are currently only supported by MS Internet Explorer 3 and Netscape 3. Graphics in tables are currently only supported by MS Internet Explorer 3.

Adding Colour

Colours can be included in tables by using adding various attributes to the <table>, <tr>, <td> and <th> elements. These attributes are bgcolour, bordercolor, bordercolorlight and bordercolordark and contol the colours of the table background and table borders. Use the <font> or <body> tags to colour the text itself. For table colouring to work the border attribute must also be present in the <table> tag. All colours must expressed in the conventional way, as either RGB hextriplets or colournames.

You can set a colour scheme for the whole table by placing the attributes in the <table> tags. You can overide this colour scheme for a particular row by placing attribute(s) in the <tr> tag. These colours can be overridden further by placing more attributes in the <td> or <th> tags.

bgcolor="#hextriplet"|"colourname"
Used to specify the background colour of the cell(s).
bordercolor="#hextriplet"|"colourname"
MS Internet Explorer 3 only. Used to specify border colour of the cell(s).
bordercolorlight="#hextriplet"|"colourname"
MS Internet Explorer 3 only. You may have noticed that table borders are displayed in 3D. To do this they use a light and a dark colour. You can use this attribute to set the light colour used to create the 3D effect in the cell(s).
bordercolordark="#hextriplet"|"colourname"
MS Internet Explorer 3 only. Used to set the dark colour that creates the 3D effect in the cell(s).

<TABLE BORDER BGCOLOR=Silver BORDERCOLOR=Black WIDTH=50%>
  <TR>
    <TD>Cell One</TD>
    <TD>Cell Two</TD>
  </TR>
  <TR BORDERCOLOR=Red BGCOLOR=Green>
    <TD>Cell Three</TD>
    <TD>Cell Four</TD>
  </TR>
  <TR BORDERCOLOR=Red BGCOLOR=Green>
    <TD BORDERCOLOR=Yellow>Cell Five</TD>
    <TD BGCOLOR=White>Cell Six</TD>
  </TR>
  <TR BORDERCOLOR=Orange BORDERCOLORDARK=Blue BORDERCOLORLIGHT=White>
    <TD>Cell Seven</TD>
    <TD>Cell Eight</TD>
  </TR>
</TABLE>

Cell One	Cell Two
Cell Three	Cell Four
Cell Five	Cell Six
Cell Seven	Cell Eight

Adding Graphics

MS Internet Explorer 3.x upwards only. You can add a graphic as a background to a table. This is done through use of the background attribute (exactly as for the <body> element) of the <table> element. The graphic will be cropped and/or tiled to fit in the table as specified. You can also combine the afore-mentioned colour attributes with a background graphic.

<TABLE BACKGROUND="graphics/beers.gif">
  <TR ALIGN="CENTER">
    <TD BGCOLOR="olive">Beer!</TD>
    <TD></TD>
    <TD BGCOLOR="olive">Beer!</TD>
  </TR>
  <TR>
    <TD BGCOLOR="olive">We want more beer!</TD>
    <TD></TD>
    <TD></TD>
  </TR>
  <TR>
    <TD></TD>
    <TD BGCOLOR="olive">All the lads are cheering...</TD>
  </TR>
  <TR>
    <TD></TD>
    <TD></TD>
    <TD BGCOLOR="olive">Get the chuffin' beers in!</TD>
  </TR>
</TABLE>

Beer!		Beer!
We want more beer!
	All the lads are cheering...
		Get the chuffin' beers in!

Sizzling HTML Jalfrezi
©1997 Richard Rutter
`rrutter@woodhill.co.uk`

Maintenance of this page is attempted by Richard Rutter (rrutter@woodhill.co.uk) using the gorgeous HTML Notepad and the wonderful Sizzling HTML Jalfrezi.