Tables

Properties that are commonly

used with the <table>, <td>, and <th> elements include the following:

❑ padding to set the amount of space between the border of a table cell and its content — this

property is very important to make tables easier to read.

❑ border to set the properties of the border of a table.

❑ text and font properties to change the appearance of anything written in the cell.

❑ text-align to align writing to the left, right, or center of a cell.

❑ vertical-align to align writing to the top, middle, or bottom of a cell.

❑ width to set the width of a table or cell.

❑ height to set the height of a cell (often used on a row as well).

❑ background-color to change the background color of a table or cell.

❑ background-image to add an image to the background of a table or cell.

body {color:#000000; background-color:#ffffff;}

h1 {font-size:18pt;}

p {font-size:12pt;}

table {

background-color:#efefef;

width:350px;

border-style:solid;

border-width:1px;

border-color:#999999;

font-family:arial, verdana, sans-serif;}

caption {

font-weight:bold;

text-align:left;

border-style:solid; border-width:1px; border-color:#666666;

color:#666666;}

th {

height:50px;

font-weight:bold;

text-align:left;

background-color:#cccccc;}

td, th {padding:5px;}

td.code {

width:150px;

font-family:courier, courier-new, serif;

font-weight:bold;

text-align:right;

vertical-align:top;}

The border-collapse Property: The border-collapse property specifies whether the browser should display every border — even if there are two cells with different border properties in adjacent cells — or whether the browser should automatically decide which border to display based upon a built-in complex set of rules.

Example

table.one {border-collapse:collapse;}

table.two {border-collapse:separate;}

td.a {border-style:dotted; border-width:3px; border-color:#000000;padding: 10px;}

td.b {border-style:solid; border-width:3px; border-color:#333333; padding: 10px;}

The border-spacing Property: The border-spacing property specifies the distance that separates adjacent cells’ borders. It can take

either one or two values; these should be units of length.

Or you can specify two values, in which case the first refers to the horizontal spacing and the second to the vertical spacing:

td {border-spacing:2px; 4px;}

The caption-side Property: The caption-side property allows you to specify where the content of a <caption> element should be placed in relationship to the table.

caption {caption-side:bottom}

The empty-cells Property: The empty-cells property indicates whether a cell without any content should have a border displayed.

table {

background-color:#efefef;

width:350px;

border-collapse:separate;

empty-cells:hide;}

The table-layout Property: The table-layout property is supposed to help you control how a browser should render or lay out a table (although support in browsers is weak).