CSS Cookbook

6.3. Setting the Styles Within Table Cells

Problem

You want to stylize links within a table cell to make them appear visually different from the rest of the page.

Solution

Use a descendant selector (sometimes referred to as a contextual selector) to manipulate the styles for content in a table cell:

td a {
 display: block;
 background-color: #333;
 color: white;
 text-decoration: none;
 padding: 4px;
}

Discussion

By using the type and descendent selectors—the td a in the CSS rule—to apply the styles, you reduce the amount of markup needed to perfect your designs and you reduce the document’s file sizes. The style affects only the a elements within the table cells, td.

If you need more control over the design of the content within a table cell, use a class selector:

<td class="navText">
 <a href="/">Home</a>
</td>

You then can apply the CSS rules to the cell’s content through a combination of class and descendant selectors:

td.navText { 
 font-size: x-small;
}

See Also

The CSS 2.1 specification regarding type selectors at http://www.w3.org/TR/CSS21/selector.html#type-selectors; http://www.w3.org/TR/CSS21/selector.html#descendant-selectors for information about descendant selectors.