对于table来说,在一些小的模块中进行表格布局是非常好用的。我们可以这样来理解table,主要分成table部分和td部分。
table部分:
主要是来控制外边框的(就是最外面一层边框,不包括里面部分),它拥有的属性为:margin属性,border属性,cellspacing属性,规定单元格之间的空白cellpadding属性,规定单元边沿与其内容之间的空白。
tr部分:
主要来分割有几行,一般只需要用来设定heigth。
td部分:
用来控制每个单元格的属性,可是分别控制每个单元格的上下左右边框,其中也包含padding属性。
th部分:
用法和td相同,只是用来区分表头的。
注意:
用百分比和用像素点是相同的。在table中,width指的是整个表格的宽度,而td的width值得指内部不包括内容content的宽度,这个同盒子模型。
以下用实例来说明table的一些常用布局手法:
用来colgroup控制表格中各个框的宽度:(这样可以降低table中代码的耦合度)
【table代码】
11111111111111 | 2 | 3 |
4 | 5 | 6 |
7 | 8 | 9 |
10 | 11 | 12 |
【table_1】
.table_1{
width:300px;
height:300px;
border:3px solid #000;
}
.table_1 td{
border:1px solid red;
}
说明:
table_1这种情况下,给tr加上border属性是没有作用的,所有的border样式都由最外层的table和最内层的td来控制,我们
可以清楚的看到,最外层是4个像素,来源为table的3个像素和td边框的一个像素,而内部都是两个像素,是相邻的两个td组成的。
图片:
【table_2】
.table_2{
width:300px;
height:300px;
border:2px solid #000;
border-collapse: collapse;
}
.table_2 tr{
border:1px solid red;
}
说明:
table_2这种情况下,给tr加上border是有作用的,td没有border,而只给tr加上border会出现没有竖线的效果,这里面有一个
关键的样式:border-collapse: collapse;这个属性的另一个取值为separate,是缺省值。并且这个属性使得所有的边框全都
合并,border的宽度已最宽的为主,加上这个属性可以写出边框处处1的效果。
图片:
【table_3】
.table_3{
width:300px;
height:300px;
border:2px solid #000;
border-collapse: collapse;
text-align:center;
table-layout: fixed
}
.table_3 td{
border:1px solid red;
}
说明:
table-layout: fixed,这个属性的作用:
在固定表格布局中,水平布局仅取决于表格宽度、列宽度、表格边框宽度、单元格间距,而与单元格的内容无关。
也就是说,没有这个属性的时候,表格的水平布局是和内部内容有关的,就算是将表格中一个单元格的宽度设置为30盘px,
如果内容的宽度大于30px,那么宽度还是拉伸的。在这个属性的下,如果每个单元格都不设置宽度,那么所有的单元格平分table
的总宽度,就算是单元格的内容宽度超出的现有的宽度,单元格也不会拉伸。
这个属性的取值还有一个:automatic,当然这个属性也是缺省的。
图片: