HTML and CSS Reference
In-Depth Information
<tr class=”evenRow”>
<td>Winston</td>
<td>Torrtle</td>
<td>x346</td>
</tr>
</table>
The zebra stripes are clear, even in the black-and-
white image shown in Figure 17-11. Of course, you
have to be careful that there is sufficient contrast
between the background and text color. If neces-
sary, be sure to define a
color
attribute with an
appropriate color for your row class.
Try iT
In this Try It you learn how to style a table.
Lesson requirements
You will need the
tpa_jupiter.html
file from the
Lesson_17 folder, as well as a text editor and web
browser.
FiGure 17-11
You can download the code and resources for this lesson from the topic's web
step-by-step
1.
Open your text editor.
2.
From the Lesson_17 folder, open
tpa_jupiter.html
.
3.
Put your cursor before the closing
</style>
tag within the
<head>
section and press Enter
(Return).
4.
Enter the following code:
table {
width: 100%;
border-collapse: collapse;
}
td {
text-align: center;
width: 25%;
padding: 10px 0;
border-bottom: 2px black solid;
}
