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

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

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

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

时间:2016-05-26 15:04:17  来源:育知同创  作者:育知

  •    HTML5学习QQ群: 339367359

     

     

     

    主要内容

    1、表格在网页当中的位置

    2、表格标签的分类方法   

    3、定义行与列                   

    4、表格的嵌套                   

     

    表格在网页当中的位置

    在上节课当中,我们为大家介绍了列表系列标签,这些标签能够将网页当中的内容按照一定的逻辑关系组织起来,让网页看起来更加的简单明了,逻辑清晰,降低用户理解内容的难度。而今天介绍的表格标签则是可以将数据采用结构化的方式展示出来,让网页看起来更加的生动。

     

    为了更好的理解表格,我们必须首先为大家解释什么叫做结构化的数据。

     

    用装逼的话来说,所谓结构化数据就是可以使用二维表格展示的数据。

     

    简单的来说就是,可以使用excel软件进行操作的数据就是结构化数据(当然,这样的介绍非常的简单粗暴,并不严谨。但是对于初学者来说,不妨可以先这样理解,随着大家对于程序开发的深入学习,我会逐渐的把结构化数据这个概念更加详细和严谨的展示给大家),举个栗子来说:

     

    o.jpg

      这就是非常典型的机构化数据

     

    所谓的二维表格指的就是表格拥有横向的行和纵向的列,一共两个维度。

     

    看到这里可能有同学会问表格难道还有三维的么?答案是肯定的,在数据挖掘领域有一项非常重要的技术,就叫做数据立方体,这种技术就有三个维度,甚至是更多的维度。但是好消息是目前在我们的前端开发当中,不太需要关注这项技术,有兴趣的同学可以到维基百科或者是知乎上去查一下。

     

    大家可以想象一下,如果没有表格而是采用一段文字来描述中国奥运会获得的金牌和奖牌的数量将会是怎样一幅场景?

     

    首先要肯定的是也一定能够表达清楚,但是那肯定是一段很长的文字,和上面的表格相比,获取同样的信息却需要用户消耗更多的时间,所以说表格可以将结构化的数据更加生动简洁的展示在网页上。

     

    除此之外,在早期的网站开发过程当中,我们还会使用表格作为网页的布局方法,举个栗子:

     

    ooooo.jpg

     

    但是这种布局方式会导致网页当中的代码极其的混乱和难以修改,所以目前已经被CSS+DIV的布局方式做取代。但是仍然会有一些老的网站采用这种布局方法。我们要做的就是祈祷将来工作的公司不要使用这种技术,否则你会被折磨的很惨。

     

    表格标签的分类方法

    表格标签不是指一个标签,而是指一个系列的标签,加在一起一共有十个,但是不用害怕,这些标签的还是比较容易掌握的,只要我们能够把他们按照功能进行分类,然后按照不同的类别记忆,也是非常简单的事情

     

    1、主体标签:表格标签最常用的有三个,分别是table、td和tr标签。table标签用于定义一个表格,在网页当中加入一个table标签就相当于定义了一个表格。td和tr标签是table的子标签,分别用于定义行和列。这三个标签是我们本节课程要为大家介绍的标签。

    2、结构标签:thead标签用于定义表头,tbody标签用于定义表格的身体,tfoot标签用于定义表格的页脚;

    3、列格式化标签:col标签用于定义列的格式,colgroup标签用于将列分组,可以一次性为多个列指定格式。

    4、表格标题:caption标签用于为表格定义标题。

     

    行和列

    对于一个表格来说,最重要的莫过于定义行和列,然后为表格当中的所有单元格设置内容。在HTML当中,tr标签用于定义行,而 td 标签则用来定义列。例如我们需要在网页当中插入一个两行三列的表格,每一行显示一名学生的姓名年龄和性别。

     

    首先我们需要在网页当中插入一个table标签用于定义一个表格,然后在table标签当中加入三个 tr 标签表示三行,然后在每一个tr标签当中加入两个td标签用来定义列,然后将每一个单元格的内容放置在td标签当中,具体代码如下

     

    <tr>

        <td>张三</td>

        <td>20</td>

        <td>男</td>

    </tr>

    <tr>

        <td>李四</td>

        <td>19</td>

        <td>女</td>

    </tr>

     

    在浏览器当中显示之后大家是不是觉得有一点点失望,这怎么看也不像是表格,怎么没有线啊。别着急,table标签有一个名为border的属性,该属性的作用就是用于制定是否有表框,以及边框的粗细程度。

     

    表格的嵌套

    除了这种最简单的表格之外,表格还可以进行多层的嵌套,例如下面的这个表格:

     

    oo.jpg

     

    首先可以宏观的看一下这个表格,忽略掉表格当中的细节,我们会发现其实可以把这个貌似很复杂的表格看成是两行两列的表格,然后在第一行的第二列和第二行的第二列,再分别插入两个两行三列的表格,就可以形成上述表格的效果,具体代码如下:

     

    <table border="1">

            <tr>

                <td>

                    三年级一班

                </td>

                <td>

                    <table border="1">

                        <tr>

                            <td>张三</td>

                            <td>20</td>

                            <td>男</td>

                        </tr>

                        <tr>

                            <td>李四</td>

                            <td>19</td>

                            <td>女</td>

                        </tr>

                    </table>

                </td>

            </tr>

            <tr>

                <td>

                    三年级二班

                </td>

                <td>

                    <table border="1">

                        <tr>

                            <td>王五</td>

                            <td>21</td>

                            <td>男</td>

                        </tr>

                        <tr>

                            <td>赵六</td>

                            <td>18</td>

                            <td>女</td>

                        </tr>

                    </table>

                </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开发视频教程》第07讲-列表

下一篇:《Android开发从入门到精通》_第01讲:初识Android


开班信息

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