Beginning HTML - Home
Introduction - What is HTML, What it can do, what you'll need, etc. The Basics - First steps in HTML. Moving On - Further concepts. Advanced - More advanced ways to use HTML. Glossary - Explanation of terms used in this site HTML Tag and attribute reference - look up the most popular tags and their common attributes for reference
Square Moving On
square Backgrounds
Square Images
Square Links
Square Lists
Square Tables (Part One)
Square Tables (Part Two)
Square Tables (Part Three)
 
Adjusting the size of the border
Adjusting the color of the border
Setting the background color of the table/cell
Using an image for the background of the table or cell
Dealing with empty cells

In the last section we learned how to adjust the layout of the table by setting the size and alignment of its contents. In this section, we'll see how we can change the appearance of the table, and take a look at how to deal with empty table cells (ones that have no content).

Adjusting the size of the border

We can change the size (thickness) of the table border using the border attribute. We can assign this a value in pixels (the default is 0), according to how thick we'd like it to appear. For example, if we'd like a table with a border of 4 pixels, we'd use the code
<table border="4">
Bear in mind that browsers display the table border with a 3D-look to it, which isn't really visible with a border of 1, but gets more obvious as you increase the thickness. For example, a table with a border thickness of 6 looks like this -

Not very pretty, is it?


This example shows tables with borders of 1 through 10.

Adjusting the color of the border

The thickness isn't the only thing we can change about a table's border. Using the bordercolor attribute of the <table> tag, we can also change its color. The value of this attribute can either be an RGB hexadecimal code (e.g '#000000'), or the name of the color (e.g. 'black'). So, if we'd like the border color to be red, we'd just have to use the code
<table bordercolor="red">
However, the way Internet Explorer and Navigator deal with this is different. Explorer will use one tone of the color you specify (which flattens out the 3-D effect), whilst Navigator will render the border in a two-tone effect, thus enhancing the 3-D effect.
If you view this example in Explorer, and then in Netscape, you'll see quite a difference in the way they render the borders.

Setting the background color of the table/cell

Another way we can control the appearance of our tables is to choose a background color. This can be done using the bgcolor attribute. We can apply a background color to either the entire table (that is, use the attribute within the <table> tag, or within an individual cell, using the <td> tag. Like most other attributes that control color in HTML, we can choose either an RGB color code, or just use the color name. So, if we'd like the background color of the entire table to be red, we'd use the code
<table bgcolor="red">
..or if we'd just like one cell to be red, we'd use the code
<td bgcolor="red">
If the table is set to have a background color, we can over-ride this for individual cells if we want. So, in this example -
<table bgcolor="green">
<tr>
<td>Cell one</td>
<td bgcolor="red">Cell two</td>
</table>

..cell two would have a background color of red, as this over-rides the color of yellow we set in the <table> tag.

Using an image for the background of the table or cell

If we'd prefer to use an image for the background of our tables or cells, we can do this in the same way we would for the background of the page, using the <background> attribute. We can apply this to either the entire table (with the <table> tag, or to an individual cell (with the <td> tag). In the same way as for the background of the page, the image will repeat (or tile) to fit the cell or the table.
The image needs to be in either JPEG or, more likely, GIF format. BMP format will work in Explorer, but won't appear in Netscape.
So, supposing we've got an image we'd like to use (in this case, 'background_example.gif') as the background for our table. We need to use the background attribute to tell the browser the filename and path (if it's in a different directory) of the image. So, for example -
<table width="100%" border="1" background="images/background_example.gif">
<tr>
<td>The contents of the table!</td>
</tr>
</table>

Would appear like this. That's a very crude example, and if you insist on using background images in your tables, you need to ensure that its subtle enough not to detract from the content of the table, and also that it tiles seamlessly.

Dealing with empty cells

Sometimes when you're creating tables, there will be one or more cells that don't actually have any content. If this is the case, then often a browser (particularly Netscape 4.x) will fail to render that cell at all, messing up the entire table. To counter this effect, you can 'fool' the browser into thinking that the cell has content.
This can be achieved by placing the non-breaking-space entity (&nbsp;) in the cell, for example -
<td>&nbsp;</td>
...then the browser considers that there is content in that cell!

As with anything else in HTML, the best way of learning is to practice, so try out the different tags and attributes that we've covered relating to tables...try mixing attributes, making a mess with them, whatever you feel like....
Next we'll be looking at more advanced HTML.

TopTop of page - BackBack to Tables (Part Two) - Next - AdvancedNext

Introduction - The Basics - Moving On - Advanced - Glossary - Reference