Laying out tables

Well, a table is still a table. You use the standard table tags but CSS has some new properties that control how the browser lays out your table.

You can tell the browser to use different algorithms to display a table. The table-layout property specifies whether the height and width of the table is fixed or whether the browser varies the width and height to fit the contents of the cells.

Use the border-collapse property to specify whether each cell has a separate border or whether adjacent cells share one border. The border-spacing property specifies the distance between borders of adjacent cells in a table; it works like the cell-spacing attribute in HTML. Border spacing only applies if you have a separate border for each cell.

You can also choose what to do with the borders on empty cells. The empty-cell property specifies whether to display or hide the borders of empty cells.

You can use the caption-side property to add a caption to your table and specify where you want the caption to appear.

The display property also has some new values that relate to tables.