HTML and CSS Reference
In-Depth Information
within a table, our headings with the speaker's name within the links will remain
green, while the talk titles will be gray, creating a nice contrast between the two.
While we're adjusting the styles of the entries for the talks, let's also remove the
bottom
margin
on the
<h4>
elements within the table, allowing the speaker's
name to sit closer to her or his title. We can implement these styles with the fol-
lowing code:
1.
table a {
2.
color: #888;
3.
}
4.
table h4 {
5.
margin-bottom: 0;
6.
}
13.
Lastly, let's create some visual contrast among the different types of activities hap-
pening throughout the day. All of the talks look good with our latest changes. For
all of the other activities, such as registration, lunch, and breaks (which are within
the table body) as well as for the date (which is within the table header) let's use a
subtle gray.
We'll do so by creating a new class,
schedule-offset
, and assigning a
col-
or
of
#a9b2b9
to it.
1.
.schedule-offset {
2.
color: #a9b2b9;
3.
}
Once the class is in place, let's add it to all of the
<td>
elements that span two
columns and include either the day's date or a designated activity—registration,
lunch, or a break. Looking back to our table for the first day, the workshops day,
the HTML will look like this:
1.
<table>
2.
<thead>
3.
<tr>
4.
<th scope="row">
5.
Workshops
6.
</th>
7.
<td
class="schedule-offset"
colspan="2">
8.
August 24th
9.
</td>
10.
</tr>
11.
</thead>
12.
<tbody>
13.
<tr>
Search WWH ::
Custom Search