HTML5之表格

原创 2012年03月25日 16:16:15

1:表格的描述(summary属性)

      表格使用summary属性来为表格的目的和结构提供一个概要说明,这个概要说明一般用于可视化浏览器,如语音合成器和布莱耶盲文。

     

<table summary="这里描述了东部地区的人均GDP增长">
  <tr>
    <th>第一季度</th>
    <th>第二季度</th>
    <th>第三季度</th>
    <th>第四季度</th>
  </tr>
  <tr>
    <td>20.4</td>
    <td>27.4</td>
    <td>90</td>
    <td>20.4</td>
  </tr>
</table>

2:表格的标题(caption元素)

      每个表格都可以通过caption元素来对表格的目的做一个简单的说明,caption元素的内容用来描述表格的特征,并且caption元素必须

紧接着table元素开始标签后被定义,一个table元素仅能包含一个caption元素

         

<table>
  <caption>东部地区的人均GDP增长</caption>
  <tr>
    <th scope="col">第一季度</th>
    <th scope="col">第二季度</th>
    <th scope="col">第三季度</th>
    <th scope="col">第四季度</th>
  </tr>
  <tr>
    <td>20.4</td>
    <td>27.4</td>
    <td>90</td>
    <td>20.4</td>
  </tr>
</table>

3:设置单元格(th和td元素)

      1.scope属性

         

属性值

功能描述

col

该单元格的内容作为当前列的表头

colgroup

该单元格的内容作为当前列组的表头

row

该单元格的内容作为当前行的表头

rowgroup

该单元格的内容作为当前行组的表头

aoto

这是默认值,表示基于上下文环境,该单元格的内容作为选中的一些单元格的表头

<table>
  <caption>东部地区的人均GDP增长</caption>
  <tr>
    <td></td>
    <th scope="col">第一季度</th>
    <th scope="col">第二季度</th>
    <th scope="col">第三季度</th>
    <th scope="col">第四季度</th>
  </tr>
  <tr>
    <th scope="row">1999年</th>
    <td>20.4</td>
    <td>27.4</td>
    <td>90</td>
    <td>20.4</td>
  </tr>
  <tr>
    <th scope="row">2000年</th>
    <td>16.4</td>
    <td>18.4</td>
    <td>32</td>
    <td>19</td>
  </tr>
</table>




2:headers属性

       th和td元素都可以使用headers元素,属性值是使用空格隔开的一系列th元素的id属性值,例如:

          headers="header-name1  header-name2  header-name3"

      

<table>
  <caption>东部地区的人均GDP增长</caption>
  <tr>
    <td></td>
    <th id="q1">第一季度</th>
    <th id="q2">第二季度</th>
    <th id="q3">第三季度</th>
    <th id="q4">第四季度</th>
  </tr>
  <tr>
    <th id="y1999">1999年</th>
    <td headers="q1 y1999">20.4</td>
    <td headers="q2 y1999">27.4</td>
    <td headers="q3 y1999">90</td>
    <td headers="q4 y1999">20.4</td>
  </tr>
  <tr>
    <th id="y2000">2000年</th>
    <td headers="q1 y2000">16.4</td>
    <td headers="q2 y2000">18.4</td>
    <td headers="q3 y2000">32</td>
    <td headers="q4 y2000">19</td>
  </tr>
</table>

  4:表格的按行分组显示(thead元素、tfoot元素、tbody元素)

        

<table>
<thead>
  <tr>
    <th>第一季度</th>
    <th>第二季度</th>
    <th>第三季度</th>
    <th>第四季度</th>
  </tr>
</thead>
<tfoot>
  <tr>
    <th>第一季度</th>
    <th>第二季度</th>
    <th>第三季度</th>
    <th>第四季度</th>
  </tr>
</tfoot>
<tbody>
  <tr>
    <td>20.4</td>
    <td>27.4</td>
    <td>90</td>
    <td>20.4</td>
  </tr>
</tbody>
</table>

 5:表格的按列分组显示(colgroup元素和col元素)

      1:使用colgroup和span属性

            <colgroup span="4">       

            </colgroup>

            <colgroup span="5">  

            </colgroup>

         2:使用col元素

              <colgroup>

                   <col></col>

                   <col></col>

             </colgroup>


     技巧:使用span属性可以直接将列的宽度分组在一起,而不是使用col元素,但是,当使用col元素时,可以为单个列定义样式:

              <colgroup>

                   <col span="39">

                   <col id="format-me-specially"

             </colgroup>

          第一个col元素横跨39列,第二个定义了id属性目的是应用样式表,这样就可以为该列单独定义样式。



HTML5 - 表格与列表处理

有序无序列表
  • wangzi11322
  • wangzi11322
  • 2015年04月27日 11:23
  • 1333

HTML5中 HTML格式化/HTML样式/链表/表格-样式 韩俊强的博客

HTML5学习从简单到复杂,循环渐进!每日更新关注:http://weibo.com/hanjunqiang 新浪微博! iOS开发者/HTML5交流QQ群: 446310206 欢迎加入!...
  • qq_31810357
  • qq_31810357
  • 2016年08月30日 20:45
  • 2939

HTML5:表格

表格的作用是显示二维数据,在HTML5中不再允许用表格控制页面内容的布局,而是采用新增的CSS表格特性(这里不涉及CSS,将在后面介绍)。下面主要介绍用于制作表格的HTML元素。构建表格表格的基本元素...
  • liuy_98_1001
  • liuy_98_1001
  • 2016年01月28日 15:12
  • 3364

HTML5_样式,链接和表格

  • 2016年02月03日 21:22
  • 19KB
  • 下载

Html5+Css3实现简单表格排版

1.html5实现初步布局 CS 142 Project 1, Problem 1 --> --> Item Manufacturer Size Unit Price Qua...
  • isGt93
  • isGt93
  • 2015年10月02日 17:42
  • 617

HTML5学习之七div布局和表格布局

div布局效果图如下: div布局代码: Title body{ margin: 0; }...
  • JCY1009015337
  • JCY1009015337
  • 2016年12月04日 16:41
  • 2360

HTML5基础12----HTML5布局的使用,table布局,表格布局就是写一个表格,把其他东西都往里塞

html> lang="en"> charset="UTF-8"> table布局 border="1" marginwidth="0px"marginheight="0px" ...
  • zhaihaohao1
  • zhaihaohao1
  • 2015年07月26日 15:33
  • 855

Html5笔记 表格 布局

html> html lang="en"> head> meta charset="UTF-8"> title>HTML5学习笔记title> style type="text...
  • qq_19672579
  • qq_19672579
  • 2015年07月03日 00:02
  • 572

[html5入门-15]Html布局中简单的table的制作方法

在古老的浏览器网页中,相当部分布局是由table表格完成的,本文分享一下table标签的一些用法和常用属性设置。...
  • weixin_36185028
  • weixin_36185028
  • 2016年10月05日 20:43
  • 1169

html5表单实例

HTML5-表单实例
  • boke14122621
  • boke14122621
  • 2017年04月29日 23:38
  • 130
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:HTML5之表格
举报原因:
原因补充:

(最多只允许输入30个字)