A Smarter Way To Learn HTML & CSS(2015)

48
Tables: background color

You can use code you learned in earlier chapters to style the text for an entire table, for <th> and <td> elements, and for classes and ids of any of these elements. For example:

th, td {
font-family: Georgia, "Times New Roman", Times, serif;
font-size: 1.5em;
font-weight: 900;
color: gray;
letter-spacing: .1em;
}

This what the table would look like.

A characteristic that can be especially useful in tables is background-color. For example you can use it to shade alternative rows to make reading a row easier.

Start by defining a class of <tr> and specifying, let’s say, lightgray as the background-color.

tr.even-row {
background-color: lightgray;
}

You’d write the HTML like this.

<table>
<tr>
<th scope="col">Product</th>
<th scope="col">Price</th>
<th scope="col">Shipping</th>
<th scope="col">Tax</th>
<th scope="col">Total</th>
</tr>
<tr>
<td>Swisher</td>
<td>76.75</td>
<td>6.50</td>
<td>.83</td>
<td>83.93</td>
</tr>
<tr class="even-row">
<td>Stirrer</td>
<td>106.60</td>
<td>8.00</td>
<td>1.33</td>
<td>115.93</td>
</tr>
<tr>
<td>Shaker</td>
<td>31.50</td>
<td>2.90</td>
<td>.33</td>
<td>34.37</td>
</tr>
<tr class="even-row">
<td>Swirler</td>
<td>220.00</td>
<td>14.00</td>
<td>2.60</td>
<td>236.60</td>
</tr>
<tr>
<td>Splasher</td>
<td>89.00</td>
<td>6.50</td>
<td>.91</td>
<td>96.41</td>
</tr>
</table>

With some additional styling I’m not showing you here, the table would look like this.

1. In your HTML file revise the most recent table, the one with an id. Assign a class to the second row. Save the file.

2. In your CSS file code a light background color for that class. Save the file.

3. Display the page.

Sample HTML code is at:
http://asmarterwaytolearn.com/htmlcss/practice-48-1.html.

Sample CSS code is at:
http://asmarterwaytolearn.com/htmlcss/practice-48-2.html.

Find the interactive coding exercises for this chapter at:
http://www.ASmarterWayToLearn.com/htmlcss/48.html