CSS Tables

Using CSS Tables a developer has more scope on the styling and feel of the table elements.

In general, there are 6 HTML elements that deal with tables:

• table – the table itself
• thead – the header of the table
• tbody – the main content of the table
• tfoot – the footer of the table
• tr – a table row
• th – a table heading
• td – a table cell

Each of these elements can be styled using traditional CSS declarations. There are certain table-specific attributes that can also be declared though:
border-collapse – if you have a table with a 1px border on every cell, then all joining borders will appear to be 2 pixels thick. Collapsing the borders make the browser act as if they are one singular border.
vertical-align – it is possible to align elements vertically within a table cell. Similar to the valign HTML attribute, this can be set to ‘top’, ‘middle’ or ‘bottom’.

Using all of these in conjunction can create a nice effect.