When you generate a simple table devoid of any styles or properties, contemporary browsers demonstrate them very straightforwardly. They don’t have any borders or colors. The only style or layout that majority of browsers bring into play is to bold and center any header cells.
You might have noticed one thing in Web 2.0 pages. They over and over again make use of tabular data with illustrative feedback. That means, the table rows or columns transform color depending upon where your mouse is hovering. With just a small amount of JavaScript and a line or two of CSS, you can create a table that highlights the row that the mouse is hovering over or changes color when it’s clicked on. To highlight rows that the mouse is hovering over, you need the following piece of HTML, CSS and JavaScript code:

HTML:
<table class=”highlite” id=”highlight”>
<thead>
<tr><th>Name</th><th>Alias</th></tr>
</thead>
<tbody>
<tr><td>James Black</td><td>Web Design / HTML Guide</td></tr>
<tr><td>Mark Nicholas</td><td>PC Hardware / Reviews Guide</td></tr>
<tr><td>Shasta</td><td>Moe</td></tr>
<tr><td>McKinley</td><td>Kinkin</td></tr>
</tbody>
</table>

CSS:
table { margin: 1em; border-collapse: collapse; }
td, th { padding: .3em; border: 1px #ccc solid; }
thead { background: #fc9; }
tbody { background: #9cf; }
#highlight tr.hilight { background: #c9f; }

When you have to to post tabular data, never leave it up to the browser to describe how it will appear. As a substitute use the CSS and JavaScript tools at your disposal to generate a table that looks as superior as the remaining part of your website.

Before CSS, when you defined the border attribute on a table, this affected all the borders around the table as a whole as well as in between sections, rows, and columns. So many people think that CSS will act the same way, but it doesn’t. Instead, CSS puts a border on the table itself, not around any of the cells.

So, to put a border around the cells of the table, you need to define that in your CSS:

td, th { border: 1px #ccc solid; }

And as you can see, this puts a grey border around every cell. But it looks somewhat strange. After all, the cells are all separated from one another and they don’t look like a standard spreadsheet or table. The HTML tables specification provides two ways of handling table borders: collapsed and separated. This gets really complicated quickly, but suffice it to say that most browsers will display tables with the cells separated if you don’t specify a preference. To fix this, you need to put a border-collapse style on your table:

table { border-collapse: collapse; }

When you make use of this style, your table borders will be presented as you might be expecting - simple lines sandwiched between each cell. The addition of color to your tables makes them much simpler to read and the benefit of using the thead and tbody tags means that you don’t have to define a style for every row or cell. You just assign a background color to the thead and the tbody and your table cells will be colorized. It can be more complex if you want to interchange row colors but even that is achievable.

Tags: CSS Styles for Tables