教你制作好看的网页表格
如果数据表格对于视力没有问题用户都难以阅读的话,那么想像一个那些用辅助技术(掌上设备)的人来说,它们是多么复杂和混乱.幸运的是html规范提供了许多无素和属性来提高数据表格对于这些设备的可访问性.
1.summary 和 caption
第一元素是表格的caption,它基本上用做表格的标题.尽管这不是必须有的元素,但是尽可以使用caption总是好的.另一个元素是summary.summary属性可以应用于表格标签,用来描述表格的内容.与image的alt文本属性相似.
2.thead, tbody, tfoot
thead, tbody, tfoot使网页设计人员能够将表格划分为罗辑部分.例如,可以将所有列标题放在thead元素中,这样就能够对这个特殊区域单独应用样式.如果选择使用thead或tfoot元素,那么必须至少使用一个tbody元素.在一个表格中只能使用一个thead和tfoot元素,但是可以使用多个tbody元素将复杂的表格划分为更容易管理的部分.
3.col 和 colgroup
行与列标题应该使用th标记而不是td,但是如果某些内容既是标题又是数据,那么它仍然使用td.表格标题可以设置为row或col的scope属性,定义它们是行标题还是列标题.
虽然tr元素使开发人员能够整行应用样式,但是很难整列应用样式.为了解决这个问题,w3c引入了colgroup和col元素.colgroup能够对使用col元素定义的一个或多个列进行分组.不幸的是,支持col和colgroup元素的样式的浏览器并不多.
以下是html代码:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 | <table cellspacing="0" id="playlistTable" summary="夕木木音乐排行榜,每周一次,给你最好听音乐享受."> <caption> 夕木木音乐排行榜 </caption> <colgroup> <col id="PlaylistCol" /> <col id="trackCol" /> <col id="artistCol" /> <col id="albumCol" /> </colgroup> <thead> <tr> <th id="playlistPosHead" scope="col">夕木木音乐排行榜</th> <th scope="col">歌曲</th> <th scope="col">歌手</th> <th scope="col">专辑</th> </tr> </thead> <tbody> <tr class="odd"> <td>1</td> <td>我的未来不是梦</td> <td>张雨生</td> <td>未知</td> </tr> <tr> <td>2</td> <td>昨日重现</td> <td>卡朋特</td> <td>未知</td> </tr> <tr class="odd"> <td>3</td> <td>我的未来不是梦</td> <td>张雨生</td> <td>未知</td> </tr> <tr> <td>4</td> <td>昨日重现</td> <td>卡朋特</td> <td>未知</td> </tr> <tr class="odd"> <td>5</td> <td>我的未来不是梦</td> <td>张雨生</td> <td>未知</td> </tr> <tr> <td>6</td> <td>昨日重现</td> <td>卡朋特</td> <td>未知</td> </tr> <tr class="odd"> <td>7</td> <td>我的未来不是梦</td> <td>张雨生</td> <td>未知</td> </tr> <tr> <td>8</td> <td>昨日重现</td> <td>卡朋特</td> <td>未知</td> </tr> <tr class="odd"> <td>9</td> <td>我的未来不是梦</td> <td>张雨生</td> <td>未知</td> </tr> <tr> <td>10</td> <td>昨日重现</td> <td>卡朋特</td> <td>未知</td> </tr> </tbody> </table> |
