CSS中的table样式及用法解析

CSS中的table样式是一种用来定义表格的样式的CSS语法，可以用来定义表格的宽度、高度、边框、对齐方式、表头、单元格、行和列等。

1. table宽度和高度

可以使用width和height属性来定义表格的宽度和高度，可以使用百分比或像素来定义。

table {
  width: 100%;
  height: 200px;
}

2. 表格边框

可以使用border属性来定义表格的边框，可以使用border-style、border-width和border-color属性来定义边框的样式、宽度和颜色。

table {
  border: 1px solid #ccc;
  border-style: dotted;
  border-width: 2px;
  border-color: #f00;
}

3. 表格对齐方式

可以使用text-align和vertical-align属性来定义表格中文本的水平对齐方式和垂直对齐方式，可以使用left、right、center和justify等值来定义水平对齐方式，可以使用top、middle、bottom等值来定义垂直对齐方式。

table {
  text-align: center;
  vertical-align: middle;
}

4. 表头

可以使用thead元素来定义表头，可以使用th元素来定义表头单元格，可以使用rowspan和colspan属性来定义表头单元格的行跨度和列跨度。

  
    编号
    姓名
    年龄
  
  
    姓
    名
  

5. 表格单元格

可以使用td元素来定义表格单元格，可以使用rowspan和colspan属性来定义表格单元格的行跨度和列跨度。

  1
  张
  三
  20


  李
  四

6. 表格行

可以使用tr元素来定义表格行，可以使用rowspan和colspan属性来定义表格行的行跨度和列跨度。

  1
  张三
  20


  2
  李四
  21

7. 表格列

可以使用col元素来定义表格列，可以使用span属性来定义表格列的跨度。

  1
  张三
  20


  2
  李四
  21

8. 表格背景

可以使用background-color属性来定义表格的背景颜色，可以使用background-image属性来定义表格的背景图片。

table {
  background-color: #f00;
  background-image: url('bg.jpg');
}

9. 其他样式

除了上面介绍的样式，还可以使用其他样式，如padding、margin、border-spacing、border-collapse等样式，来定义表格的外观和表现。

table {
  padding: 10px;
  margin: 10px;
  border-spacing: 10px;
  border-collapse: separate;
}

千锋教育是高品质web前端培训机构，千锋教育拥有大量实力web前端培训讲师，提供优质的web培训课程，web前端培训，欢迎报名千锋教育。