• 欢迎访问搞代码网站,推荐使用最新版火狐浏览器和Chrome浏览器访问本网站!
  • 如果您觉得本站非常有看点,那么赶紧使用Ctrl+D 收藏搞代码吧

Table良好结构及亲和力_css

css 搞代码 7年前 (2018-06-10) 95次浏览 已收录 0个评论

 具有亲和力的表格 http://www.blueidea.com/tech/web/2006/3228.asp

这篇文章很实用有趣,很早在论坛有人推荐过,仔细查了书才搞清楚summary, scope, abbr的具体用法,难怪叫做“具有亲和力”。

Quote
summary 提供表格方面的总结信息和有关非可视浏览器的内容(出于可访问性方面的原因)。
headers 指定单元格名称列表(以空格分隔),用以为当前数据单元格提供表头信息。
scope 可用于取代headers属性,标记含有表头信息的单元格,其中各数值的内容如下:
 row 指示当前单元格,为包含当前单元格的提供相关的表头信息。
 col 指示当前单元格,为根据当前单元格指定的提供相应的表头信息。
 rowgroup 指示当前单元格,为包含当前单元格的其余行组提供相关的表头信息。
 colgroup 指示当前单元格,为根据当前单元格指定的其余列组提供相应的表头信息。
abbr 用于定义表头单元格中的缩写名,如果没有定义该属性,则将默认单元格内容为节略形式。

昨天腾讯招聘日的一到面试题! http://www.blueidea.com/bbs/NewsDetail.asp?lp=1&id=2492496

这种考法其实没有用的,问了腾讯方面的朋友,也比较认同,不知道这题是何种情况下给的。至于答案,我们一致认为不写dtd全部不及格。

个人认为标准表格良好结构应该如此,其中caption也是几乎用不到的。

<table>
  <caption>Power Mac G5 tech specs</caption>
  <thead>
    <tr>
      <th>Configurations</th>
      <th>Sort A</th>
      <th>Sort B</th>
      <th>Sort C</th>
    </tr>
  </thead>
  <tfoot>
    <tr>
      <th>Configurations</th>
      <th>Sort A</th>
      <th>Sort B</th>
      <th>Sort C</th>
    </tr>
  </tfoot>
  <tbody>
    <tr>
      <th>Frontside bus</th>
      <td>900MHz per processor</td>
      <td>1GHz per processor</td>
      <td>1.25GHz per processor</td>
    </tr>
    <tr>
      <th>Level2 Cache</th>
      <td>512K per processor</td>
      <td>512K per processor</td>
      <td>512K per processor</td>
    </tr>
  </tbody>
</table>

Demo http://www.rexsong.com/blog/attachments/200603/14_095720_table.htm

欢迎大家阅读《Table良好结构及亲和力_css,跪求各位点评,若觉得好的话请收藏本文,by 搞代码


搞代码网(gaodaima.com)提供的所有资源部分来自互联网,如果有侵犯您的版权或其他权益,请说明详细缘由并提供版权或权益证明然后发送到邮箱[email protected],我们会在看到邮件的第一时间内为您处理,或直接联系QQ:872152909。本网站采用BY-NC-SA协议进行授权
转载请注明原文链接:Table良好结构及亲和力_css
喜欢 (0)
[搞代码]
分享 (0)
发表我的评论
取消评论

表情 贴图 加粗 删除线 居中 斜体 签到

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址