第十一章：表格元素                                                                                               

  1. <!DOCTYPE HTML>
  2. <html>
  3.     <head>
  4.         <title>Example</title>
  5.         <meta name="author" content="Adam Freeman"/>
  6.         <meta name="description" content="A simple example"/>
  7.         <link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
  8.         <style>
  9.             thead th, tfoot th { text-align:left; background:grey; color:white}
  10.             tbody th { text-align:right; background: lightgrey; color:grey}
  11.             thead [colspan], tfoot [colspan] {text-align:center; }
  12.         </style>
  13.     </head>
  14.     <body>
  15.         <table>
  16.             <thead>
  17.                 <tr>
  18.                     <th id="rank">Rank</th>
  19.                     <th id="name">Name</th>
  20.                     <th id="color">Color</th>
  21.                     <th id="sizeAndVotes" colspan="2">Size & Votes</th>
  22.                 </tr>
  23.             </thead>
  24.             <tbody>
  25.                 <tr>
  26.                     <th id="first" headers="rank">Favorite:</th>
  27.                     <td headers="name first">Apples</td>
  28.                     <td headers="color first">Green</td>
  29.                     <td headers="sizeAndVote first">Medium</td>
  30.                     <td headers="sizeAndVote first">500</td>
  31.                 </tr>
  32.                 <tr>
  33.                     <th id="second" headers="rank">2nd Favorite:</th>
  34.                     <td headers="name second">Oranges</td>
  35.                     <td headers="color second">Orange</td>
  36.                     <td headers="sizeAndVote second">Large</td>
  37.                     <td headers="sizeAndVote second">450</td>
  38.                 </tr>
  39.             </tbody>
  40.             <tfoot>
  41.                 <tr>
  42.                     <th colspan="5">&copy; 2011 Adam Freeman Fruit Data Enterprises</th>
  43.                 </tr>
  44.             </tfoot>
  45.         </table>
  46.     </body>
  47. </html>

  1. <!DOCTYPE HTML>
    <html>
        <head>
            <title>Example</title>
            <meta name="author" content="Adam Freeman"/>
            <meta name="description" content="A simple example"/>
            <link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
            <style>
                thead th, tfoot th { text-align:left; background:grey; color:white}
                tbody th { text-align:right; background: lightgrey; color:grey}
                [colspan], [rowspan] {font-weight:bold; border: medium solid black}
                thead [colspan], tfoot [colspan] {text-align:center; }
                caption {font-weight: bold; font-size: large; margin-bottom:5px}
                #colgroup1 {background-color: red}
                #col3 {background-color: green; font-size:small}
            </style>
        </head>
        <body>
            <table>
                <caption>Results of the 2011 Fruit Survey</caption>
                <colgroup id="colgroup1">
                    <col id="col1And2" span="3"/>
                </colgroup>
                <colgroup id="colgroup1">
                    <col id="col3" span="2"/>
                </colgroup>            
                <thead>
                    <tr>
                        <th>Rank</th><th>Name</th><th>Color</th>
                        <th colspan="2">Size & Votes</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <th>Favorite:</th><td>Apples</td><td>Green</td>
                        <td>Medium</td><td>500</td>
                    </tr>
                    <tr>
                        <th>2nd Favorite:</th><td>Oranges</td><td>Orange</td>
                        <td>Large</td><td>450</td>
                    </tr>
                    <tr>
                        <th>3rd Favorite:</th><td>Pomegranate</td>
                        <td colspan="2" rowspan="2">
                            Pomegranates and cherries can both come in a range of colors 
                            and sizes. 
                        </td>
                        <td>203</td>
                    </tr>
                    <tr>
                        <th rowspan="2">Joint 4th:</th>
                        <td>Cherries</td>
                        <td rowspan="2">75</td>
                    </tr>
                    <tr>
                        <td>Pineapple</td>
                        <td>Brown</td>
                        <td>Very Large</td>
                    </tr>
                </tbody>
                <tfoot>
                    <tr>
                        <th colspan="5">&copy; 2011 Adam Freeman Fruit Data Enterprises</th>
                    </tr>                
                </tfoot>
            </table>
        </body>
    </html>

  1. <!DOCTYPE HTML>
  2. <html>
  3.     <head>
  4.         <title>Example</title>
  5.         <meta name="author" content="Adam Freeman"/>
  6.         <meta name="description" content="A simple example"/>
  7.         <link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
  8.         <style>
  9.             thead th, tfoot th { text-align:left; background:grey; color:white}
  10.             tbody th { text-align:right; background: lightgrey; color:grey}
  11.             [colspan], [rowspan] {font-weight:bold; border: medium solid black}
  12.             thead [colspan], tfoot [colspan] {text-align:center; }
  13.             caption {font-weight: bold; font-size: large; margin-bottom:5px}
  14.             #colgroup1 {background-color: red}
  15.             #col3 {background-color: green; font-size:small}
  16.         </style>
  17.     </head>
  18.     <body>
  19.         <table>
  20.             <caption>Results of the 2011 Fruit Survey</caption>
  21.             <colgroup id="colgroup1">
  22.                 <col id="col1And2" span="2"/>
  23.                 <col id="col3"/>
  24.             </colgroup>
  25.             <colgroup id="colgroup2" span="2"/>
  26.             <thead>
  27.                 <tr>
  28.                     <th>Rank</th><th>Name</th><th>Color</th>
  29.                     <th colspan="2">Size & Votes</th>
  30.                 </tr>
  31.             </thead>
  32.             <tbody>
  33.                 <tr>
  34.                     <th>Favorite:</th><td>Apples</td><td>Green</td>
  35.                     <td>Medium</td><td>500</td>
  36.                 </tr>
  37.                 <tr>
  38.                     <th>2nd Favorite:</th><td>Oranges</td><td>Orange</td>
  39.                     <td>Large</td><td>450</td>
  40.                 </tr>
  41.                 <tr>
  42.                     <th>3rd Favorite:</th><td>Pomegranate</td>
  43.                     <td colspan="2" rowspan="2">
  44.                         Pomegranates and cherries can both come in a range of colors
  45.                         and sizes.
  46.                     </td>
  47.                     <td>203</td>
  48.                 </tr>
  49.                 <tr>
  50.                     <th rowspan="2">Joint 4th:</th>
  51.                     <td>Cherries</td>
  52.                     <td rowspan="2">75</td>
  53.                 </tr>
  54.                 <tr>
  55.                     <td>Pineapple</td>
  56.                     <td>Brown</td>
  57.                     <td>Very Large</td>
  58.                 </tr>
  59.             </tbody>
  60.             <tfoot>
  61.                 <tr>
  62.                     <th colspan="5">&copy; 2011 Adam Freeman Fruit Data Enterprises</th>
  63.                 </tr>
  64.             </tfoot>
  65.         </table>
  66.     </body>
  67. </html>

