table标签属性
table标签
border
border标签属性:设定围绕表格的边框的宽度:
table1 | 1 | 1 |
1 | 1 | 1 |
1 | 1 | 1 |
border标签属性不仅设置围绕表格边框的宽度,还为每个单元格添加宽度为1px的边框
实际开发中不建议使用border标签属性实现边框效果,建议通过为table、th和td设定border样式属性实现,如下代码
tabletable{
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