HTML+CSS学习笔记(十六)

在日常生活中,我们对表格数据已经很熟悉了,这种数据有多种形式,如财务数据、调查数据、事件日历、公交车时刻表等,这些信息都可以用table元素详细的加以描述,HTML中的表格可以很复杂,但这里我们学习的是最简单、最基本的table结构和样式。

一 、结构化表格

从基本层面上看,table元素是由行组成的,行又是由单元格组成的。每个行(tr)都包含标题单元格(th)或数据单元格(td),或者同时包含这两种单元格。如果认为为整个表格添加一个标题有助于访问者理解该表格,可以提供caption。此外,scope属性,尽管是可选的,但是建议使用,可以告诉屏幕阅读器和其他辅助设备当前的th是列的标题单元格(scope="col")还是行的标题单元格(scope="row"),抑或用于其他目的的单元格。

尤为需要注意的一点,可以通过指定thead、tbody、tfoot显式的定义表格的不同部分,是表格看起来更加的清楚明了。一个表格可以有多个tbody,但却只能有一个thead和tfoot。

我们当然可以自由的为表格添加边框,但是默认的效果,会发现表格之间有空隙,这就要用到border-collapse:collapse来消除。

 

二 、让单元格跨越多行或多列

可以通过colspan和rowspan属性让th或td跨越一个以上的行或者是列,该属性的数值,描述的是跨越单元格的数量。这个很容易理解,也相当容易使用,在写的时候可以边写边看效果,一定会和你预想的一致。

 

总结:关于表格,基本的使用方式也就这些,比较容易掌握,如果想深入研究的话,网上有很多现成的资料可以参考。

却道,此心安处是吾乡
原文地址:https://www.cnblogs.com/lucifer25/p/6095116.html