14 HTML:表格元素

表格元素

table
·表格数据

  • 通过二维数据表表示的信息
  • 不应该作为布局使用
    ·属性
  • border (边框)

caption
表示表格的标题
colgroup
表示表格中的一组列表
-span 默认为1,表示n列列表
col
定义列上所有公共单元格上的公共语义
-span 默认为1,表示n列列表

tbody
表示表格中一系列行数据
子元素只能是tr
可出现多个
thead
定义表格列头的行
tfoot
定义表格列简介的行
按照thead tbody tfoot顺序显示,不管代码中书写的顺序

tr
表示表格中的行
td
表示表格中的单元格
-colspan 表示跨列
-rowspan 表示跨行
-headers 和单元格相关的th的id
th
表示单元格的标题(表头)
-colspan 表示跨列
-rowspan 表示跨行
-headers 和单元格相关的th的id
-scope 表示单元格是某一行,某一列,某一行组,某一列组的头,只有语义上的效果,没有视觉效果
·row
·col
·rowgroup
·colgroup
·auto

<table border="1">
<thead>
<tr><th>区域</th><th>寄达地</th><th>首重 (元/1000g)</th><th>续重(元/1000g)</th></tr>
</thead>
<tbody>
<tr><th rowspan="2">一区</th><td>浙江、上海、江苏</td><td>6</td><td>1</td></tr>
<tr><td>江西、安徽</td><td>7</td><td>1</td></tr>
<tr><th>二区</th><td>北京、天津、河北</td><td>9</td><td>4</td></tr>
<tr><th>三区</th><td>辽宁、甘肃、四川</td><td>10</td><td>4</td></tr>
<tr><th>四区</th><td>吉林、黑龙江、云南</td><td>10</td><td>6</td></tr>
<tr><th>五区</th><td>新疆、西藏</td><td>15</td><td>10</td></tr>
</tbody>
</table>


th-rowspan

<table border="1">
<thead><tr><th></th><th>时间</th><th>星期一</th><th>星期二</th><th>星期三</th><th>星期四</th><th>星期五</th></tr></thead>
<tbody>
<tr><th rowspan="3" scope="rowgroup">上午</th><th scope="row">8:00-8:45</th><td>语文</td><td>数学</td>…</tr>
<tr><th scope="row">9:00-9:45</th><td>数学</td><td>数学</td>…</tr>
<tr><th scope="row">10:00-10:45</th><td>活动</td><td>数学</td>…</tr>
<tr><th rowspan="2" scope="rowgroup">下午</th><th scope="row">13:00-13:45</th><td>英语</td><td>数学</td>…</tr>
<tr><th scope="row">14:00-14:45</th><td>劳动</td><td>数学</td>…</tr>
</tbody>
</table>


th-scope
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • (注1:如果有问题欢迎留言探讨,一起学习!转载请注明出处,喜欢可以点个赞哦!)(注2:更多内容请查看我的目录。) ...
    love丁酥酥阅读 4,247评论 2 5
  • 国家电网公司企业标准(Q/GDW)- 面向对象的用电信息数据交换协议 - 报批稿:20170802 前言: 排版 ...
    庭说阅读 11,121评论 6 13
  • HTML 5 HTML5概述 因特网上的信息是以网页的形式展示给用户的,因此网页是网络信息传递的载体。网页文件是用...
    阿啊阿吖丁阅读 4,060评论 0 0
  • 表格在网页中的应用比较广泛,如用户管理、电商网站购物车,还有很多分栏结构都是用表格写的。 基础表格语法表格用三种标...
    云苒说阅读 473评论 0 1
  • 前端07班 王 对于table的使用我们会有种先入为主的厌恶。觉得页面中不应该出现表格!其实这只是针对使用HTML...
    ea203453e188阅读 2,723评论 0 5