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:
Click here to view code image
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