17.1. CSS Properties and Table Attributes

There are many CSS properties that can be used to control table attributes in your document. The following table lists the basic properties available and how they correspond to table element (<table>) attributes.

PurposeTable AttributeCSS Property(ies)
Bordersborderborder properties
Spacing inside cellcellpaddingpadding properties
Spacing between cellscellspacingborder-spacing
Width of tablewidthwidth and table-layout properties
Table framingframeborder properties
Alignmentalign, valigntext-align, vertical-alignment properties

Because many of the table element's attributes have not been deprecated in XHTML, you may be tempted to embed all of your document's table formatting within individual table tags. Resist that temptation. Using tag attributes increases the editing difficulty of the document—each table using tag attributes instead of CSS properties must be edited individually. If you use CSS properties instead, you can modify many tables by editing only one style (or a few styles). Furthermore, if you use external style sheets, you can effect changes in multiple documents by editing only a few styles.

The next few sections detail the CSS properties for formatting tables.

17.1.1. Defining Borders

Tables use border properties to control the border of document tables and their subelements. For example, to surround every table and their subelements with a single 1pt border, you could use a style definition similar to the following:

/* Format ...

Get Web Standards Programmer's Reference: HTML, CSS, JavaScript®, Perl, Python®, and PHP now with O’Reilly online learning.

O’Reilly members experience live online training, plus books, videos, and digital content from 200+ publishers.