对于table来说,在一些小的模块中进行表格布局是非常好用的。我们可以这样来理解table,主要分成table部分和td部分。
花垣网站制作公司哪家好,找创新互联!从网页设计、网站建设、微信开发、APP开发、响应式网站设计等网站项目制作,到程序开发,运营维护。创新互联于2013年成立到现在10年的时间,我们拥有了丰富的建站经验和运维经验,来保证我们的工作的顺利进行。专注于网站建设就选创新互联。table部分:
主要是来控制外边框的(就是最外面一层边框,不包括里面部分),它拥有的属性为:margin属性,border属性,cellspacing属性,规定单元格之间的空白cellpadding属性,规定单元边沿与其内容之间的空白。
tr部分:
主要来分割有几行,一般只需要用来设定heigth。
td部分:
用来控制每个单元格的属性,可是分别控制每个单元格的上下左右边框,其中也包含padding属性。
th部分:
用法和td相同,只是用来区分表头的。
注意:
用百分比和用像素点是相同的。在table中,width指的是整个表格的宽度,而td的width值得指内部不包括内容content的宽度,这个同盒子模型。
以下用实例来说明table的一些常用布局手法:
11111111111111111111111 | 2 | 3 |
4 | 5 | 6 |
7 | 8 | 9 |
10 | 11 | 12 |
11111111111111111111111 | 2 | 3 |
4 | 5 | 6 |
7 | 8 | 9 |
10 | 11 | 12 |
注释:
border 设置所有边框的属性值 border=1 数值越小边框越细
bordercolor =”red” 指的是边框颜色为10
cellpadding :规定单元边沿与其内容之间的空白.,数值越大表格越大. (表格填充,用于隔开单元格与单元格的空间)
(图1)
cellspacing=8 单元格与单元格之间的空隙距离.把表格想象成用铁丝做的一个框,cellspacing的属性值就相当于是用8格像素的厚度做的表格.(如图1)
th:定义表头,可以用来合并单元格 比如把第二行,第二三列合并.
11111111111111111111111 | 2 | 3 |
4 | 合并单元格 | |
---|---|---|
7 | 8 | 9 |
10 | 11 | 12 | 10 | 那最后一列就由3列变为4列
11111111111111111111111 | 2 | 3 |
4 | 合并单元格 | |
---|---|---|
7 | 8 | 9 |
10 | 11 | 12 |
11111111111111111111111 | 2 | 3 |
4 | 合并单元格 | |
合并列 | 8 | 9 |
11 | 12 | |
11111111111111111111111 | 2 | 3 |
4 | 合并单元格 | |
合并列 | 8 | 9 |
11 | 12 | 10 | 删掉的情况