Website resource guide, web development,Creating basic tables

Managing table borders

Here is our simple table example, accompanied by the code that created it:

		Coffee	Cream
Brand	Nescafe	MaxwellHouse
Roast	Columbian	Dark Roast

<table border=1>

<tr>

  <th>&nbsp;</th>

  <th>Coffee</th>

  <th>Cream</th>

</tr>

<tr>

  <th>Brand</th>

  <td>Nescafe</td>

  <td>MaxwellHouse</td>

</tr>

<tr>

  <th>Roast</th>

  <td>Columbian</td>

  <td>Dark Roast</td>

</tr>

</table>

By default, tables do not have borders. To get a border on our sample table, we added the border=1 attribute to the <table> tag. This turned on borders around the entire table as well as around all the cells within the table.

The value of the border attribute tells the browser how thick to make the border. You don't need to specify a value at all; simply adding "border" to a <table> tag will add a 1 pixel border to a table. We recommend, however, that you always specify a value to ensure that your tables look the same on a broad range of browsers.

To get a feel for how the border attribute works, here is our table using values of 2, 5, 10 and 20 for the border attribute:

	Coffee	Cream
Brand	Nescafe	MaxwellHouse
Roast	Columbian	Dark Roast

	Coffee	Cream
Brand	Nescafe	MaxwellHouse
Roast	Columbian	Dark Roast

	Coffee	Cream
Brand	Nescafe	MaxwellHouse
Roast	Columbian	Dark Roast

	Coffee	Cream
Brand	Nescafe	MaxwellHouse
Roast	Columbian	Dark Roast

In both Netscape and Internet Explorer, you'll notice that the border width affects only the outer border of the table, while the inner cell borders remain a constant, narrow width. In addition, when you turn on borders, you get borders around all the cells in your table.

Internet Explorer 4.0 supports the new HTML 4.0 rules and frame attributes. These attributes let you determine which cell and table borders are drawn. Both attributes are used within the <table> tag, along with the border attribute.

If you add "rules=rows" to your <table> tag, the internal cell borders will only be drawn around the table rows, while "rules=cols" draws borders only around the columns. Using "rules=none" removes all the cell borders, and "rules=all" draws borders around all the cells. If you don't provide a rules attribute, it is the same as if you had used "rules=all".

Here are the four sample tables, changed so that the <table> tag uses the values rows, cols, none, and all: (Note: you can only see these effects with Internet Explorer 4.0.)

	Coffee	Cream
Brand	Nescafe	MaxwellHouse
Roast	Columbian	Dark Roast

	Coffee	Cream
Brand	Nescafe	MaxwellHouse
Roast	Columbian	Dark Roast

	Coffee	Cream
Brand	Nescafe	MaxwellHouse
Roast	Columbian	Dark Roast

	Coffee	Cream
Brand	Nescafe	MaxwellHouse
Roast	Columbian	Dark Roast

The frame attribute for the <table> tag provides greater control over which table borders are drawn. Here are a number of one-cell tables, showing the effects of all these values. Again, this only works in Internet Explorer 4.0.

box

void

above

below

lhs

rhs

hsides

vsides

The value box draws a box around the table, the default table border behavior. The value void removes the table border entirely, while above, below, lhs, and rhs draw the border only on the top, bottom, left, or right side. Finally, hsides draws the top and bottom (horizontal) borders; vsides draws the left and right (vertical) borders.

Cellpadding and Cellspacing

By default, browsers tend to pack things into tables as closely as possible. Sometimes, things get a little too close, with just a pixel or two of space between adjacent cells. HTML provides two <table> attributes to control table spacing: cellspacing and cellpadding.

Cellspacing is the space between cells, and between cells and the outer edge of the table. When you change the cellspacing, cells get further apart, and the table border expands to provide more space around the table.

Cellpadding is the space between the contents of a cell and the edge of a cell. When you increase the cellpadding, cells get larger, but the space between cells (and between cells and the table border) stays the same.

Here is the same table, with the cellpadding increased to 5 pixels.
Using: <table border=1 cellpadding=5>

	Coffee	Cream
Brand	Nescafe	MaxwellHouse
Roast	Columbian	Dark Roast

Contrast this with 5 pixels of cellspacing by specifying:
<table border=1 cellspacing=5>

	Coffee	Cream
Brand	Nescafe	MaxwellHouse
Roast	Columbian	Dark Roast

This makes the difference much more obvious: cellpadding makes the cells bigger, while cellspacing makes the spaces between the cells, and the borders, bigger.

For fun, try mixing and matching border, cellspacing, and cellpadding attributes. Internet Explorer 4.0 users can add in a few variations of the frame and rules attributes. All of these attributes will come in handy as you start using tables for document layout, instead of simple data display.

<< BACK

Table Borders, Spacing and Padding