HTML and CSS Reference
In-Depth Information
column, it's much simpler to create a style rule for the <th > tags. Add the following
style rule at the bottom of the <style > block in the <head > of the page to give the
headings a dark brown background and white text:
th {
color: #FFF;
background-color: #514F33;
}
4. To give alternate data columns a different background color, all that's needed is to
apply a style to every other table cell like this:
td:nth-of-type(even) {
background-color: #B7B173;
}
5.
save the page, and view it in a browser. In all modern browsers, the table looks like
Figure 13-4 . The light mustard color is inherited from the table, with the darker color
applied to alternate table cells styling them as columns. IE 8 and older browsers
understand all the style rules except the :nth-of-type() pseudo-class. As a result,
they display the light mustard background for all the data columns.
Figure 13-4. The columns now have alternate background colors
6. The columns are different widths. Unless subsequent rows have wider content, the
cells in the first row determine the width of each column. Because the first row
consists entirely of <th> elements, amend the table header style rule like this to even
up the size of the columns:
th {
color: #FFF;
background-color: #514F33;
width: 16%;
}
Search WWH ::




Custom Search