如何使用CSS将简历或工作经历部分添加到您的网站（第4部分）

介绍

在本教程中，您将使用 HTML 表格和 CSS 类重新创建演示网站（或第四部分）的“就业”部分。如果您想个性化尺寸，请随意切换 Sammy 的信息。您在此处使用的方法可以应用于其他 CSS/HTML 网站项目。

要构建此部分，您将添加部分标题并设置样式，添加宽列并设置样式，并在列内添加 HTML 表并设置样式。

先决条件

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

创建分节符和节标题

首先，创建一个类，在前面的“项目”部分和这个“就业”部分的内容之间添加空间。将以下 CSS 注释和 CSS 规则集添加到 styles.css 文件的底部：

样式.css

. . .

/* Section 4 */

/* Add space between sections */
.section-break {
  margin:50px;
  height:500px;
}

在此代码片段中，您添加了一个 CSS 注释标记“第 4 节”的 CSS 规则集，以及一个解释 section-break 类用途的 CSS 注释。您将在 index.html 文件中将此类分配给一个空的 <div>，这将赋予它 500 像素的高度和 50 像素的边距。尽管 <div> 将是不可见的，但它的高度将通过将后续内容推到页面下方 500 像素来充当分节符。

返回到您的 index.html 文件并添加以下代码片段：

索引.html

. . .

<!--Section 4: Employment—>
  
<div class="section-break"> </div>
<h2 class="section-heading">Experience</h2>

此代码片段添加了一个 HTML 注释来标记用于网站第四部分的 HTML 代码，并添加了一个 <div> 容器，该容器分配了您刚刚创建的 section-break 类。 The code snippet also adds the “Experience” section heading and styles it using the class section-heading that you created in the previous tutorial [How To Build a Tiled Layout With CSS] (how-to-build-a-tiled-layout-with-css-section-3).

注意：如果你没有跟着这个教程系列，你可以通过添加以下内容将section-heading类添加到你的styles.css文件中文件底部的代码片段：

样式.css

. . .
.section-heading {
  text-align:center;
  color:#102C4E;
  margin-top: 150px;
  margin-bottom:70px;
  font-size: 35px;
}

保存您的 index.html 文件并将其加载到浏览器中。您现在应该在分节符之后有一个名为“经验”的节标题：

为宽列和表格设置样式

接下来，您将创建类，这些类将允许您设置宽的白色列和将放置在其中的表格的样式。在 styles.css 文件的底部添加以下代码片段：

样式.css

. . .

/* Wide column */
.column-1 {
  width: 90%;
  height: auto;
  padding-top:70px;
  padding-left:70px;
  padding-bottom:70px;
  margin:auto;
  margin-bottom:50px;
  margin-top: 75px;
  background-color:white;
}

/* Table formatting */
.table-style {
  width:100%;
  border-spacing: 24px;
}

在第一个规则集中，您为类 column-1 声明了许多样式规则。请注意，您已以百分比指定 width，以便列将根据视口的宽度改变大小。您已将 height 指定为 auto，这将允许表格根据您放置在其中的 HTML 内容的高度需要调整其高度。您还创建了一个规则来使 <div> 的背景颜色分配给这个类 white。

如果您想了解有关此规则集中其他声明的更多信息，请查看本教程系列中有关设置 content、padding 和 margins 的大小的前面部分[ X207X]。

在第二个规则集中，您定义了类 table-style 并声明了许多规则。 width:100% 声明使表格的宽度占据了它所在容器的整个宽度，这将是您正在创建的宽列。 border-spacing:24px; 声明在表格的单元格之间放置了 24 像素的空间，允许表格的内容占据列的宽度。如果您不包含此规则，则每个表格单元格将更加靠近。

添加列和表

现在您要将列和表添加到 HTML 文件中。保存您的 styles.css 文件，返回到 index.html 文件并在 HTML 代码行 <h2 class="section-heading">Experience</h2> 下方添加以下代码片段：

索引.html

. . .

<div class="column-1">
  <h2>Employment</h2>
  <table class="table-style"> 
    <tr>
      <td>Freelance designer</td>
      <td>Seven Seas</td>
      <td>2015-present</td>
   </tr>
    <tr>
      <td>Associate Sea Creature</td>
      <td>Small Pond Productions</td>
      <td>2019-2020</td>
   </tr>
   <tr>
      <td>Associate Surfer</td>
      <td>Open Watery Web</td>
      <td>2018-2019</td>
   </tr>
   <tr>
      <td>Open Web Advocate</td>
      <td>Kiddie Pool Kubernetes</td>
      <td>2017-2018</td>
   </tr>
   <tr>
      <td>Assistant Shark</td>
      <td>Small Pond Pictures</td>
      <td>2016-2017</td>
   </tr>
  </table>
 </div>
</div>

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

保存这两个文件并在浏览器中重新加载您的网页。您的网页现在应该有一个宽列，其中包含一个四行三列的表格，如本教程开头所示。

请注意，前三个 <td> 元素插入在 <tr> 标记的第一个开始和结束集之间。您可以使用相同的表格行和数据格式继续添加行，并且列的高度将相应调整，因为您已将 column-1 类的 height 设置为 auto。或者，您可以通过在 <tr> 行内添加 <td> 元素来添加其他列。

结论

您现在已经使用 CSS 创建并设置了表格样式，以在结构化布局中显示就业历史内容。尝试调整大小并添加行和列，以针对不同目的自定义表格。在下一个教程中，您将通过为“教育”和“技能”创建表格来继续探索表格布局的可能性。