Table Properties

There are several properties that are specific to CSS tables that you can use to "fine tune" the appearance of your table based layout.

The first of these proeprties is table-layout. This property tells the browser how to calculate the widths of the columns your table if you don't specify all the widths yourself. There are two different methods it can use - auto and fixed.

The auto method sets column widths based on what the column contains and wider content in any row will set the width of that column wide enough for that content.

The fixed method works completely differently as it doesn't look at the content of all the cells. Instead it works through a series of simple tests using the first of them that provides an answer to determine the widths. Firstly it looks to see which table-column-group or table-column have a width set to anything other than auto and ses that to set the width for those columns. It then looks at the table-cells in the first row and where the width there is not auto it sets the width of the entire column based on that width. Once those column widths are set it then divides the remaining horizontal space equally between the remaining columns.So what this means is that if you specify table-layout:fixed then if you don't specify individual widths for your columns then they will all be automatically assigned the same width. So using this option simplifies things where you want equal width columns in your page layout.

The border-collapse and border-spacing properties can be used the sameway with your CSS layout tables as they can be with your HTML tabular data tables. The border-collapse property collapses the borders of adjacent table-cells into a single border so that in the rare instance where you actually want the borders to display as a part of your layout that a single border appears between cells rather than each cell having a separate border of its own. When you don't use the border-collapse property you can use border-spacing to control the space between your table cells giving you greater control of the content placement than you would get by just using cell-padding. These properties will rarely be needed when you are using CSS tables (they are more likely to be needed with HTML tables) but it is still worth knowing that you can use them.


This article written by Stephen Chapman, Felgall Pty Ltd.

go to top

FaceBook Follow
Twitter Follow