Tables Guide
Part 4: Table Customization
This part of the guide focuses on customizing your table.
Adding Background Color to a Table
To add a background color to an entire table, you must use the
style attribute.
<table border="2" width="75%" style="background:#FFFFFF;">
background:#DFDFFF
| text |
text |
| text |
text |
text |
text |
background:#DFFFE3
| text |
text |
| text |
text |
text |
text |
background:#F4DFFF
| text |
text |
| text |
text |
text |
text |
Adding Background Color to a Row or Cell
To add background color to a row, add the
style attribute with the
background CSS property to the
tr row tag you want to add color to.
<table border="2" width="75%">
<tr style="background:#FF0000;">
<td width="60%" colspan="2">text</td>
<td width="40%" colspan="2">text</td>
</tr>
<tr style="background:#00FFFF;">
<td width="25%">text</td>
<td width="25%">text</td>
<td width="25%">text</td>
<td width="25%">text</td>
</tr>
</table>
| text |
text |
| text |
text |
text |
text |
To add color to a cell, add the
style attribute with the
background CSS property to the specific
td cell tag you want to add the background color to.
<table border="2" width="75%">
<tr>
<td width="25%" style="background:#FF6F75;">text</td>
<td width="25%" style="background:#FFA26F;">text</td>
<td width="25%" style="background:#FEFF6F;">text</td>
<td width="25%" style="background:#77FF6F;">text</td>
</tr>
<tr>
<td width="25%" style="background:#6FF4FF;">text</td>
<td width="25%" style="background:#6F7BFF;">text</td>
<td width="25%" style="background:#C26FFF;">text</td>
<td width="25%" style="background:#FF6FFC;">text</td>
</tr>
</table>
| text |
text |
text |
text |
| text |
text |
text |
text |
Cellpadding and Cellspacing
cellpadding is the amount of space between the cell and the table wall.
cellspacing is the amount of space in between the cells.
By default, tables have low
cellpadding and
cellspacing. If you want to change this, add
cellpadding or
cellspacing to the opening code:
<table border="2" cellpadding="10" cellspacing="10">
| text |
text |
| text |
text |
text |
text |
<table border="2" cellpadding="0" cellspacing="0">
| text |
text |
| text |
text |
text |
text |
Also, a lot of people add
cellspacing="0" to their tables to make them look sleeker, since it effectively gets rid of the outside border.
<table border="1" cellpadding="2" cellspacing="0">
| Bulbasaur |
  |
| Charmander |
 |
| Squirtle |
 |
Conclusion
Tables may be one of the most important HTML tools used today. They're used for nearly everything; from layouts, grids, to just organizing ideas. Hopefully this guide aids you in understanding them. If you have any questions, please
e-mail me.
