CSS 表格

HTML 表格对显示大量数据很有帮助，使用 CSS 能极大的改善表格的外观。

表格边框

使用 border 属性表格边框。

下面的示例为 <table> 、 <th> 和 <td> 元素指定了黑色边框：

table,
th,
td {
  border: 1px solid black;
}

上面示例中的表格具有双边框，这是因为 <table>, <th> 和 <td> 元素都有单独的边框。

要删除双边框，请看下面的示例。

表格边框重叠

使用 border-collapse 属性设置表格边框是否应重叠。

table {
  border-collapse: collapse;
}

如果您只想要表格周围的边框，只需为 <table> 指定 border 属性：

table {
  border: 1px solid black;
}

表格的宽度和高度

表格的宽度和高度由 width 和 height 属性定义。

下面的示例将表格的宽度设置为 100%，将 <th> 元素的高度设置为 70px：

table {
  width: 100%;
}

th {
  height: 70px;
}

水平对齐

使用 text-align 属性为 <th> 或 <td> 设置内容的水平对齐方式（如左对齐(left)、右对齐(right)或居中对齐(center)）。

默认情况下， <th> 元素的内容居中对齐， <td> 元素的内容左对齐。

要居中对齐 <td> 元素的内容，请使用 text-align: center ：

td {
  text-align: center;
}

垂直对齐

使用 vertical-align 属性为 <th> 或 <td> 设置内容的垂直对齐方式（如顶部(top)、底部(bottom)或中间(middle)）。

默认情况下，表格中内容的垂直对齐方式为居中（对于 <th> 和 <td> 元素）。

以下示例将 <td> 元素的垂直文本对齐设置为底部对齐：

td {
  height: 50px;
  vertical-align: bottom;
}

表格内边距

要控制表格中边框和内容之间的空白，请使用 <td> 和 <th> 元素上的 padding 属性：

th,
td {
  padding: 15px;
  text-align: left;
}

CSS 表格相关属性