Recipe 8.4. 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 selectorsthe TD a in the CSS ruleto 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 >  <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 a {   font-size: x-small; }

If you want to stylize content within a table cell that contains more content or markup than a link, wrap a div element around the content in order to use a class selector.

In the following example, an unordered list is enclosed within a div element set with a class attribute:

<td>  <div >  <p>To-do list on your day off.</p>  <ul>    <li><a href="http://www.imdb.com/title/tt0120737">Watch <cite>Fellowship of  the Rings</cite>, Extended Version</a></li>    <li><a href="http://www.imdb.com/title/tt0167261/">Watch  <cite>Two Towers</cite>, Extended Version</a></li>    <li><a href="http://www.imdb.com/title/tt0167260/">Watch <cite>Return of the  King</cite>, Extended Version</a></li>   <li>Start or join local Elvish society.</li>  </ul>   </div> </td>

The CSS rules to stylize the content within the table cell could look like this:

.tblcontent p {  margin: 0;  padding: 0;  font-weight: bold; } .tblcontent ul {  margin: 0;  padding: 0; } .tblcontent li {  margin: 0;  padding: 0;  line-height: 1.5; } .tblcontent li a {  padding-left: 15px;  background-image: url(bullet.gif);  background-repeat: no-repeat; }

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. For a more thorough example of styling content within table cells, see Recipe 8.10.