The early Web was used to communicate data between Universities 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.
Welcome to Bucaro TecHelp!

Bucaro TecHelp
Maintain Your Computer and Use it More Effectively
to Design a Web Site and Make Money on the Web

About Bucaro TecHelp About BTH User Agreement User Agreement Privacy Policy Privacy Site Map Site Map Contact Bucaro TecHelp Contact RSS News Feeds News Feeds

Victims of Sandy Hook

Stop the Slaughter of Innocents. Congress is bought and paid for by gun lunatics and gun promotion groups. If you want to live in a safe America, help buy Congress back for America. Send a donation to Mayors Against Illegal Guns, 909 Third Avenue, 15th Floor New York, NY 10022

How to Style a Table

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 TitleCol2 TitleCol2 Title
Row 1 Col 1Row 1 Col 2Row 1 Col 3
Row 2 Col 1Row 2 Col 2Row 2 Col 3
Row 3 Col 1Row 3 Col 2Row 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 TitleCol2 TitleCol2 Title
Row 1 Col 1Row 1 Col 2Row 1 Col 3
Row 2 Col 1Row 2 Col 2Row 2 Col 3
Row 3 Col 1Row 3 Col 2Row 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 TitleCol2 TitleCol2 Title
Row 1 Col 1Row 1 Col 2Row 1 Col 3
Row 2 Col 1Row 2 Col 2Row 2 Col 3
Row 3 Col 1Row 3 Col 2Row 3 Col 3

Collapsing the cell borders alone greatly improves the appearance of a table, but still not the best we can do.



RSS Feed RSS Feed


Follow Stephen Bucaro Follow @Stephen Bucaro


Web Design Sections

Fire HD
[Site User Agreement] [Privacy Policy] [Site map] [Search This Site] [Contact Form]
Copyright©2001-2016 Bucaro TecHelp 13771 N Fountain Hills Blvd Suite 114-248 Fountain Hills, AZ 85268