HTML and CSS Reference
In-Depth Information
51.
text-align: right;
52.
}
53.
.item-multiple {
54.
display: block;
55.
}
56.
tfoot {
57.
text-align: right;
58.
}
59.
tfoot tr:last-child {
60.
background: #f0f0f2;
61.
color: #395870;
62.
font-weight: bold;
63.
}
64.
tfoot tr:last-child td:first-child {
65.
border-bottom-left-radius: 5px;
66.
}
67.
tfoot tr:last-child td:last-child {
68.
border-bottom-right-radius: 5px;
69.
}
In Practice
Now that we know how to create and style tables, let's wrap up the last remaining page of
our Styles Conference website, the schedule.
1.
We'll begin our Schedule page by opening up the
schedule.html
file and
adding a
<section>
element with a class attribute value of
row
, much like
we've done with all of the other subpages. Within this new
<section>
element
let's also add a
<div>
element with a class attribute value of
container
.
1.
<section class="row">
2.
<div class="container">
3.
...
4.
</div>
5.
</section>
With these elements and classes we've created a new section of the page with a
white
background
and vertical
padding
, and we've centered our content on
the page. What's different here from all of the other subpages is the
container
class attribute value in place of the
grid
class attribute value on the
<div>
ele-
ment. Since we're not using any of the
col
-based classes we'll forgo the
grid
class attribute value in favor of the
container
class attribute value.
2.
Within the new section we'll add three tables, one for each day of the conference.
The tables will display the events of each day using three columns and multiple
rows and will include a table head and table body.
Search WWH ::
Custom Search