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.
Click here to view code image
1. <section class="row">
2. <div class="container">
4. <table>
5. <thead>
6. ...
7. </thead>
8. <tbody>
9. ...
10. </tbody>
11. </table>
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:
Click here to view code image
1. /*
2. ========================================
3. Schedule
4. ========================================
5. */
7. table {
8. margin-bottom: 44px;
Search WWH ::

Custom Search