• 企业400电话
  • 微网小程序
  • AI电话机器人
  • 电商代运营
  • 全 部 栏 目

    企业400电话 网络优化推广 AI电话机器人 呼叫中心 网站建设 商标✡知产 微网小程序 电商运营 彩铃•短信 增值拓展业务
    重新认识表格和一个访问无障碍的数据表格例子
    除特别说明外,本站内容采用创作共用授权署名和非商业用途,请尊重劳动成果。

    表格一直是网页设计制作过程中一个重要的组成部分,在没学习CSS布局前,大多是用来布局的,但到目前位置发现居然还没真正地了解和完全掌握表格,不得不需要重新认识表格......

    在现代网页设计制作中,表格主要的用途应该是用来存放多元二维数据。和表格相关的标签有 table、tr、td、th、tbody、thead、tfoot、col、colgroup、caption,如何合理地应用这些标签呢?先从名词解释开始。

    名词解释

    table

    显示二维数据

    tr

    表格中的一行

    td

    数据单元格

    th

    表头单元格,定义一行或者一列的表头信息,不能使用在布局表格里。

    tbody

    表格中的某一行或者多行编成组,要结合thead、tfoot一起使用

    thead

    将表格中的某一行或者多行编成组,要结合tbody、tfoot一起使用

    tfoot

    将表格中的某一行或者多行编成组,要结合tbody、thead一起使用

    col

    列,给某一列或者几列应用特定的属性,结合colgroup一起使用

    colgroup

    列的组合,结合col一起使用

    caption

    定义表格的标题,在表格开始的地方使用,仅一次

    summary

    说明表格的用途

    例子:

    table summary="这是一个具有亲和力的表格的演示" id="demotab">
    caption>
    访问 a href="http://www.forest53.com">www.forest53.com/a> 浏览器统计
    /caption>
    thead>
    tr>
    th>浏览器 / 月 /th>
    th>2005 / 11 /th>
    th>2006 / 04 /th>
    th>2006 / 05 /th>
    /tr>
    /thead>
    tfoot>
    tr>
    th>总计/th>
    td>1,646 ( 98.45% )/td>
    td>6,978 ( 99.48% ) /td>
    td>5,366 ( 99.56% ) /td>
    /tr>
    /tfoot>
    tbody>
    tr>
    th>Internet Explorer/th>
    td>1,535 (91.81%)/td>
    td>5,905 (86.41%)/td>
    td>4,550 (84.42%)/td>
    /tr>
    tr>
    th>Firefox/th>
    td>98 (5.86%)/td>
    td>746 (10.92%)/td>
    td>640 (11.87%)/td>
    /tr>
    tr>
    th>Opera/th>
    td>13 (0.78%)/td>
    td>147 (2.15%)/td>
    td>176 (3.27%)/td>
    /tr>
    /tbody>
    /table>
    上一篇:CSS图片翻转菜单
    下一篇:w3c技术架构介绍
  • 相关文章
  • 

    © 2016-2020 巨人网络通讯 版权所有

    《增值电信业务经营许可证》 苏ICP备15040257号-8

    重新认识表格和一个访问无障碍的数据表格例子 重新认识,表格,和,一个,