CSS Home

Box and Table Formatting with Cascading Style Sheets

Cascading Style Sheets allow you to specify the dimensions and other display parameters for each element box. Remember that boxes have Borders, Backgrounds and Margins. See Page Layout for the positioning of boxes.

Most formatting in HTML is done with tables. A style can be defined for all tables or style parameters can be applied to individual HTML tables by inserting a class into the <table> tag. Tables-within-tables can be given different classes to apply different style parameters to the inner and outer tables. With more effort, one can apply style parameters to individual rows or cells by inserting a class into individual <tr> or <td> tags. For example, the following style command will apply blue text, a width of 200 pixels,a pale blue background and a green border to any cell with this tag: <td class="blue">.

td.blue {width:200px; color:blue; background:#ccffff; border:2px solid green;}

Alternatively, the CSS command below will apply blue text,a pale blue background and a green border to every table. Note that the border will be around the entire table, not the individual cells.

table {color:blue; background:#ccffff; border:2px solid green;}

Box Style Parameters

height: This specifies the height of a box in pixels, % or other units.

width: This specifies the width of a box in pixels, % or other units.

display: This controls an elements display type. There are four options; block, inline, list-item and none. Block displays the element as a block-level item. Inline displays it as an inline element, and list-item displays it as a list item. None does not display the item.

white-space: This specifies how spaces and newlines are handled. Options are normal and nowrap.

©2003 All Rights Reserved