Recipe 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;

}