目录1. 使用\caption\为你的表格增加一个标题2. 添加\thead\、tbody\和\tfoot\解构3. 嵌套表格4. 对于视力受损用户的表格4.1 使用列和行的标题4.1.1 scope属性4.1.2 id和headers属性参考1. 使用caption为你的表格增加一个标题可以通过caption元素为你的表格增加一个标题放在table开始标签下面才是表格的标题。tablecaption表格标题/captiontrth1/thth2/thth3/thth4/thth5/thth6/thth7/thth8/thth9/thth10/thth11/th/trtrtd12/tdtd13/tdtd14/tdtd15/tdtd16/tdtd17/tdtd18/tdtd19/tdtd20/tdtd21/tdtd22/td/tr/table2. 添加thead、tbody和tfoot解构由于你的表格在结构上有点复杂如果把它们定义得更加结构化那会帮助我们更能了解结构。一个明确的方法是使用thead、tbody和tfoot这些元素允许你把表格中的部分标记为表头、表体和表尾三部分。这些元素不会使表格更易于屏幕阅读器用户访问也不会造成任何视觉上的改变。然而它们在应用样式和布局上会起到作用可以更好地让CSS应用到表格上。要使用它们应按以下顺序排列thead元素必须包住表格的表头部分。一般是第一行往往是每列的标题但是不是每种情况都是这样的。如果你使用了col/colgroup元素那么thead元素就需要放在它们的下面。tbody元素需要包住表格内容的主要部分(tbody总是包含在每个表中如果你没有在代码中指定它那就是隐式的)。tfoot元素需要包住表格的表尾部分。一般是最后一行往往是对前面所有行的总结。h1My spending record/h1tablecaptionHow I chose to spend my money/captiontheadtrthPurchase/ththLocation/ththDate/ththEvaluation/ththCost (€)/th/tr/theadtfoottrtdcolspan4SUM/tdtd118/td/tr/tfoottbodytrtdHaircut/tdtdHairdresser/tdtd12/09/tdtdGreat idea/tdtd30/td/trtrtdLasagna/tdtdRestaurant/tdtd12/09/tdtdRegrets/tdtd18/td/trtrtdShoes/tdtdShoeshop/tdtd13/09/tdtdBig regrets/tdtd65/td/trtrtdToothpaste/tdtdSupermarket/tdtd13/09/tdtdGood/tdtd5/td/tr/tbody/table3. 嵌套表格在一个表格中嵌套另一个表格是可能的只要你包含完整的结构包括table元素。这通常是不建议的因为这种做法会使标记看上去很难理解对使用屏幕阅读的用户来说无障碍性也降低了。以及在很多情况下也许你只需要插入额外的单元格、行和列到已有的表格中。然而有时候是必要的比如你想要从其他资源中更简单地导入内容。tableidtable1trth标题 1/thth标题 2/thth标题 3/th/trtrtdidnestedtableidtable2trtd单元格 1/tdtd单元格 2/tdtd单元格 3/td/tr/table/tdtd单元格 2/tdtd单元格 3/td/trtrtd单元格 4/tdtd单元格 5/tdtd单元格 6/td/tr/table4. 对于视力受损用户的表格视力受损的用户经常使用一个屏幕阅读设备来为他们读出网页上的信息。对于盲人来说阅读简单的文字没有什么问题但是要理解一张表格的内容这就有一些难度了。然而通过适当的标记我们可以用程序化的关联来取代视觉关联。4.1 使用列和行的标题屏幕阅读设备会识别所有的标题然后在它们和它们所关联的单元格之间产生程序关联。列和行标题的组合将标识和解释每个单元格中的数据以便屏幕阅读器用户可以类似于视力正常的用户的操作来理解表格。4.1.1 scope属性可以添加在th元素中以告诉屏幕阅读器该表头的类型——它是所在行的表头还是所在列的表头。theadtrthscopecol购买/ththscopecol位置/ththscopecol时间/ththscopecol评价/ththscopecol成本 (€)/th/tr/thead每一行都可以有一个像这样定义的标题。trthscoperow理发/thtd理发店/tdtd12/09/tdtd好主意/tdtd30/td/trscope还有两个可选的值colgroup和rowgroup。这些用于位于多个列或行的顶部的标题。theadtrthcolspan3scopecolgroup衣物/th/trtrthscopecol长裤/ththscopecol裙子/ththscopecol连衣裙/th/tr/theadtrthrowspan2scoperowgroup荷兰/ththscoperow阿姆斯特丹/thtd89/tdtd34/tdtd69/td/trtrthscoperow乌特勒支/thtd80/tdtd12/tdtd43/td/tr4.1.2 id和headers属性如果要替代scope属性可以使用id和headers属性来创建标题与单元格之间的联系。headers属性包含一个空格分隔的无序字符串列表每个字符串对应th元素的唯一id这些th元素为数据单元格或另一个标题单元格提供标题。这样HTML表格就明确定义了表格中每个单元格的位置这些单元格由其所属的每列和每行的标题定义。tabletheadtrtd/tdtd/tdthidclothescolspan3衣物/th/trtrtd/tdtd/tdthidtrousersheadersclothes长裤/ththidskirtsheadersclothes裙子/ththiddressesheadersclothes连衣裙/th/tr/theadtbodytrthidbelgiumrowspan3比利时/ththidantwerpheadersbelgium安特卫普/thtdheadersantwerp belgium clothes trousers56/tdtdheadersantwerp belgium clothes skirts22/tdtdheadersantwerp belgium clothes dresses43/td/tr/tbody/table参考1、HTML表格进阶特性和无障碍