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.
<pre data-sub="prettyprint:_"> <table> <caption align="bottom"> Table 1: CosmoFarmer.com's Indoor Mower Roundup </caption> <colgroup> <col id="brand" /> <col id="price" /> <col id="power" /> </colgroup> <thead> <tr> <th scope="col">Brand</th> <th scope="col">Price</th> <th scope="col">Power Source</th> </tr> </thead> <tbody> <tr> <td>Chinook Push-o-matic Indoor Mower</td> <td>$247.00</td> <td>Mechanical</td> </tr> <tr> <td>Sampson Deluxe Apartment Mower</td> <td>$370.00</td> <td>Mechanical</td> </tr> </tbody> </table> </pre> <p>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;</p>