HTML and CSS Reference
In-Depth Information
9.
width: 100%;
10.
}
11.
table:last-child {
12.
margin-bottom: 0;
13.
}
4.
Now let's add some data to our table. We'll begin with the first day of our confer-
ence, the workshop day on August 24.
Within the
<thead>
element of the table let's add a
<tr>
element. The first cell
within the row will be a
<th>
element noting the focus of the day: “Workshops”
for this specific day. Since the
<th>
element is the heading for the row we'll also
add the
scope
attribute with a value of
row
to it.
After the
<th>
element comes a
<td>
element with the date, “August 24th” in
this case. Now, more often than not we'll have three columns, the first being a
table heading that identifies a time of day and the second two columns being regu-
lar table cells that identify speakers for that given time. Since this row doesn't fea-
ture two separate speakers we'll want to add the
colspan
attribute with a value
of
2
to the
<td>
element, forcing it to span two columns.
Our code for the table now looks like this:
1.
<table>
2.
<thead>
3.
<tr>
4.
<th scope="row">
5.
Workshops
6.
</th>
7.
<td colspan="2">
8.
August 24th
9.
</td>
10.
</tr>
11.
</thead>
12.
<tbody>
13.
...
14.
</tbody>
15.
</table>
5.
Inside the
<tbody>
element let's fill out the day's activities. We'll begin by
adding a
<tr>
element with a
<th>
and a
<td>
element directly inside the row.
On the
<th>
element, and all subsequent
<th>
elements, we'll add the
scope
attribute with a value of
row
to semantically identify this element as the header for
the row. Then within the
<th>
element let's add a
<time>
element that shows
Search WWH ::
Custom Search