CSS实例教程:CSS制造美观的网页表格
日期：2013-12-18 浏览次数：21079 次
网页制造aiyiweb文章简介：如果数据表格对于视力没有问题用户都难以阅读的话,那么想像一个那些用辅助技术(掌上设备)的人来说,它们是多么复杂和混乱.侥幸的是html规范提供了许多无素和属性来提高数据表格对于这些设备的可访问性.
如果数据表格对于视力没有问题用户都难以阅读的话,那么想像一个那些用辅助技术(掌上设备)的人来说,它们是多么复杂和混乱.侥幸的是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代码:
=============================
<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>
=========================
下面我们来添加css:
css规范有两个表格边框模型:单独的和叠加的.在单独模型中,在各个单元格四周有边框,而在叠加模型中单元格共享边框.大多数浏览器默认采用单独模型,因些首先要做的事就是将表格的border-collapse属性设置为collapse.为了防止表格太宽,需求限制它的宽度;为了协助定义表格区域,添加边框是个好主意.通过使用少量的?直和水平填充,在表格单元格四周构成一些空白,这也是好想法.
---------------------------------
table {
&n
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代码:
=============================
<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>
=========================
下面我们来添加css:
css规范有两个表格边框模型:单独的和叠加的.在单独模型中,在各个单元格四周有边框,而在叠加模型中单元格共享边框.大多数浏览器默认采用单独模型,因些首先要做的事就是将表格的border-collapse属性设置为collapse.为了防止表格太宽,需求限制它的宽度;为了协助定义表格区域,添加边框是个好主意.通过使用少量的?直和水平填充,在表格单元格四周构成一些空白,这也是好想法.
---------------------------------
table {
&n
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
