：表格主体元素

多个表格主体

你可以使用多个 元素来在一个表格中建立多个部分。每个部分可能包含它自己的表头或一些行；然而，每个表格里只能有一个 元素！ 由于刚才所述的原因，你需要用 填充 元素，在每个 内创建标题。让我们来看看这是怎么做到的。

让我们以前面的例子为例，在列表中增加一些学生，并更新表格，使其不再在每一行列出每个学生的专业，而是按专业分组，每个专业都有标题行。

结果

为了让你知道我们在做什么，首先在这里给出生成的表格：

HTML

改变的 HTML 看起来像这样：

html

学生 ID	姓名
计算机科学
3741255	Jones, Martha
4077830	Pierce, Benjamin
5151701	Kirk, James
俄国文学
3971244	Nim, Victor
天体物理学
4100332	Petrov, Alexandra
8892377	Toyota, Hiroko

注意，每个专业都放在了分开的 块之下，其中的第一列包含了一个带有 colspan 属性的 元素，横跨了整个表格的宽度。该标题列出了包含在 中的专业名称。

在每个专业的 下的剩余行包含两个单元格：第一个是学生的 ID，第二个是它们的名字。

CSS

table {

border: 2px solid #555;

border-collapse: collapse;

font:

16px "Lucida Grande",

"Helvetica",

"Arial",

sans-serif;

}

th,

td {

border: 1px solid #bbb;

padding: 2px 8px 0;

text-align: left;

}

thead > tr > th {

background-color: #cce;

font-size: 18px;

border-bottom: 2px solid #999;

}

大部分 CSS 代码均未改变。我们只是为直接包含在 中的表头的单元格添加了一些样式（而不是在 中）。这用于表示每个表格部分对应的主要内容的标题。

csstbody > tr > th {

background-color: #dde;

border-bottom: 1.5px solid #bbb;

font-weight: normal;

}