Web Design in a Nutshell, 3rd Edition

Styling Tables

For the most part, you don’t need any special properties to control the presentation of tables and their content. Most of the properties listed in the previous chapters apply to table elements as well, although some may have different values when applied to table objects. This list is an overview of the styles to use for formatting typical aspects of a table and its content.

Text content

Style the text content within tables, rows, and cells as you would any other text element in a document. You can apply the following properties to any table element.

• font and all font-related properties

• All text-formatting properties

• color (changes the text color)

Alignment of content in cells

You can use style properties to adjust the horizontal and vertical placement of cell content. Note that applying text-align: center to the table element does not center the table on the page, but rather centers all the content within each table cell.

• text-align for horizontal alignment within a cell. The values left, right, and center apply.

• vertical-align for vertical alignment within a cell. When used with tables, the values baseline, top, bottom, and middle apply. The values sub, super, text-top, and text-bottom; length measurements; and percentage values should not be used with table elements.

Background color and images

You can change the background of table cells, rows, row groups, columns, column groups, or the entire table with color or a background image. Whether the background is visible ...