css table格式

半生风雪沾青衣 6个月前 145浏览 0评论

CSS 中的表格格式允许我们通过样式化 HTML 表格的属性和元素来更好地控制和呈现表格。

在 CSS 中,表格通常由三个主要的样式属性控制,即:

  • border: 表格边框的线条属性;
  • padding: 单元格的内边距大小;
  • margin: 单元格之间的间距大小。

同时还有以下一些常用属性:

  • text-align: 单元格中的文本对齐方式;
  • background-color: 单元格的背景颜色;
  • color: 单元格中的文本颜色;
  • font-weight: 单元格中的文本粗细;
  • font-size: 单元格中的字体大小。

下面是一个使用以上属性的示例代码:

table {
  border: 1px solid #555;
  border-collapse: collapse;
}

th, td {
  padding: 10px;
  text-align: center;
}

th {
  background-color: #5DA5DA;
  color: #fff;
  font-weight: bold;
}

td {
  background-color: #FAA43A;
  color: #fff;
  font-size: 16px;
}

td:first-child {
  margin-right: 10px;
}

该示例代码中,我们首先使用 table 选择器控制整个表格的边框样式;

随后,使用 thtd 选择器控制表头和表格数据的单元格样式,以及其中的内边距、文本对齐、背景颜色和字体粗细等因素;

最后,使用 td:first-child 选择器为每行数据的第一个单元格设置右侧的间距(这里设为 10px)。

当然,以上只是一个简单的 CSS 表格格式示例,根据实际需求和设计要求,我们可以自由发挥和调整表格样式。