：表格脚注元素

此示例演示了一个表格，该表格被划分为一个包含列标题的表头部分、一个包含表格主要数据的表体部分以及一个汇总某一列数据的表脚部分。

HTML

、 和 元素用于将基本表格构建成具有语义意义的部分。 元素表示表格的表脚部分，其中包含一行 ()，表示“学分”列中值的计算平均值。

为了将表脚中的单元格分配到正确的列，在 元素上使用 colspan 属性，使行标题单元格跨越前三个表格列。表脚中的单个数据单元格 () 会自动放置在正确的位置，即第四列，省略的 colspan 属性值默认为 1。此外，在表脚中的标题单元格 () 上将 scope 属性设置为 row，明确定义此表脚标题单元格与同一行内的表格单元格相关联，在本例中，是表脚行中包含计算平均值的一个数据单元格。

html

CSS

一些基本的 CSS 用于设置表脚的样式并突出显示它，以便表脚单元格在表格主体中的数据中脱颖而出。

csstfoot {

border-top: 3px dotted rgb(160 160 160);

background-color: #2c5e77;

color: #fff;

}

tfoot th {

text-align: right;

}

tfoot td {

font-weight: bold;

}

thead {

border-bottom: 2px solid rgb(160 160 160);

background-color: #2c5e77;

color: #fff;

}

tbody {

background-color: #e4f0f5;

}

table {

border-collapse: collapse;

border: 2px solid rgb(140 140 140);

font-family: sans-serif;

font-size: 0.8rem;

letter-spacing: 1px;

}

th,

td {

border: 1px solid rgb(160 160 160);

padding: 8px 10px;

}

tr > td:last-of-type {

text-align: center;

}

结果