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