How to Style a Table
By Stephen Bucaro
The early Web was used to communicate data between Universities (as apposed to
its primary use today: advertising, social banter, and pornography ... pardon
my diversion) and one of the most common structures used for that purpose is
a table. Even today, many tables use the default styles, which makes them somewhat
boring. In this article, I show you how to use CSS (cascading Style Sheets) to
make your tables more interesting.
Below is a basic table with no style applied.
Table Caption
| Col1 Title | Col2 Title | Col2 Title |
|---|
| Row 1 Col 1 | Row 1 Col 2 | Row 1 Col 3 |
| Row 2 Col 1 | Row 2 Col 2 | Row 2 Col 3 |
| Row 3 Col 1 | Row 3 Col 2 | Row 3 Col 3 |
Note that each cell in the table has its own border, making it look like the
table has a thick border. This is caused by the fact that IE puts some spacing
between the cells. By setting the html attribute cellspacing=0 you can
put the cell borders next to each other, as shown below, but that won't
collapse them into a single border like you would have in a spreadsheet.
Table Caption
| Col1 Title | Col2 Title | Col2 Title |
|---|
| Row 1 Col 1 | Row 1 Col 2 | Row 1 Col 3 |
| Row 2 Col 1 | Row 2 Col 2 | Row 2 Col 3 |
| Row 3 Col 1 | Row 3 Col 2 | Row 3 Col 3 |
The style property border-collapse sets whether the cell borders are
collapsed into a single border as shown below.
<table border=1 style="border-collapse:collapse;">
<caption>Table Caption</caption>
<tr><th>Col1 Title</th><th>Col2 Title</th><th>Col2 Title</th></tr>
<tr><td>Row 1 Col 1</td><td>Row 1 Col 2</td><td>Row 1 Col 3</td></tr>
<tr><td>Row 2 Col 1</td><td>Row 2 Col 2</td><td>Row 2 Col 3</td></tr>
<tr><td>Row 3 Col 1</td><td>Row 3 Col 2</td><td>Row 3 Col 3</td></tr>
</table>
Table Caption
| Col1 Title | Col2 Title | Col2 Title |
|---|
| Row 1 Col 1 | Row 1 Col 2 | Row 1 Col 3 |
| Row 2 Col 1 | Row 2 Col 2 | Row 2 Col 3 |
| Row 3 Col 1 | Row 3 Col 2 | Row 3 Col 3 |
Collapsing the cell borders alone greatly improves the appearance of a table,
but still not the best we can do.
| 
About BTH
User Agreement
Privacy
Site Map
Contact
News Feeds
RSS Feed
Follow @Stephen Bucaro
General Web Design
