CSS: The Missing Manual

Styling Tables

You can use many of the CSS properties you've read about to dress up the appearance of a table and its contents. The color property, for example, sets a table's text color, just like anywhere else. You'll find a few properties, however, that are particularly useful with tables, as well as a couple aimed specifically at formatting tables.

Because tables are composed of several HTML tags, it helps to know which tag to apply a particular CSS property to. Applying padding to a <table> tag has no effect. The next few sections cover CSS properties for formatting tables and which HTML tags they get along with.

Adding Padding

As you read in Section 7.2, padding is the space between an element's border and its content. You can use padding to provide a little space between the edges of a paragraph's text and its border. When it comes to tables, the borders are the edges of a cell, so padding adds space around any content you've placed inside of a table cell (see Figure 10-2). It works a lot like the <table> tag's cellpadding attribute, with the added benefit that you can individually control space between a cell's content and each of its four edges.

You apply padding to either a table header or a table cell tag, but not to the <table> tag itself. So, to add 10 pixels of space to the inside of all table cells, you'd use this style:

	td, th { padding: 10px; }

You can also control the spacing separately for each edge. To add 10 pixels of space to the top of each table data cell, ...