html5权威指南：表格元素的更多相关文章

  1. 《HTML5权威指南》

    <HTML5权威指南> HTML元素: html字符实体 html全局属性 html base标签 用元数据元素说明文档 标记文字(第八章) 标记文字.组织内容.文档分节 表格元素 表单元 ...

  2. HTML5权威指南 中文版 高清PDF扫描版​

    HTML5权威指南是一本系统学习网页设计的权威参考图书.<HTML5权威指南>分为五部分:第一部分介绍学习本书的预备知识和HTML.CSS和JavaScript的最新进展:第二部分讨论HT ...

  3. html5权威指南：标记文字

    html5权威指南-第八章-用基本的文字元素标记内容 :http://www.cnblogs.com/yc-755909659/archive/2016/10/02/5928122.html html ...

  4. （6）《Head First HTML与CSS》学习笔记---结尾、《HTML5权威指南》读书笔记

    1.内联元素的外边距.内边距与块元素稍有不同. 如果一个内联元素四周都增加外边距,只能看到左边和右边会增加空间:你也可以对内联元素的上下增加内边距,不过这个内边距不会影响包围它的其他内联元素的间距—— ...

  5. 【01】《html5权威指南》（扫描版）（全）

    [01]<html5权威指南>(扫描版)(全) []魔芋:无高清电子书.   只看第五部分,高级功能. 作者:(美)弗里曼 著,谢延晟,牛化成,刘美英 译 [美]adam freeman ...

  6. html5权威指南：表单元素

    一.表单标签: 表单标签:http://blog.csdn.net/mylovestart/article/details/8589002 html5新增表单元素: 1.datalist:http:/ ...

  7. html5权威指南：用元数据元素说明文档

    用元数据元素说明文档: html meta标签使用总结:http://www.cnblogs.com/lovesong/p/5745893.html html中meta标签使用介绍:http://ww ...

  8. html5权威指南：定制input元素

    第十三章:定制Inpur元素,http://www.cnblogs.com/polk6/p/5417921.html#Menu3-New input标签最全面的type属性:http://blog.s ...

  9. HTML5权威指南--Web Storage,本地数据库,本地缓存API,Web Sockets API,Geolocation API(简要学习笔记二)

    1.Web Storage HTML5除了Canvas元素之外,还有一个非常重要的功能那就是客户端本地保存数据的Web Storage功能. 以前都是用cookies保存用户名等简单信息.   但是c ...

随机推荐

  1. 五、RDD持久化

    Spark最重要的一个功能是它可以通过各种操作(operations)持久化(或者缓存)一个集合到内存中.当你持久化一个RDD的时候,每一个节点都将参与计算的所有分区数据存储到内存中,并且这些数据可以 ...

  2. 论JSON的重要性☞异步上传过程中data取多组值的方法

    异步上传取多组值一起post改变属性 如图: 看图说话

  3. kworker

    通过 ps 命令查看进程状态时,可以查看到kworker相关, 大部分格式都是  kworker /u2:0 或者  kworker /0:0H, 查看资料得知: 内核中有很多kworker,有绑定c ...

  4. Python基础知识学习_Day6

    一.time&datetime模块 常用选项如下: import time print(time.asctime()) #返回时间格式 print(time.localtime())#返回本地 ...

  5. ajax无法跳转页面的问题，

    将return true去掉!

  6. Linux中一些简单命令(一)

    1.查看当前用户:who 2.显示当前目录:pwd 3.查看当前服务器的时间:date 4.查看日历:cal+year; 例如:cal 2016 5.计算器:bc  退出计算器:quit或者ctrl+ ...

  7. 在ubuntu14.04上安装openstack mitaka

    最近在工作环境安装部署了juno版本,在GE口测试网络性能不太满意,发现mitaka版本支持ovs-dpdk,于是抽时间安装实验一番. 参考官网的安装文档,先准备将mitaka版本安装好再配置ovs. ...

  8. CodeForces 706A Beru-taxi

    简单题. #pragma comment(linker, "/STACK:1024000000,1024000000") #include<cstdio> #inclu ...

  9. Thrift学习记录

    Thrift学习记录 Thrift是一个软件框架,用来进行可扩展且跨语言的服务的开发.它结合了功能强大的软件堆栈和代码生成引擎,以构建在C++,Java,Python,PHP,Ruby,Erlang, ...

  10. X11 五子棋

    #include <X11/Xlib.h> #include <stdlib.h> #include <X11/keysym.h> #include <cst ...