HTML and CSS Reference
In-Depth Information
To get started let's outline the structure of the first table, including the
<table>
,
<thead>
, and
<tbody>
elements.
1.
<section class="row">
2.
<div class="container">
3.
4.
<table>
5.
<thead>
6.
...
7.
</thead>
8.
<tbody>
9.
...
10.
</tbody>
11.
</table>
12.
13.
</div>
14.
</section>
3.
Currently, even though our first table doesn't contain any data, it does have some
styles applied to it. Specifically, the reset we added back in
Lesson 1
to tone down
all of the default browser styles has added the
border-collapse
property with
a value of
collapse
and the
border-spacing
property with a value of
0
to
the table. We want these styles, so we'll leave them alone; however, let's create a
new section in our
main.css
file to add some additional styles.
In our new section of styles specifically for the Schedule page (which will appear
just below the styles for the Speakers page), let's set our
<table>
elements to
have a
width
of
100%
and a bottom
margin
of
44
pixels.
Then, using the
:last-child
pseudo-class selector to identify the last
<t-
able>
element within the section, let's set its bottom
margin
to
0
pixels. Doing
so prevents this table from conflicting with the bottom
padding
belonging to the
<section>
element with a class attribute value of
row
.
So far, the new section within our
main.css
file looks like this:
1.
/*
2.
========================================
3.
Schedule
4.
========================================
5.
*/
6.
7.
table {
8.
margin-bottom: 44px;
Search WWH ::
Custom Search