Mar 8, 2008

A well structured table

Before we can style an element, we you should have a well structured element. In this this case, table is the element. The more semantic your element is , the more control you have over your stylling. Table is complex element. Below is a very well structured element.

            
Table 1: CosmoFarmer.com's Indoor Mower Roundup
Brand Price Power Source
Chinook Push-o-matic Indoor Mower $247.00 Mechanical
Sampson Deluxe Apartment Mower $370.00 Mechanical

We have top level children like, caption, colgroup, and thead(table head), tbody(table body). This structure is great, because we they are good selector, we can target our element without classes. For example, we want style table header, we can use selector thead, if we want to style a column width or color, we can use col#id, if we want selector header cell, we can use th, we want to select normal cell, if we can use td. One of table style I often use is border-collapse:collapse;