第十一章：表格元素                                                                                               

<!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}

            thead [colspan], tfoot [colspan] {text-align:center; }

        </style>

    </head>

    <body>

        <table>

            <thead>

                <tr>

                    <th id="rank">Rank</th>

                    <th id="name">Name</th>

                    <th id="color">Color</th>

                    <th id="sizeAndVotes" colspan="2">Size & Votes</th>

                </tr>

            </thead>

            <tbody>

                <tr>

                    <th id="first" headers="rank">Favorite:</th>

                    <td headers="name first">Apples</td>

                    <td headers="color first">Green</td>

                    <td headers="sizeAndVote first">Medium</td>

                    <td headers="sizeAndVote first">500</td>

                </tr>

                <tr>

                    <th id="second" headers="rank">2nd Favorite:</th>

                    <td headers="name second">Oranges</td>

                    <td headers="color second">Orange</td>

                    <td headers="sizeAndVote second">Large</td>

                    <td headers="sizeAndVote second">450</td>

                </tr>

            </tbody>

            <tfoot>

                <tr>

                    <th colspan="5">&copy; 2011 Adam Freeman Fruit Data Enterprises</th>

                </tr>

            </tfoot>

        </table>

    </body>

</html>

<!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>

<!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="2"/>

                <col id="col3"/>

            </colgroup>

            <colgroup id="colgroup2" span="2"/>

            <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>

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. CodeForces 735D Taxes

    哥德巴赫猜想. 如果$n$是素数,答案为$1$. 如果$n$不是素数,但$n$是偶数,由哥德巴赫猜想可知答案为$2$. 如果$n$不是素数,且$n$为奇数,此时可以将$n$拆成$3+$偶数或者$2+$ ...

  2. 使用redis缓存数据需要注意的问题以及个人的一些思考和理解

    之前我有博客也尝试过使用redis,在实际的项目中确实作用挺大的.至少对于数据的频繁读取来说都起着至关重要的作用. 但是随着技术的学习,慢慢的业务要复杂起来,以后也许会用到redis集群,所以在这边查 ...

  3. Fatal error: Call to undefined function oci_connect()

    http://stackoverflow.com/questions/22478387/call-to-undefined-function-oci-connect Whenever you conn ...

  4. ubuntu16.04 samba 配置

    samba是一个很有用的在Linux和Windows之间共享文件的服务器程序,在工作的时候一直在使用,不过都是别人配置好的环境,自已一直没有配置过Samba服务器,今天尝试着自己配置的一次遇到了很多的 ...

  5. C# 显式创建线程 or 使用线程池线程--new Thread() or ThreadPool.QueueUserWorkItem()

    在C#多线程编程中,关于是使用自己创建的线程(Thread)还是使用线程池(ThreadPool)线程,一直很困惑,知道看了Jeffrey Richter的相关介绍才明白,记录如下: 当满足一下任何条 ...

  6. linux之LVS简介(转自南非的蚂蚁)

    一. LVS简介LVS是Linux Virtual Server的简称,也就是Linux虚拟服务器, 是一个由章文嵩博士发起的自由软件项目,它的官方站点是www.linuxvirtualserver. ...

  7. 关于Mac中Clion使用OpenCV

    关于Mac中Clion使用OpenCV 目标 Clion能够使用OpenCV 步骤 下载安装cmake,官网下载 下载OpenCV mac/linux版 使用cmake gui编译opencv安装包, ...

  8. MAC OS 常用软件及开发工具

    1.各个版本的 Mac OS 链接: http://pan.baidu.com/s/1mgDtCi0 密码: 4y3u 2.Xcode xcode_4.6.3 链接: http://pan.baidu ...

  9. CoreJavaE10V1P3.9 第3章 Java的基本编程结构－3.9 大数值（Big Numbers）

    如果基本的整型与浮点型不能满足需求,可以使用java.Math包提供的 BigInteger 和 BigDecimal 两个类,这两个类可以存储任意长度的数, BigInteger 实现的任意精度整数 ...

  10. jdk 多版本安装 for mac

    2016年mac上已经安装有jdk1.6的版本  目录在/Library/Java/JavaVirtualMachines/1.6.0.jdk 有时候mac版本跟新会自动删除jdk1.6 所以要去ma ...