html里table属性值,html——table标签属性总结

table标签属性

table标签

border

border标签属性：设定围绕表格的边框的宽度：

table

1	1	1
1	1	1
1	1	1

border标签属性不仅设置围绕表格边框的宽度，还为每个单元格添加宽度为1px的边框

实际开发中不建议使用border标签属性实现边框效果，建议通过为table、th和td设定border样式属性实现，如下代码

table

table{

border: 1px solid black;

}

td{

border: 1px solid black;

}

1	1	1
1	1	1
1	1	1

width

由于这里表格过于紧凑，所以可以设置table的宽度,在样式属性中添加width设置为50%

table{

width: 50%;

border: 1px solid black;

}

td{

border: 1px solid black;

}

border-spacing

上面的表格中存在每个单元格和外面的边框是分离的，这样实现不太美观。

可以使用border-spcing属性把这两个边框的距离设置为0。

table{

border-spacing: 0;

width: 50%;

border: 1px solid black;

}

td{

border: 1px solid black;

}

border-collapse

这里设置了border-spacing为0之后表格边框是里面单元格和外面边框的宽度之和，可以使用border-collapse来设置

table{

border-collapse: collapse;

border-spacing: 0;

width: 50%;

border: 1px solid black;

}

td{

border: 1px solid black;

}

结果

margin

上面的表格默认实在页面的左上角的所以这里可以使用margin属性把table表格设置居中

table{

margin: 0 auto;

border-collapse: collapse;

border-spacing: 0;

width: 50%;

border: 1px solid black;

}

td{

border: 1px solid black;

}

tr标签

height

可以设置一行的高度

table{

border: 1px solid black;

width: 50%;

margin: 0 auto;

border-spacing: 0;

border-collapse: collapse;

}

tr{

height: 50px;

}

td{

border: 1px solid black;

}

background-color

设置一行的背景颜色

table{

border: 1px solid black;

width: 50%;

margin: 0 auto;

border-spacing: 0;

border-collapse: collapse;

}

tr{

height: 50px;

background-color:aquamarine ;

}

td{

border: 1px solid black;

}

text-align

设置表格每行的对其方式

table{

border: 1px solid black;

width: 50%;

margin: 0 auto;

border-spacing: 0;

border-collapse: collapse;

}

tr{

height: 50px;

background-color:aquamarine ;

text-align: center;

}

td{

border: 1px solid black;

}

vertical-align

设置了高度之后，可以设置文本的位置

table{

border: 1px solid black;

width: 50%;

margin: 0 auto;

border-spacing: 0;

border-collapse: collapse;

}

tr{

height: 50px;

background-color:red ;

text-align: center;

vertical-align: top;

}

td{

border: 1px solid black;

}

td标签

和tr标签类似

合并单元格

合并行单元格rowspan

合并第二行和第三行的第一列单元格

1	1	1
1	1	1
	1	1

结果

合并列单元格colspan

合并第一行的三列单元格

1
1	1	1
	1	1

结果

标签：collapse,solid,标签,1px,html,black,table,border

来源： https://blog.csdn.net/qq_35302939/article/details/90291248