简介
在本教程中，您将使用 HTML 表格和 CSS 类重新创建演示网站 的 "教育 "部分和 "技能 "部分（或第五部分)。如果你想个性化自己的网站，可以随意用自己的信息替换 Sammy 的信息。您在这里使用的方法也可用于其他 CSS/HTML 网站项目。
示范网站的教育和技能部分](assets/how-to-build-a-website-with-css/edu-skills-section.png)
要创建这些部分，您需要创建一个 CSS 类，为两个大小相等的内容框设置样式，使其可以并排放在网页上。然后在每个框内添加一个表格，并在其中添加文本内容。
先决条件
要学习本教程，请确保您已按照本系列教程如何设置 CSS 和 HTML 练习项目中的说明设置了必要的文件和文件夹。
创建两个大小相等的表格并调整其样式
首先，将以下代码段复制并粘贴到 styles.css 文件底部：
1[label styles.css]
2. . .
3
4/* Fifth section */
5
6.column-2a {
7 float: left;
8 width: 45%;
9 padding: 40px;
10 padding-left:70px;
11 padding-right: 70px;
12 padding-bottom:60px;
13 height:450px;
14 margin:30px;
15 margin-right:30px;
16 margin-bottom: 40px;
17 background-color:white;
18}
此代码片段创建了column-2a类，它与本系列上一篇教程中为样式化 "关于 "部分而创建的column-2类相似，不同之处在于其高度属性被设置为450px。如果更改此框中的内容数量，可能需要相应调整高度，否则它可能会溢出或被截断。如果您想了解有关其他声明的更多信息，请查看本教程系列中有关设置 content、[padding](https://andsky.com/tech/tutorials/how-to-understand-the-css-box-model how-to-adjust-the-padding-size-of-an-html-element-with-css) 和 margins 大小的前几节内容。
保存 styles.css 文件后再继续。
接下来，返回到 index.html 文件，在最后一个关闭的 </div> 标记后粘贴以下代码片段：
1[label index.html]
2. . .
3
4<!--Section 5: Education and Skills-->
5
6<div class="column-2a">
7<h2>Education</h2>
8 <table class="table-style">
9 <tr>
10 <td>Barnacle Bootcamp</td>
11 <td>2020</td>
12 </tr>
13 <tr>
14 <td>Seaweed University</td>
15 <td>2019-2020</td>
16 </tr>
17 <tr>
18 <td>Highwater High School</td>
19 <td>2018-2019</td>
20 </tr>
21 <tr>
22 <td>Middle-Sized Pond Middle School</td>
23 <td>2017-2018</td>
24 </tr>
25 <tr>
26 <td>Minnow Elementary School</td>
27 <td>2016-2017</td>
28 </tr>
29 <tr>
30 <td>Phytoplankton Preschool</td>
31 <td>2015-2016</td>
32 </tr>
33 </table>
34</div>
此代码片段使用 "column-2a "类创建了一个列，并插入了一个使用上一个教程中创建的 "table-style "类样式的表格。在表格中，您放置了教育历史内容。标签 <tr> 打开了一个表格_row_，在其中插入了以下三组表格数据_data_（用标签 <td> 标记)。要进一步了解 HTML 表格的工作原理，请访问我们的教程 如何使用 HTML 创建表格
保存文件并重新加载浏览器，检查表格是否正确显示。你应该能看到如下截图所示的表格：
包含教育内容的表格](assets/how-to-build-a-website-with-css/education-section.png)
接下来，您将添加第二个表格，列出萨米的技能。返回 index.html 文件，在最后一个关闭的 </div> 标记后粘贴以下代码段：
1[label index.html]
2. . .
3
4 <div class="column-2a">
5 <h2>Skills</h2>
6 <table class="table-style">
7 <tr>
8 <td>Social Media</td>
9 <td>⭐⭐⭐⭐⭐</td>
10 </tr>
11 <tr>
12 <td>Public Speaking</td>
13 <td>⭐⭐⭐⭐⭐</td>
14 </tr>
15 <tr>
16 <td>Internet Ethics Ambassador</td>
17 <td>⭐⭐⭐⭐</td>
18 </tr>
19 <tr>
20 <td>Content production</td>
21 <td>⭐⭐⭐⭐⭐</td>
22 </tr>
23 <tr>
24 <td> HTML</td>
25 <td>⭐⭐⭐</td>
26 </tr>
27 <tr>
28 <td> CSS</td>
29 <td>⭐⭐⭐</td>
30 </tr>
31 </table>
32 </div>
此代码片段的工作原理与前一个代码片段完全相同：使用 column-2a 类创建列，并插入一个使用 table-style 类设置样式的表格。请注意，您正在使用表情符号创建星形图像。您可以使用任何表情符号作为 HTML 文本内容。
保存文件并重新加载浏览器，检查表格是否正确显示。现在，您应该可以看到两个并排显示的表格，如本教程开头的图片所示。
结论
现在您已经使用样式表添加了文本内容。您可以尝试调整大小、添加行和列，以定制不同用途的表格。在下一个教程中，您将在网站上创建一个包含大段特色引语的内容框。