Locked lesson.
About this lesson
Exercise files
Download this lesson’s related exercise files.
Tables.docx58.8 KB Tables - Solution.docx
59 KB
Quick reference
Tables
Tables are a popular HTML element. Let's learn how to style them with CSS!
When to use
Any time you have an HTML table, you'll want to use CSS to style it.
Instructions
Here's some basic Table HTML code...
<table>
<tr>
<th>Name</th>
<th>Trail</th>
<th>Date</th>
<th>Miles Walked</th>
</tr>
<tr>
<td>John Elder</td>
<td>Icebox Canyon</td>
<td>2/14/17</td>
<td>3.6</td>
</tr>
<tr>
<td>Mary Smith</td>
<td>Flamingo Mountain</td>
<td>3/1/17</td>
<td>2.1</td>
</tr>
</table>
To style tables, table head, and table data, use this CSS:
table, th, td {
border: 1px solid black;
border-collapse: collapse;
}
That will give your table a single lined border.
To make rows change color when you hover the mouse over them:
tr:hover {
background-color: #cccccc;
}
To make even or odd rows different colors, use this code.
tr:nth-child(even){
background-color: #cccccc;
}
tr:nth-child(odd){
background-color: #cccccc;
}
Hints & tips
- Tables are pretty easy to style.
- You can do all the normal CSS to table elements.
- The basic table elements are table, th (table head) and td (table data).
- You can style each table element individually.
Lesson notes are only available for subscribers.