HTML CSS PHP PERL

Recipe 6.3 Setting the Styles Within Table Cells

 
Previous Page Table of Contents Next Page

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 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 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.

    Previous Page Table of Contents Next Page
    © 2000- NIV