Web Development and Design Foundations with XHTML, 5th Edition

8.3 Using CSS to Style a Table^333

more efficient display by browsers that support this technology. Today’s Web developers

must be aware of both legacy page layout coding techniques (such as tables), and newer

techniques such as CSS. In the next section you’ll explore using CSS to configure prop-

erties associated with table elements.

CHECKPOINT 8.2

1. Describe a reason to use a percentage width for a table that configures a Web page
   layout. Provide an example of a page that uses this technique.


2. Describe a reason to use a fixed pixel width for a table that configures a Web page
   layout. Provide an example of a page that uses this technique.


3. True or False? Tables can be nested within other tables.

8.3Using CSS to Style a Table

Earlier in this chapter you used XHTML attributes such as align, width,

cellpadding, cellspacing, andbgcolorto configure the display of a table. In this

section you’ll explore using CSS to replace the functionality of these attributes. Table

8.1 lists corresponding CSS properties with XHTML attributes used to style tables.

These properties are also described in Appendix C.

Table 8.1CSS properties used to style tables

XHTML Attribute CSS Property

align To align a table, configure the widthand marginproperties for the tableselector.

For example, to center a table:

table { width: 75%;

margin: auto; }

To align items within table cells:

text-align

width width

height height

cellpadding padding

cellspacing To configure the table cells to share a common border and eliminate the default space

between table cells configure the border-collapseproperty for the tableselector.

For example:

table { border-collapse: collapse; }

bgcolor background-color

valign vertical-align

border, bordercolor border, border-style

none background-image