CSS表格

表格

.html

 
 
 
 
 
 
 
 
 
 


















 
 
name
 
age
 
gender
 
 
 
mike
 
20
 
men
 
 
tom
 
15
 
men
 
 
 
lorra
 
25
 
women
 
 
 
 

image

关键语句

,border设置了表格的边框

表格属性

属性	描述
border-collapse	设置是否把表格边框合并为单一的边框。
border-spacing	设置分隔单元格边框的距离。
caption-side	设置表格标题的位置。
empty-cells	设置是否显示表格中的空单元格。
table-layout	设置显示单元、行和列的算法。

折叠边框 border-collapse

值	描述
separate	默认值。边框会被分开。不会忽略 border-spacing 和 empty-cells 属性。
collapse	如果可能，边框会合并为一个单一的边框。会忽略 border-spacing 和 empty-cells 属性。
inherit	规定应该从父元素继承 border-collapse 属性的值。

为表格设置合并边框模型：

 table{
 border-collapse: collapse;
 }

image

可以看到边框时一条线而不是上面的两条线

表格宽度和高度 / 表格文本对齐

.css

 td{
 width: 200px;
 height: 50px;
 text-align: center;
 }

[图片上传失败...(image-d9358e-1566288471528)] 表格内边距

.css

 td{
 padding:15px;
 }
 ​

字母头间距缩进

表格颜色

.css

 tr {
 background-color: green;
 color: white;
 }

image