Using Background Colors and Images in Tables
Given the wide acceptance of Microsoft's Internet Explorer browser, some of its extensions will certainly be incorporated in the text versions of Netscape's navigator and other browsers. Using colours in tables is one of these features. With it, you can apply a background colour to the entire table or to specific cells.
Applying Color to the Whole Table:-
To apply a background colour to an entire table, just specify the BGCOLOR option in the <TABLE> command. The syntax is:
<TABLE BGCOLOR=color code>
The colour code can be the hexadecimal value, the RGB values, for the colour name. See the next illustration in which a background colour is used for the whole table. The background colour is applied to the background of all the cells in the table.
Here is the source code for Examp13k.htm:
<html>
<head>
<title>Colors in the tables - examp13k</title>
</head>
<body bgcolor="#FFFFFF">
<table>
<tr>
<td>
<table border=5 bgcolor="#008080">
<td>row 1 column 1</td>
<td>row 1 column 2</td>
</tr>
<tr>
<td>row 2 column 1</td>
<td>row 2 column 2</td>
</tr>
The source code is in the Examp13l.htm file:
The source code is in the Examp13m.htm file:
<tr>
<td>row 3 column 1</td>
<td>row 3 column 2</td>
</tr>
</table>
</td>
<td>In this example one colour was applied in the command<br>
Table note that the colour applied is NOT valid<br> for the table caption.<br>
</td>
</tr>
</table>
</body>
</html>
Applying Color to Specific Cells :-
You can apply a specific colour to a cell using the BGCOLOR option within the <TD> command. If the table already has a background colour, the colour is specified in <TD> overlays the general colour. The next example shows that two cells have been coloured in addition to the table background:
<html>
<head>
<title>Colors in the tables - examp13l</title>
</head>
<body bgcolor="#FFFFFF">
<table>
<tr>
<td>
<table border=5 bgcolor="#FF00FF">
<tr>
<td>row 1 column 1</td>
<td>row 1 column 2</td>
</tr>
<tr>
<td>row 2 column 1</td>
<td bgcolor="#FFFF00">row 2 column 2</td>
</tr>
<tr>
<td bgcolor="#00FFFF">row 3 column 1</td>
<td>row 3 column 2</td>
</tr>
</table>
</td>
<td>In this example one colour was applied in the command Table<br>which is valid for all the cells and one specific colour<br> for two cells.
</td>
</tr>
</table>
</body>
</html>
Applying Color to an Entire Row:-
To apply a colour to an entire rows of a table, use the BGCOLOR option in the <TR> command. In the next example, the first row was coloured with cyan, specified with its name instead of its hexadecimal code. Note that it is possible to create several combinations. The table has a green background colour, while the second and the third cells of the first column have their own colours.
<html>
<head>
<title>Colors in the tables - examp13m</title>
</head>
<body bgcolor="#FFFFFF">
<table cellpadding=20>
<tr>
<td>
<table cellpadding=0 cellspacing=0 width=0 border=0 bgcolor="green">
<tr bgcolor="cyan">
<td>row 1 column 1</td>
<td>row 1 column 2</td>
<td>row 1 column 3</td>
</tr>
<tr>
<td bgcolor="FFaa00">row 2 column 1</td> <td>row 2 column 2</td>
<td>row 2 column 3</td>
</tr>
<tr>
<td bgcolor="ddFF00">row 3 column 1</td>
<td>row 3 column 2</td>
<td>row 3 column 3</td>
</tr>
</table>
</td>
<td>
In the example at the side, the bgcolour option in the TR command was used used to apply the same colour.<br>
in all the cells of the first row
</td>
</table>
</body>
</html>
Using CELLSPACING to Highlight Cells:-
When you use a background colour for the table, you can use the CELLSPACING option to highlight the cells individually when applying a colour to them. See the next illustration:
If the value of CELLSPACING is zero, the cell are joined, as in the above example. Note that navigator and explorer have different behaviour. Explorer will show the table's background colour (see the next illustration) while navigator does not.
<html>
<head>
<title>Colors in the tables - examp13n</title>
</head>
<body bgcolor="#FFFFFF">
<table>
<tr>
<td>
<table cellpadding=0 cellspacing=0 width=0 border=0 bgcolor="008080">
<tr>
<td bgcolor="#FFFF00">row 1 column 1</td>
<td bgcolor="FFgg00">row 1 column 2</td>
</tr>
<tr>
<td bgcolor="#FFaa00">row 2 column 1</td>
<td>row 2 column 2</td>
</tr>
<tr>
<td bgcolor="#ddFF00">row 3 column 1</td>
<td bgcolor="#ffFFff">row 3 column 2</td>
</tr>
</table>
</td>
<td>
In the example at the side, the cellspacing=10 option was used <br> to space the cells and the border was omitted. <br>In this way you get a highlight effect <br>for each cell
</td>
</table>
</body>
</html>
Using Background Images in Tables:-
In addition to background colours in tables, Internet Explorer allows the use of background images, in the same way they are used in a whole page. You can add a background image for the tables as a whole by adding the BACKGROUND= image.gif/jpg option to the <TABLE> command. This option causes different effects in Navigator 4 and Explorer 4. In the previous version of Explorer, the image also appeared in the table's caption. Now it appears just in the table. While Explorer uses one image that covers all the cells, Navigator puts one copy of the image in every table cell.
The next illustration shows Internet Explorer:
The background image spread across the caption area when it is specified. The first table in the example below shows the situation. If you are using a very colourful background, choose a text colour and a letter size that allow for good viewing of the text. Note that is specification of a font or of text different from the standard must be done cell by cell with the <FONT> command.
Here is the source code of this example, Examp13p.htm:
<html>
<head>
<title>Colors in the tables - examp13p</title>
</head>
<body>
<font size="5" color="#ffffff">
<table background="pichu.gif" border=5 bgcolor="#FFFFFF">
<caption>The background image appears in the caption</caption>
<tr>
<td><font size="5" color="#ffffff">row 1</td>
<td><font size="5" color="#ffffff">row 1</td>
<td><font size="5" color="#ffffff">row 1</td>
<td><font size="5" color="#ffffff">row 1</td>
</tr>
<tr>
<td><font size="5" color="#ffffff">row 2</td>
<td><font size="5" color="#ffffff">row 2</td>
<td><font size="5" color="#ffffff">row 2</td>
<td><font size="5" color="#ffffff">row 2</td>
</tr>
<tr>
<td><font size="5" color="#ffffff">row 3</td>
<td><font size="5" color="#ffffff">row 3</td>
<td><font size="5" color="#ffffff">row 3</td>
<td><font size="5" color="#ffffff">row 3</td>
</tr>
<tr>
<td><font size="5" color="#ffffff">row 4</td>
<td><font size="5" color="#ffffff">row 4</td>
<td><font size="5" color="#ffffff">row 4</td>
<td><font size="5" color="#ffffff">row 4</td>
</tr>
</table>
<hr>
<table background="pichu.gif" border=5 bgcolor="#FFFFFF">
<tr>
<td><font size="5" color="#ffffff">row 1</td>
<td><font size="5" color="#ffffff">row 1</td>
<td><font size="5" color="#ffffff">row 1</td>
<td><font size="5" color="#ffffff">row 1</td>
</tr>
<tr>
<td><font size="5" color="#ffffff">row 2</td>
<td><font size="5" color="#ffffff">row 2</td>
<td><font size="5" color="#ffffff">row 2</td>
<td><font size="5" color="#ffffff">row 2</td>
</tr>
<tr>
<td><font size="5" color="#ffffff">row 3</td>
<td><font size="5" color="#ffffff">row 3</td>
<td><font size="5" color="#ffffff">row 3</td>
<td><font size="5" color="#ffffff">row 3</td>
</tr>
<tr>
<td><font size="5" color="#ffffff">row 4</td>
<td><font size="5" color="#ffffff">row 4</td>
<td><font size="5" color="#ffffff">row 4</td>
<td><font size="5" color="#ffffff">row 4</td>
</tr>
</table>
</body>
</html>
Here is the result in Navigator:
Using individual Background Images for the Whole Table:
As with the specification of individual colour for cells, you can apply a background for each cell of the table independently of the overall table background. In the next example, a second image was specified as background for the cells of the second, third, and fourth columns. When adjacent cells use the same background, the browser adjust the background so that the image extends rather than using just a small portion.
The second table is identical to the first, except it uses the CELLSPACING attribute to separate the cells. Note that the image is sectioned.
Below is the source code of Examp13q.htm:
<html>
<head>
<title>Tables with background images - examp13q</title>
</head>
<body>
<font size="5" color="#ffffff">
<table background="pichu.gif" cellspacing=0 border=5 bgcolor="#FFFFFF">
<tr>
<td background="fundo.gif><font size="5">row 1</td>
<td><font size="5" color="#ffffff">row 1</td>
<td><font size="5" color="#ffffff">row 1</td>
<td><font size="5" color="#ffffff">row 1</td>
</tr>
<tr>
<td background="fundo.gif><font size="5">row 2</td>
<td><font size="5" color="#ffffff">row 2</td>
<td><font size="5" color="#ffffff">row 2</td>
<td><font size="5" color="#ffffff">row 2</td>
</tr>
<tr>
<td background="fundo.gif><font size="5">row 3</td>
<td><font size="5" color="#ffffff">row 3</td>
<td><font size="5" color="#ffffff">row 3</td>
<td><font size="5" color="#ffffff">row 3</td>
</tr>
<tr>
<td background="fundo.gif><font size="5">row 4</td>
<td><font size="5" color="#ffffff">row 4</td>
<td><font size="5" color="#ffffff">row 4</td>
<td><font size="5" color="#ffffff">row 4</td>
</tr>
</table>
<hr>
<font size="5" color="#ffffff">
<table background="pichu.gif" cellspacing=5 border=5 bgcolor="#FFFFFF">
<tr>
<td background="fundo.gif><font size="5">row 1</td>
<td><font size="5" color="#ffffff">row 1</td>
<td><font size="5" color="#ffffff">row 1</td>
<td><font size="5" color="#ffffff">row 1</td>
</tr>
<tr>
<td background="fundo.gif><font size="5">row 2</td>
<td><font size="5" color="#ffffff">row 2</td>
<td><font size="5" color="#ffffff">row 2</td>
<td><font size="5" color="#ffffff">row 2</td>
</tr>
<tr>
<td background="fundo.gif><font size="5">row 3</td>
<td><font size="5" color="#ffffff">row 3</td>
<td><font size="5" color="#ffffff">row 3</td>
<td><font size="5" color="#ffffff">row 3</td>
</tr>
<tr>
<td background="fundo.gif><font size="5">row 4</td>
<td><font size="5" color="#ffffff">row 4</td>
<td><font size="5" color="#ffffff">row 4</td>
<td><font size="5" color="#ffffff">row 4</td>
</tr>
</table>
<hr>
</body>
</html>
Changing Border Color:-
When the BORDER option is used in the <TABLE> command, two types of borders are created: one around the table and another around each cell. As standard, the browser uses the colours white and grey to create a three dimensional effect in the border. Internet Explorer allows changing the two colours or using just one colours for the whole border, eliminating the 3D effect.
There are three options to change the colours:
Bordercolorlight:- Changes the light colour used on the left side and top of the table.
Bordercolordark:- Changes the dark colour used on the right side and bottom of the table.
Bordercolor:- Changes the colour of the four borders of the table.
Note that for the borders of the cells, the browser inverts the colours, leaving the darkest on the top left corner and the lightest on the bottom right corner. The next figure shows three example of changing the border colour. In the first example, the two border colours are changed. In the second, only the light colour is changed. The third shows that only one colour is applied to all the borders. Note that Netscape navigator has a different behaviour.
<html>
<head>
<title>Colors in the tables - examp13t</title>
</head>
<body bgcolor="#FFFFFF">
<table>
<tr>
<td>
<table border=10 bordercolorlight="#fffF00" bordercolordark="blue">
<tr>
<td>row 1 column 1</td>
<td>row 1 column 2</td>
</tr>
<tr>
<td>row 2 column 1</td>
<td>row 2 column 2</td>
</tr>
</table>
</td>
<td align=center>In this example the colour yellow was applied for<br> the light colour (borderlightcolour) and the colour blue<br> for the dark colour (borderdarkcolour)
</td>
</tr>
<tr>
<td>
<table border=10 bordercolorlight="#ffFF00">
<tr>
<td>row 1 column 1</td>
<td>row 1 column 2</td>
</tr>
<tr>
<td>row 2 column 1</td>
<td>row 2 column 2</td>
</tr>
</table>
</td>
<td align=center>In this example the colour yellow for<br> the light colour (borderlightcolour) and none for the dark colour.<br> In this case the standard colour is used
</td>
</tr>
<tr>
<td>
<table border=10 bordercolor="#00FF00">
<tr>
<td>row 1 column 1</td>
<td>row 1 column 2</td>
</tr>
<tr>
<td>row 2 column 1</td>
<td>row 2 column 2</td>
</tr>
</table>
</td>
<td align=center>In this example the colour green was applied<br>
to create a smooth border, without 3D effect
</td>
</tr>
</table>
</table>
</body>
</html>
👈Episode 12.2 Episode 12.4👉
Share This Post
PRINT THIS POST
No comments:
Post a Comment
If you have any doubts. Please let me know.