关于表格的HTML和CSS知识

关于表格的结构这里就不予介绍。

表格的HTML属性及其作用(仅列出HTML5支持的属性)

border:   该属性应用于table标签上,其决定表内部边框是否显示,属性值为1(其实属性值无所谓,只要声明了border属性就会显示内部边框,只是标准推荐为1)。当然在table、th、td上使用css样式‘border’也可决定表内部边框是否显示。

colspanrowspan:  该属性应用于单元格上,决定跨列和跨行的数目,属性值是数字(当然是正整数)。在用这两个属性时,要记得一点,一个单元格占了多个单元格的空间,所以要在文档结构中删除掉被占的单元格,否则会表格视觉效果会产生意向不到的效果。

headers:  该属性应用于单元格上,关联表头和普通单元格,属性值是表头的id值。在视觉上无任何效果,在处理数据时可能有作用吧。(毕竟我很少用到这个属性)。

span:  该属性用于和标签上,规定跨数(不会像colspan和rowspan改变表格的文档结构哟)。

此处额外介绍下和标签:

 1.  标签用于为表格中的一列或多列设置属性值。 标签只能在

元素或 元素内部使用。

 2.  通过使用

标签,可以向整个列应用样式,而不需要重复为每个单元格或每一行设置样式。

 3.  在 HTML 中,

标签没有结束标签。在 XHTML 中,标签必须被正确的关闭。

 4. 

标签用于表示 HTML 的表格列组,定义了表中的一组列表。

 5.  如果想对

中的某列定义不同的属性,请在 标签内使用  标签。

表格中其他标签简略介绍:

caption标签:定义表的标题,

标签必须直接放置到 标签之后且只能对每个表格定义一个标题。通常这个标题会被居中于表格之上。然而,CSS 属性 "text-align" 和 "caption-side" 能用来设置标题的对齐方式和显示位置。caption-side的取值为top或bottom,意为标题位于表格顶部还是底部。

tbody,thead,tfoot标签:都是对单元格整行分组,本质上并无太大区别。

tr:  对单元格进行行分组。

注:当然仍有很多关于表格的属性可用,只是H5不支持而已。比如,单元格边距(cellpadding)和单元格间距(cellspacing)等,不过这些属性都可用css样式代替,根据内容与样式分离的原则,所以不推荐使用其他的HTML属性。当然HTML的全局属性除外。


表格中css样式应用:

border: 只能在table、th、td上有视觉效果,在其他表格元素上可能没有效果,因为根据表层关系td,th会覆盖下层的元素。(表层关系在文章最会介绍)

border-collapse:设置表格边框模式(分离边框和合并边框)。简单点说就是单元格有无自己单独的边框。 属性值为collapse和separate,可继承,默认分离式边框。合并边框时,单元格边框会合并,但合并规则不简单此处不做介绍,可在《css权威指南》第三版的P360查阅。

border-spacing: 设置单元格间间隔,相当于HTML属性cellspacing的作用。该规则在table上声明。只有当border-collapse为separate时该css规则才生效。此属性值是一个或多个长度值。指定一个值时,四周间隔相同且等于该值,指定两个值时前值表示水平单元格间隔,后值表示垂直单元格间隔。

empty-cells: 属性值为show或hide。应用于td、th。规定当单元格中无任何内容时单元格该如何显示。

table-layout: 表格布局模式。固定布局(fixed)和自动布局(auto)。该内容比较多,详阅《css权威指南》第三版P365.


关于表格的一些比较重要的补充内容:

 1.  css对于表元素和表内部元素的界限很明显。内部表元素生成矩形框,这些框有content,padding,border但一定没有margin,当然除了caption,它有margin,但caption总宽度不能超过表宽度,否则margin在左右其中一边回变成auto。

 2.  css规范不建议对表内部元素进行定位。(只是建议,如果你一定要定位也是可以的,不过意想不到的问题可能烦劳您自己解决了)

 3.  表内部元素不一定都定义。比如table标签只包含td标签。考虑如下结构:

    




    

    css会将“遗漏”的标签作为匿名表对象插入:

 


[anonymous table-row object begins]


[anonymous table-row object ends]

 

这里的匿名表对象就相当于tr标签的作用一样,不过它并不是真的存在。

 4.  表中水平对其用text-align。要将表单元格内容垂直对其用vertical-algin,在表中只有top,bottom,middle,baseline起作 用,但是含义有所变化。

top:单元格内容顶部与其行顶端对齐。
bottom:单元格内容底部与其行底端对齐。
middle:单元格内容中部与其行中部对齐。

baseline:基线对齐,详阅《css权威指南》第三版P372.


最后介绍下表格中的表层:

css对表格定义了6个层,可以分别对应表的不同标签。

从上往下分别是:单元格,行,行组,列,列组,表。基本上说,对应表各标签的样式都在其各自的表层上绘制。所以会出现当给tr设置border时会出现无视觉效果的结果,因为tr被td或th遮盖住了。


自己的经验总结,有错误之处望指出。

你可能感兴趣的:(HTML,CSS)