Introduction

In this tutorial, you will recreate the “Education” section and “Skills” section (or fifth section) of the demonstration website using HTML tables and CSS classes. Feel free to switch out Sammy’s information with your own if you wish to personalize your website. The methods you use here can be applied to other CSS/HTML website projects.

To build these sections, you’ll create a CSS class that styles two equal-sized content boxes that can fit side by side on the webpage. You’ll then add a table inside each box where you will add text content.

Prerequisites

To follow this tutorial, make sure you have set up the necessary files and folders as instructed in a previous tutorial in this series How To Set Up You CSS and HTML Practice Project.

Creating and Styling Two Equal-Sized Tables

First, copy and paste the following code snippet at the bottom of your styles.css file:

styles.css

. . .

/* Fifth section */

.column-2a {
  float: left;
  width: 45%;
  padding: 40px;
  padding-left:70px;
  padding-right: 70px;
  padding-bottom:60px;
  height:450px;
  margin:30px;
  margin-right:30px;
  margin-bottom: 40px;
  background-color:white;
}

Copy

This code snippet creates the class column-2a, which is like the column-2 class you created to style the “About” section in a previous tutorial in this series, except that its height property is set to 450px. If you change the amount of content in this box, you may need to adjust the height accordingly, otherwise it may overflow or be cut off. If you want to learn more about the other declarations, please review the previous sections in this tutorial series on setting the sizes of content, padding, and margins.

Save the styles.css file before you proceed.

Next, return to the index.html file and paste the following code snippet after the last closing </div> tag:

index.html

. . .

<!--Section 5: Education and Skills-->

<div class="column-2a">
  <h2>Education</h2>
    <table class="table-style">
      <tr>
        <td>Barnacle Bootcamp</td>
        <td>2020</td>
      </tr>
      <tr>
        <td>Seaweed University</td>
        <td>2019-2020</td>
      </tr>
      <tr>
        <td>Highwater High School</td>
        <td>2018-2019</td>
      </tr>
      <tr>
        <td>Middle-Sized Pond Middle School</td>
        <td>2017-2018</td>
      </tr>
      <tr>
        <td>Minnow Elementary School</td>
        <td>2016-2017</td>
      </tr>
      <tr>
        <td>Phytoplankton Preschool</td>
        <td>2015-2016</td>
      </tr>
    </table>
</div>

#css