CELLPADDING
and CELLSPACING
By default, table cells
tend to be squeezed close to each other. To give your table cells a little more
breathing room, use CELLPADDING and CELLSPACING.
CELLSPACING controls the space between table cells. Although there is no
official default, browsers usually use a default of 2.
|
<TABLE BORDER> |
<TABLE BORDER CELLSPACING=2> |
<TABLE BORDER CELLSPACING=10> |
||||||||||||
|
|
|
CELLPADDING sets the amount of space between the contents of the cell and the
cell wall. The default is 1. CELLPADDING is usually more
effective than CELLSPACING for spreading out the
contents of the table.
|
<TABLE BORDER> |
<TABLE BORDER CELLPADDING=1> |
<TABLE BORDER CELLPADDING=10> |
||||||||||||
|
|
|
CELLPADDING
and CELLSPACING
By default, table cells
tend to be squeezed close to each other. To give your table cells a little more
breathing room, use CELLPADDING and CELLSPACING.
CELLSPACING controls the space between table cells. Although there is no
official default, browsers usually use a default of 2.
|
<TABLE BORDER> |
<TABLE BORDER CELLSPACING=2> |
<TABLE BORDER CELLSPACING=10> |
||||||||||||
|
|
|
CELLPADDING sets the amount of space between the contents of the cell and the
cell wall. The default is 1. CELLPADDING is usually more
effective than CELLSPACING for spreading out the
contents of the table.
|
<TABLE BORDER> |
<TABLE BORDER CELLPADDING=1> |
<TABLE BORDER CELLPADDING=10> |
||||||||||||
|
|
|
COLSPAN
and ROWSPAN
Table cells can span
across more than one column or row. The attributes COLSPAN ("how many across") and ROWSPAN ("how many
down") indicate how many columns or rows a cell should take up.
For example, we might
want to create header cells for each department in our table of names and phone
numbers. In this table, the header cells in the first and fifth rows span
across two columns to indicate the department for each group of names.
<TABLE BORDER=2 CELLPADDING=4>
<TR> <TH COLSPAN=2>Production</TH>
</TR>
<TR> <TD>Raha
Mutisya</TD> <TD>1493</TD> </TR>
<TR> <TD>Shalom Buraka</TD>
<TD>3829</TD> </TR>
<TR> <TD>Brandy
Davis</TD>
<TD>0283</TD> </TR>
<TR> <TH COLSPAN=2>Sales</TH>
</TR>
<TR> <TD>Claire
Horne</TD>
<TD>4827</TD> </TR>
<TR> <TD>Bruce Eckel</TD>
<TD>7246</TD> </TR>
<TR> <TD>Danny Zeman</TD>
<TD>5689</TD> </TR>
</TABLE>
which gives us:
|
Production |
|
|
Raha Mutisya |
1493 |
|
Shalom Buraka |
3829 |
|
Brandy Davis |
0283 |
|
Sales |
|
|
Claire Horne |
4827 |
|
Bruce Eckel |
7246 |
|
Danny Zeman |
5689 |
It often happens with
multiple-column cells that a little color helps to set off the headers, giving
the table a more visually organized look. Let's add some color to the headers
using BGCOLOR.
<TABLE BORDER=2 CELLPADDING=4>
<TR> <TH COLSPAN=2 BGCOLOR="#99CCFF">Production</TH>
</TR>
<TR> <TD>Raha
Mutisya</TD> <TD>1493</TD> </TR>
<TR> <TD>Shalom Buraka</TD>
<TD>3829</TD> </TR>
<TR> <TD>Brandy
Davis</TD>
<TD>0283</TD> </TR>
<TR> <TH COLSPAN=2 BGCOLOR="#99CCFF">Sales</TH>
</TR>
<TR> <TD>Claire
Horne</TD>
<TD>4827</TD> </TR>
<TR> <TD>Bruce Eckel</TD>
<TD>7246</TD> </TR>
<TR> <TD>Danny Zeman</TD>
<TD>5689</TD> </TR>
</TABLE>
which gives this table:
|
Production |
|
|
Raha Mutisya |
1493 |
|
Shalom Buraka |
3829 |
|
Brandy Davis |
0283 |
|
Sales |
|
|
Claire Horne |
4827 |
|
Bruce Eckel |
7246 |
|
Danny Zeman |
5689 |
ROWSPAN sets how many rows a cell spans. ROWSPAN can get a little
confusing because it requires you to think through how the cell affects the
rows after the row it starts in. It's particularly useful in this situation to
add borders to the table during the design process, even if the table won't
ultimately use borders.
This table code creates
two header cells which span three rows each:
<TABLE BORDER=2 CELLPADDING=4>
<TR>
<TH ROWSPAN=3
BGCOLOR="#99CCFF">Production</TH>
<TD>Raha Mutisya</TD>
<TD>1493</TD>
</TR>
<TR>
<TD>Shalom Buraka</TD>
<TD>3829</TD>
</TR>
<TR>
<TD>Brandy Davis</TD> <TD>0283</TD>
</TR>
<TR>
<TH ROWSPAN=3 BGCOLOR="#99CCFF">Sales</TH>
<TD>Claire Horne</TD> <TD>4827</TD>
</TR>
<TR>
<TD>Bruce Eckel</TD>
<TD>7246</TD>
</TR>
<TR>
<TD>Danny Zeman</TD>
<TD>5689</TD>
</TR>
</TABLE>
which creates
|
Production |
Raha Mutisya |
1493 |
|
Shalom Buraka |
3829 |
|
|
Brandy Davis |
0283 |
|
|
Sales |
Claire Horne |
4827 |
|
Bruce Eckel |
7246 |
|
|
Danny Zeman |
5689 |
Note that in the two
rows after each header, the first cell in the row ends up in the second column
because the first column is taken up by the multi-column cell.
Table Borders: The Basics
The most basic issue
concerning table borders is if there should be any borders at all. That issue
is settled with the BORDER
attribute to the <TABLE ...> tag.
By default, tables do
not have borders. For example, this code, which does not have any attributes in
the <TABLE
...> tag, produces a table with no borders:
<TABLE>
<TR>
<TD>watermelon</TD> <TD>grapes</TD> </TR>
<TR>
<TD>peaches</TD>
<TD>bananas</TD> </TR>
</TABLE>
which gives us
|
watermelon |
grapes |
|
peaches |
bananas |
To give the table
borders we add the BORDER
attribute to the <TABLE ...> tag:
<TABLE BORDER>
which gives us this table
|
watermelon |
grapes |
|
peaches |
bananas |
BORDER sets the width of the outer border. So, for example, this code
creates a table with an outside border width of 10:
<TABLE BORDER=10>
which gives us this table
|
watermelon |
grapes |
|
peaches |
bananas |
Note that BORDER sets the width of the outside border. The width of the inside
borders are set with CELLSPACING.