一、表格元素
表格元素()有4个可选的组成部分,即标题()、表身()和表注()。其中标题元素内可放置文本,表头、表身和表注元素内则放置单元行(),单元行内包括若干个单元格,单元格可分为普通单元格()、表头()与标题单元格()两种,原则上每个单元行中的单元格数量应该一致。
1.table的属性
(1)border属性
border属性表示表格边框的宽度,默认值为0,即没有边框。注意,该属性会传播给表格中的所有单元格。
(2)width属性和height属性
width属性和height属性可以用来控制表格的宽和高,如果不设置这两个属性,表格会根据单元格的内容自动决定宽和高。如果需要设置,宽和高的单位可以是像素或百分比。当单位为百分比时,这个百分比是相对于表格所在容器(表格所在容器并非总是浏览器窗口)的百分比,如果所在容器的大小发生了改变,表格的大小也会重新调整。
(3)align属性
align属性可以设置表格的对齐方式,可选值为left、center、right,默认为left。注意:align属性不会影响单元格内文字的对齐方式。
(4)bgcolor属性与background属性
bgcolor属性表示表格的背景***ackground属性表示表格的背景图像,应为图片文件的地址,浏览器会以平铺的方式使用此图片填充表格。
(5)cellspacing属性与cellpadding属性
cellspacing属性控制相邻单元格之间的间距,cellpadding属性控制单元格内部文字与边框的边距。
2.tr元素的属性
(1)height属性
height属性用于设置单元行的高度,单位可以是像素或百分比;如果单位是百分比,则是相对于表格高度的百分比。注意:tr元素没有width属性。
(2)bgcolor属性
bgcolor属性用于设置单元行的背景色,如果表格已经设置了背景色或背景图片,tr元素中的设置会覆盖表格的设置。
(3)align属性与valign属性
align属性设置本单元行中所有单元格的水平对齐方式,可选值为left、center、right;valign属性设置本单元行中所有单元格的垂直对齐方式,可选值为top、middle、bottom。
3.td/th元素的属性
(1)width属性
width属性用于设置单元格的宽度,单位可以是像素或百分比,如果单位是百分比,则是相对于表格宽度的百分比。虽然td元素有height属性,但浏览器始终会将同一单元行中高度最高的单元格高度作为所有单元格的统一高度。
(2)align属性与valign属性
单元格也支持align与valign属性,当单元格的设置与单元行设置冲突时,优先使用单元格的设置。
(3)bgcolor属性
bgcolor属性用于设置单元格的背景色,会覆盖表格或单元行的设置。
(4)colspan属性
colspan属性用于合并同一行中的单元格,属性值为合并的数量(最小为2)
(5)rowspan属性
rowspan属性用于合并同一列中的单元格,属性值为合并的数量(最小为2)
使用表格进行页面布局
表格在网页设计中的另一个用途是用来对页面内容进行排版、布局,因为表格可以将页面整齐地分为若干个部分,所以经常利用表格的这一特性,通过表格嵌套、单元格合并等技巧对页面进行布局