表格

一、表格元素

    表格元素()有4个可选的组成部分,即标题()、表身()和表注()。其中标题元素内可放置文本,表头、表身和表注元素内则放置单元行(),单元行内包括若干个单元格,单元格可分为普通单元格()、表头()与标题单元格()两种,原则上每个单元行中的单元格数量应该一致。

1.table的属性

(1)border属性

border属性表示表格边框的宽度,默认值为0,即没有边框。注意,该属性会传播给表格中的所有单元格。

(2)width属性和height属性

width属性和height属性可以用来控制表格的宽和高,如果不设置这两个属性,表格会根据单元格的内容自动决定宽和高。如果需要设置,宽和高的单位可以是像素或百分比。当单位为百分比时,这个百分比是相对于表格所在容器(表格所在容器并非总是浏览器窗口)的百分比,如果所在容器的大小发生了改变,表格的大小也会重新调整。

(3)align属性

align属性可以设置表格的对齐方式,可选值为left、center、right,默认为left。注意:align属性不会影响单元格内文字的对齐方式。

(4)bgcolor属性与background属性

bgcolor属性表示表格的背景色,background属性表示表格的背景图像,应为图片文件的地址,浏览器会以平铺的方式使用此图片填充表格。

(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)

使用表格进行页面布局

表格在网页设计中的另一个用途是用来对页面内容进行排版、布局,因为表格可以将页面整齐地分为若干个部分,所以经常利用表格的这一特性,通过表格嵌套、单元格合并等技巧对页面进行布局

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 塔罗牌,由“TAROT”音译而来,被称为“大自然的奥秘库”。它是西方古老的占卜工具,中世纪开始流行于欧洲,地位相当...
    野之叶阅读 1,069评论 0 1
  • Day5(9.5): 今天是“橙”长计划的DAY5,第一周转眼就过去了,第二周崭新的一天就快准备结束了,回想起自己...
    carmenL阅读 147评论 0 0
  • 清早,看看日历,发现时间已经不多了,转头,寒假先生早已收拾好了行李。再推开窗,入眼一片初春盛景,想:一定要紧握...
    千久啊阅读 299评论 0 0
  • 如果一个游戏系列历经十余年还没有什么根本的变化,那它一定是个神作,因为想让用户在十年间为大体类似的内容买单,是一个...
    peter仔的成长史阅读 863评论 0 0