表格默认是没有边框的,因此,我们在设置表格格式的时候,首先要设置的是表格边框的样式,也就是
table{ border-style:solid;}
设置完表格表格的样式之后,可以设置表格边框的粗细程度和颜色,通过下面两条代码
table{ /*设置表格的边框样式*/ border-style:solid; /*设置表格的边框颜色*/ border-color:red; /*设置表格的边框大小*/ border-width:1px;}
设置完成之后,我们可以看一下效果,这个效果设置的仅仅是整个表格的外边框,因为我们这里选择的标签选择器是table
table代表的当然就是整个表格的外边框,除了这个外边框之外还有表格每个数据单元,每行的格式。如果需要设置全边框,使用下列代码:
table,td,th{ /*设置表格的边框样式*/ border-style:solid; /*设置表格的边框颜色*/ border-color:black; /*设置表格的边框大小*/ border-width:2px;}
标签选择器用逗号隔开,表示的是并列的关系,表示既设置table标签的格式,又设置表格数据单元格td(table data cell)的格式,又设置表头th(table header)的格式。
PS:我们这里并没有设置行tr(table row)的格式。因为设置行的格式根本就没有用。
还有我们注意到这一点,发现表格的边框和单元格的边框是分开的,并且中间有一定的缝隙。那么我们如何去掉这个边框,让它变成像EXCEL表格里面那样的表格格式呢?
table,td,th{ /*设置表格的边框样式*/ border-style:solid; /*设置表格的边框颜色*/ border-color:black; /*设置表格的边框大小*/ border-width:2px; /*设置表格与数据单元的边框线重合*/ border-collapse: collapse;}
collapse这个单词是塌方的意思...
设置了collapse这个属性之后,我们可以看到表格的边框和表格数据单元格的边框重合了。
当然我们也可以分开设置表头的格式。
另外还可以使用
width设置表格宽度
height设置表格高度
text-align设置表格中文字居中,向左,向右。
background-color设置表格背景等等。