如何使用CSS将您的教育历史和技能添加到您的网站（第5节）

介绍

在本教程中，您将使用 HTML 表格和 CSS 类重新创建演示网站的“教育”部分和“技能”部分（或第五部分）。如果您希望个性化您的网站，请随时使用您自己的信息切换 Sammy 的信息。您在此处使用的方法可以应用于其他 CSS/HTML 网站项目。

要构建这些部分，您将创建一个 CSS 类来设置两个大小相等的内容框，这些内容框可以并排放置在网页上。然后，您将在每个框中添加一个表格，您将在其中添加文本内容。

先决条件

要学习本教程，请确保您已按照本系列如何设置 CSS 和 HTML 练习项目中的前一个教程中的说明设置了必要的文件和文件夹。

创建两个大小相同的表格并为其设置样式

首先，将以下代码片段复制并粘贴到 styles.css 文件的底部：

样式.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;
}

此代码片段创建了类 column-2a，它类似于您在本系列的上一个教程中创建用于设置“关于”部分样式的 column-2 类，除了它的height 属性设置为 450px. 如果更改此框中的内容量，可能需要相应调整高度，否则可能溢出或被截断。如果您想了解有关其他声明的更多信息，请查看本教程系列中有关设置 content、padding 和 margins 的大小的前面部分。

在继续之前保存 styles.css 文件。

接下来，返回 index.html 文件并在最后一个关闭 </div> 标记之后粘贴以下代码片段：

索引.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>

此代码片段使用“column-2a”类创建一个列，并插入一个使用上一教程中创建的 table-style 类样式的表格。在表格内，您放置了教育历史内容。 <tr> 标签打开一个表 row，其中插入了以下三组表 data（用 <td> 标签标记）。要了解有关 HTML 表格如何工作的更多信息，请访问我们的教程如何使用 HTML 创建表格

保存文件并重新加载浏览器以检查表格是否正确显示。您应该有如下屏幕截图所示的表格：

接下来，您将添加列出 Sammy 技能的第二个表。返回到 index.html 文件并在最后一个关闭 </div> 标记之后粘贴以下代码片段：

索引.html

. . .

  <div class="column-2a">
     <h2>Skills</h2>
    <table class="table-style">
      <tr>
        <td>Social Media</td>
        <td>⭐⭐⭐⭐⭐</td>
      </tr>
      <tr>
        <td>Public Speaking</td>
        <td>⭐⭐⭐⭐⭐</td>
      </tr>
      <tr>
        <td>Internet Ethics Ambassador</td>
        <td>⭐⭐⭐⭐</td>
      </tr>
      <tr>
        <td>Content production</td>
        <td>⭐⭐⭐⭐⭐</td>
      </tr>
      <tr>
        <td> HTML</td>
        <td>⭐⭐⭐</td>
      </tr>
      <tr>
        <td> CSS</td>
        <td>⭐⭐⭐</td>
      </tr>
    </table>
  </div>

此代码片段的工作方式与前面的代码片段完全相同：它使用 column-2a 类创建一个列，并插入一个以 table-style 类为样式的表格。请注意，您正在使用表情符号来创建星形图像。您可以将任何表情符号用作 HTML 文本内容。

保存文件并重新加载浏览器以检查表格是否正确显示。您现在应该有两个并排显示的表格，如本教程开头的图像所示。

结论

您现在已经使用样式表添加了文本内容。您可以尝试调整大小并添加行和列，以针对不同目的自定义表格。在下一个教程中，您将在您的网站上创建一个带有大型特色报价的内容框。