css tr th td

天上仙 6个月前 144浏览 0评论

在HTML中,我们使用表格来展示数据的时候,通常会使用、和等标签。如果要为表格添加样式的话,CSS就派上用场了。

table {
  border-collapse: collapse; /* 合并表格边框 */
}
th, td {
  border: 1px solid black; /* 表格单元格的边框样式 */
  padding: 5px; /* 表格单元格的内边距 */
}
th {
  font-weight: bold; /* 表头加粗 */
}

以上代码将给表格的单元格添加1像素的黑色边框,并设置表头加粗。

如果需要为表格中的特定单元格添加样式,还可以使用伪类选择器进行选择。

td:first-child {
  font-style: italic; /* 选择第一列单元格字体斜体 */
}
td:last-child {
  background-color: #EEEEEE; /* 选择最后一列单元格背景色 */
}

以上代码将分别为表格第一列和最后一列的单元格添加样式。

除此之外,我们还可以使用CSS将表格和文字进行对齐。

table {
  margin: 0 auto; /* 表格水平居中 */
}
th, td {
  vertical-align: middle;  /* 单元格垂直居中 */
}

以上代码将表格水平居中,并将单元格的内容垂直居中对齐。

总结一下,通过对、和等标签的样式设定,可以让HTML表格呈现不同的视觉效果,更好地达到信息展示的目的。