Terrific Tables with CSS

[ganeshbala]

Terrific Tables with CSS

The Structure

Styling tables can be liberating and confusing at the same time. While the multiple elements of which a table can consist offer plenty of ways to tie in some additional style, cross-browser inconsistencies and the lack of support for some truly useful CSS selectors can prove to be frustrating roadblocks.

However, before we tackle the intricacies of styling a table, let's go over all the different elements of which a table might consist. Much of this will probably be familiar ground, but there might be a couple of new elements that you haven't encountered before. My apologies if this groundwork comes off as a little dry, but it's well worth your attention. Think of table-styling as a roller-coaster; you've gotta spend time on the long slow ascent before you get into the wild ride of styling!


Example 1. table-example-basic.html (excerpt)

Code Select Expand



<table>
<tr>
   <th scope="col">Person</th>
   <th scope="col">Web Site</th>
</tr>
<tr>
   <td>Bryan Veloso</td>
   <td><a href="http://avalonstar.com/">Avalonstar</a></td>
</tr>
<tr>
   <td>Dan Rubin</td>
   <td><a href="http://superfluousbanter.org/">
SuperfluousBanter</a></td>
</tr>
</table>

Those aren't all the elemental components of a table, though. We also have the thead, tbody, tfoot, caption, col, and colgroup elements at our disposal. All of these elements serve a very semantic purpose, each of which I'll explain in a little detail so you'll know what element to use and when. Each of these elements will provide a point where we can hook in some CSS styling to take our table from being a boring blackspot on our page to being a mini work of art in its own right.

The table Element

A table isn't a table without a table element. It all starts from here.

A table has a number of attributes, such as border, cellpadding, and cellspacing, all of which you've used often if you've emerged from the tables-for-layout school of web design. We can ignore border and cellpadding for now, as we can replicate these attributes in CSS. One presentational attribute we'll need to keep handy is cellspacing. Internet Explorer doesn't support the ability to handle cellspacing via CSS, which means that if we need to maintain control, we'll have to do it at the HTML level.

In addition to those attributes, we also have the frame attribute and the rules attribute. The frame attribute controls the display of the outermost border on the table. Its possible values are void, above, below, hsides, vsides, lhs, rhs, box, and border. void is the default value and will remove the border from around the table.

The border manifests itself differently in each of the four browsers I used to test this markup:

    * Internet Explorer rendered a three-dimensional border on all sides.
    * Opera rendered a solid black border.
    * Firefox rendered a gray border on the left and top, with black on the right and bottom.
    * Safari rendered no border at all.

When Internet Explorer is given a value other than void, this browser will incorrectly render a border on the cells inside the table as well. For example, if you specify lhs, the left side of each cell will be rendered:

Code Select Expand


<table frame="lhs">

The rules attribute, which controls how the dividing borders of the table should be drawn, has five valid values: none, groups, rows, cols, and all. If a value of none—which is the default value—is specified, no lines will be drawn between the cells.

An interesting point to note here is that if you fail to specify a rules attribute, the border-style (using CSS) you've set for colgroup elements or col elements will be ignored. But if you specify a value of none, suddenly the border-style comes to life.

A value of groups will apply a border (gray and beveled in Internet Explorer, one-pixel and black in Firefox and Opera) around each thead, tfoot, tbody, and colgroup. Setting rules to rows or cols will apply a border between each respective row or column. all will apply a border around every cell. Again, if the frame attribute is omitted and rules is set to any value but none , IE breaks from the pack and displays a border around the entire table. As was the case with the frame attribute, Safari doesn't support the rules attribute. Output rendered by the current versions of the four most common browsers


SOurce ; Jonathan Snook(sitepoint)