文章目录

HTML 表格标题垂直表格标题对齐表格标题多列标题HTML 表格内边距和间距HTML 表格 - 单元格间距HTML 表格 Colspan 和 RowspanHTML 表格样式水平分隔线可悬停表格总结

HTML 表格标题

HTML 表格可以有每列或每行的标题，也可以有多个列/行的标题。

表格标题由 th 元素定义。每个 th 元素代表一个表格单元格。

示例

<code><table>

<tr>

<th>Firstname</th>

<th>Lastname</th>

<th>Age</th>

</tr>

<tr>

<td>Jill</td>

<td>Smith</td>

<td>50</td>

</tr>

<tr>

<td>Eve</td>

<td>Jackson</td>

<td>94</td>

</tr>

</table>

垂直表格标题

要使用第一列作为表格标题，请将每行的第一个单元格定义为 <th> 元素：

示例

<table>

<tr>

<th>Firstname</th>

<td>Jill</td>

<td>Eve</td>

</tr>

<tr>

<th>Lastname</th>

<td>Smith</td>

<td>Jackson</td>

</tr>

<tr>

<th>年龄</th>

<td>94</td>

<td>50</td>

</tr>

</table>

对齐表格标题

默认情况下，表格标题为粗体且居中：

要左对齐表格标题，请使用 CSS text-align 属性：

示例

th {

text-align: left;

}

多列标题

可以有一个跨越两列或更多列的标题。

为此，请在 <code><th> 元素上使用 colspan 属性：

示例

<table>

<tr>

<th colspan="2">姓名</th>code>

<th>年龄</th>

</tr>

<tr>

<td>Jill</td>

<td>Smith</td>

<td>50</td>

</tr>

<tr>

<td>Eve</td>

<td>Jackson</td>

<td>94</td>

</tr>

</table>

表格标题

您可以添加一个标题作为整个表格的标题。

<code><table>

<tr>

<th colspan="2">Name</th>code>

<th>Age</th>

</tr>

<tr>

<td>Jill</td>

<td>Smith</td>

<td>43</td>

</tr>

<tr>

<td>Eve</td>

<td>Jackson</td>

<td>57</td>

</tr>

</table>

注意：colspan 属性的值表示要跨越的列数。

要使单元格跨越多行，请使用 rowspan 属性：

<code><table>

<tr>

<th>Name</th>

<td>Jill</td>

</tr>

<tr>

<th rowspan="2">Phone</th>code>

<td>555-1234</td>

</tr>

<tr>

<td>555-8745</td>

</tr>

</table>

注意：rowspan 属性的值表示要跨越的行数。

HTML 表格样式

<code>tr:nth-child(even) {

background-color: #D6EEEE;

}

注意：如果您使用 (odd) 而不是 (even)，样式将出现在第 1、3、5 行等，而不是第 2、4、6 行等。

HTML 表格 - 垂直斑马条纹

要制作垂直斑马条纹，请为每隔一列设置样式，而不是每隔一行设置样式。

为表格数据元素设置 :nth-child(even)，如下所示：

示例

<code>td:nth-child(even), th:nth-child(even) {

background-color: #D6EEEE;

}

注意：如果要在标题和常规表格单元格上都使用样式，请将 :nth-child() 选择器放在 th 和 td 元素上。

组合垂直和水平斑马条纹

您可以组合上述两个示例中的样式，这样每隔一行和每隔一列就会有条纹。

如果您使用透明颜色，您将获得重叠效果。

使用 rgba() 颜色指定颜色的透明度：

示例

<code>tr:nth-child(even) {

background-color: rgba(150, 212, 212, 0.4);

}

th:nth-child(even),td:nth-child(even) {

background-color: rgba(150, 212, 212, 0.4);

}

水平分隔线

如果仅在每个表格行的底部指定边框，则将获得带有水平分隔线的表格。

将 border-bottom 属性添加到所有 tr 元素以获取水平分隔线：

示例

<code>tr {

border-bottom: 1px solid #ddd;

}

可悬停表格

使用 tr 上的 :hover 选择器在鼠标悬停时突出显示表格行：

示例

<code>tr:hover { background-color: #D6EEEE;}

总结

本文介绍了的html表格使用，如有问题欢迎私信和评论