Tables Hands-on Exercises

1. Open the faculty and staff office hours page
2. Highlight the data table and remove the border, cellpadding, and cellspacing in the Properties panel
3. Highlight the first row of the table and delete the bold formatting
4. Set the first row of the table as a header row
5. Create style declarations for <th> in your stylesheet.css file
   th {
border-bottom: 3px solid #666666;
text-align: left;
padding: 3px 3px 3px 6px;
background-color: #EDEDED;
}
6. Create style declarations for the spacing of the other table cells:
   .office-hours td {
padding: 3px 6px 3px 1px;
border-bottom: 1px solid #666666;
}
7. Set the "class" attribute of your table as "office-hours"
8. Create style declarations for the row-hover property:
   .office-hours tr:hover {
background-color: #ECECEC;
}
9. Preview #8 in Firefox (Shift + F12) to see the row-hover effect