育知同创-专注移动互联网,专注强师高品质课程|Android培训|HTML5培训|Java培训|VR培训

加入收藏 关于我们 咨询电话:010-82583705
北京
其他分校: 深圳 大连 武汉

▶ 您现在的位置:首页 > 视频教程 > 《Mars亲授HTML5开发视频教程》第09讲-表格(二)

《Mars亲授HTML5开发视频教程》第09讲-表格(二)

时间:2016-05-27 18:28:59  来源:育知同创  作者:育知

  •  HTML5学习QQ群: 339367359

     

     

    主要内容

    1、结构标签的使用方法

    2、列格式化标签的使用方法

    3、合并单元格

     

    结构标签的作用

    表格系列标签当中包含有三个表示表格结构的标签,分别是thead表示表格的头部,tfoot用来表格表格的注脚,tbody用来表示表格的身体。可能看到这里有些朋友会觉得不习惯,但是没有关系,这种表示方法在计算机编程领域非常的常见,以后见的多了就习惯了。

     

    这三个标签的作用就是把表格的内容依照其作用分成了三个部分,其中thead所表示的头部通常用于表示表格当中列的名字,而tfoot通常用于展示一些统计信息,比如说合计或者是平均值等等,而tbody当中的内容而是用来展示昨天我们所说的结构化数据。

     

    需要注意的是三个结构标签必须按照指定的顺序,也就是thead,tfoot和tbody出现,如果顺序错误,会导致浏览器错误的解析标签,无法展示出预期的效果。

     

    <table border="1">

            <thead>

                <tr>

                    <th>姓名</th>

                    <th>语文</th>

                    <th>数学</th>

                    <th>英语</th>

                </tr>

            </thead>

            <tfoot>

                <tr>

                    <td>平均</td>

                    <td>76.67</td>

                    <td>80</td>

                    <td>73.3</td>

                </tr>

            </tfoot>

            <tbody>

                <tr>

                    <td>张三</td>

                    <td>60</td>

                    <td>70</td>

                    <td>80</td>

                </tr>

                <tr>

                    <td>李四</td>

                    <td>90</td>

                    <td>80</td>

                    <td>60</td>

                </tr>

                <tr>

                    <td>王五</td>

                    <td>80</td>

                    <td>90</td>

                    <td>80</td>

                </tr>

            </tbody>

        </table>

     

    将这段代码运行过后我们会发现,其实无非就是表格的头部的内容被加粗显示了,别的好像也并没有什么卵用。对于网页的人类读者来说确实是这样的。但是我们在之前的课程当中曾经提到过机器阅读,表格的头部和注脚对于机器阅读来说确实有着不一样的意义。

     

    列格式化标签

    所谓的列格式化标签的作用是可以将一个表格当中的列进行分组,同时还可以对这些类进行格式上的设置,比如说设置背景颜色、对齐方式和字体等等。

     

    列格式化标签一共有两个,分别是col和colgroup标签,前者是后者的子标签。colgroup标签用于将表格当中的列分组,并为不同的组指定不同的样式,举个栗子。假设我们需要将上面表格当中的名字显示成红色,各个科目的成绩显示成为绿色,就可以使用colgroup标签进行分组。

     

    <table border="1">

            <colgroup style="background:green"></colgroup>

            <colgroup span="3" style="background:red">

                <col style="width:100px">

            </colgroup>

            <thead>

                <tr>

                    <th>姓名</th>

                    <th>语文</th>

                    <th>数学</th>

                    <th>英语</th>

                </tr>

            </thead>

            <tfoot>

                <tr>

                    <td>平均</td>

                    <td>76.67</td>

                    <td>80</td>

                    <td>73.3</td>

                </tr>

            </tfoot>

            <tbody>

                <tr>

                    <td>张三</td>

                    <td>60</td>

                    <td>70</td>

                    <td>80</td>

                </tr>

                <tr>

                    <td>李四</td>

                    <td>90</td>

                    <td>80</td>

                    <td>60</td>

                </tr>

                <tr>

                    <td>王五</td>

                    <td>80</td>

                    <td>90</td>

                    <td>80</td>

                </tr>

            </tbody>

        </table>

     

    我知道,这个表格现在看起来简直丑爆了,但是请你原谅一个程序员的审美观,不要在意这些细节,主要是领会精神。第一个colgroup标签的作用是指定第一列作为一组,其中的style="background:green"属性用于制定这一组当中所有列的背景色。第二个colgroup标签当中多了一个span属性,该属性将后面的三列设置为一个组,同样适用style属性为这三列设置背景色。

     

    下面让我们看一下col标签的作用。该标签作为colgroup的子标签来使用,用于对分组内部的每一个列指定单独的属性,但是很可惜的是这些属性在最新的html5标准当中都已经作废了,在这里我们仅仅演示一下col的基本用法。

     

    <table border="1">

            <colgroup>

                <col style="background:green">

            </colgroup>

            <colgroup style="background:red">

                <col>

                <col>

                <col>

                <col>

            </colgroup>

            <tr>

                <td>content 1</td>

                <td>content 2</td>

                <td>content 3</td>

                <td>content 4</td>

                <td>content 5</td>

            </tr>

            <tr>

                <td>content 1</td>

                <td>content 2</td>

                <td>content 3</td>

                <td>content 4</td>

                <td>content 5</td>

            </tr>

            <tr>

                <td>content 1</td>

                <td>content 2</td>

                <td>content 3</td>

                <td>content 4</td>

                <td>content 5</td>

            </tr>

            <tr>

                <td>content 1</td>

                <td>content 2</td>

                <td>content 3</td>

                <td>content 4</td>

                <td>content 5</td>

            </tr>

        </table>

     

    合并单元格

    之前的所有例子当中,每一项内容都只占了一个单元格的位置,但是在实际的开发过程当中,表格并不总是这么的规整,很多时候都需要实现“合并单元格”的功能,就是类似于excel提供的那种合并单元格的功能,要实现这个功能,需要使用td标签的colspan属性和rowspan属性。 首先我们要了解的是这两个属性的值都应该是大于等于2的正整数。如果一个td元素的colspan值为2,它将仍然是单独的单元格,但是它会在一行中占据两个单元格的空间,rowspan的作用也一样,不过它是作用在垂直的方向上,请看下面的例子:

     

    <table border="1">

            <tr>

                <td>月份</td>

                <td colspan="2">成本</td>

                <td colspan="2">利润</td>

            </tr>

            <tr>

                <td>1</td>

                <td>20</td>

                <td>23</td>

                <td>39</td>

                <td>10</td>

            </tr>

            <tr>

                <td>2</td>

                <td>22</td>

                <td>11</td>

                <td>33</td>

                <td>12</td>

            </tr>

            <tr>

                <td>3</td>

                <td>19</td>

                <td>19</td>

                <td>40</td>

                <td>19</td>

            </tr>

        </table>

     
     
    往期回顾

    《Mars亲授HTML5开发视频教程》第00讲-课程综述

    《Mars亲授HTML5开发视频教程》第01讲-学习方法

    《Mars亲授HTML5开发视频教程》第02讲-第一个HTML程序

    《Mars亲授HTML5开发视频教程》第03讲-文本标签

    《Mars亲授HTML5开发视频教程》第04讲-超链接与锚点

    《Mars亲授HTML5开发视频教程》第05讲-神马是路径

    《Mars亲授HTML5开发视频教程》第06讲-图片

    《Mars亲授HTML5开发视频教程》第07讲-列表

    《Mars亲授HTML5开发视频教程》第08讲-表格(上)





上一篇:《Android开发从入门到精通》_第70讲:LooperThread

下一篇:《Mars亲授HTML5开发视频教程》第10讲-表单(上)


开班信息

Copyright 2016 北京育知同创科技有限公司 京ICP备16004053号