<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>25-表格的结构</title>
</head>
<body>
<!--感谢南哥
1.由于表格中存储的数据比较复杂, 为了方便管理和阅读以及提升语义, 我们可以对表格中存储的数据进行分类
表格中存储的数据可以分为4类
1.1表格的标题
1.2.表格的表头信息
1.3.表格的主体信息
1.4.表格的页尾信息

2.表格的完整结构
<table>
    <caption>表格的标题</caption>
    <thead>
        <tr>
            <th>每一列的标题</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>数据</td>
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <td>数据</td>
        </tr>
    </tfoot>
</table>

caption作用: 指定表格的标题
thead作用: 指定表格的表头信息
tbody作用: 指定表格的主体信息
tfoot作用: 指定表格的附加信息

3.注意点:
3.1.如果我们没有编写tbody, 系统会系统给我们添加tbody
3.2.如果指定了thead和tfoot, 那么在修改整个表格的高度时, thead和tfoot有自己默认的高度, 不会随着表格的高度变化而变化
-->

<table border="1px" width="500px" height="500px">
    <caption>学生信息</caption>
    <thead>
        <tr>
            <th>姓名</th>
            <th>年龄</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>张三</td>
            <td>20</td>
        </tr>
        <tr>
            <td>李四</td>
            <td>40</td>
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <td>2</td>
            <td>30</td>
        </tr>
    </tfoot>
</table>
</body>
</html>

H5 表格的结构的更多相关文章

  1. H5 学习之旅-H5表格（7）

    表格语法 table:简历表格 captian:表格标题 th:表格行表头 tr:表格行 td:单元格 thead:表格页眉 tfoot:表格页脚 tbody:表格主体 col:列属性 !!!代码实例 ...

  2. H5 表格标签的其它标签

    <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...

  3. H5 表格标签基本使用

    <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...

  4. h5中的结构元素header、nav、article、aside、section、footer介绍

    结构元素不具有任何样式,只是使页面元素的的语义更加明确. header元素 header元素是一种具有引导和导航作用的的结构元素,该元素可以包含所有通常放在页面头部的内容.header元素通常用来放置 ...

  5. 小K的H5之旅-HTML的基本结构与基本标签

    一.什么是HTML HTML是超文本标签语言,即网页的源码.而浏览器就是翻译解释HTML源码的工具. 二.HTML文档的结构 HTML文档主要包括三大部分:文档声明部分.<head>头部部 ...

  6. Html网页表格结构化标记的应用

    在讲网页表格的结构化标记之前,还是先看几幅图片. Html表格的结构化 所谓的结构化,正如上述第一副图所看到的,就是把我们的表格划分为三种:表头.表体.表尾.从而当我们在改动表体部分的时候,不会影响到 ...

  7. 【新特性速递】树表格结构由单层 TR 改为 TR-TD-TABLE 层级嵌套！

    由于历史原因,在之前实现树表格时,我们有点偷懒,本来应该是层级嵌套的树结构,被我们硬生生的拉平了,请看: 可以看到,basic目录的子节点和basic是在同一级别的,因为此目录尚未展开,所以这些子节点 ...

  8. H5中表格的用法

    1.表格的基本结构: 表格由行和列组成,单元格式表格的最基本单元;每个表格均有若干行,行标签由<tr></tr>定义,每行被分割为若干单元格,由<td></t ...

  9. HTML的正确入门姿势——基本结构与基本标签

    一.什么是HTML HTML是超文本标签语言,即网页的源码.而浏览器就是翻译解释HTML源码的工具. 二.HTML文档的结构 HTML文档主要包括三大部分:文档声明部分.<head>头部部 ...

随机推荐

  1. Hadoop单机模式配置

    Required Software 1. 安装Java环境推荐的版本在链接中有介绍HadoopJavaVersions. 2. 安装ssh以使用hadoop脚本管理远程Hadoop daemons. ...

  2. EasyPR--开发详解（7）字符分割

    大家好,好久不见了. 一转眼距离上一篇博客已经是4个月前的事了.要问博主这段时间去干了什么,我只能说:我去“外面看了看”. 图1 我想去看看 在外面跟几家创业公司谈了谈,交流了一些大数据与机器视觉相关 ...

  3. HTML基础

    HTML指的是超文本标记语言 (Hyper Text Markup Language), HTML不是一种编程语言,而是一种标记语言 (markup language) ,HTML使用标记标签来描述网 ...

  4. 设计模式(三)：“花瓶+鲜花”中的装饰者模式(Decorator Pattern)

    在前两篇博客中详细的介绍了"策略模式"和“观察者模式”,今天我们就通过花瓶与鲜花的例子来类比一下“装饰模式”(Decorator Pattern).在“装饰模式”中很好的提现了开放 ...

  5. 利用C#开发移动跨平台Hybrid App（一）：从Native端聊Hybrid的实现

    0x00 前言 前一段时间分别读了两篇博客,分别是叶小钗兄的<浅谈Hybrid技术的设计与实现>以及徐磊哥的<从技术经理的角度算一算,如何可以多快好省的做个app>.受到了很多 ...

  6. Asp.net Core 通过 Ef Core 访问、管理Mysql

    本文地址:http://www.cnblogs.com/likeli/p/5910524.html 环境 dotnet Core版本:1.0.0-preview2-003131 本文分为Window环 ...

  7. [原创]django+ldap实现单点登录(装饰器和缓存)

    前言 参考本系列之前的文章,我们已经搭建了ldap并且可以通过django来操作ldap了,剩下的就是下游系统的接入了,现在的应用场景,我是分了2个层次,第一层次是统一认证,保证各个系统通过ldap来 ...

  8. [php]laravel框架容器管理的一些要点

    本文面向php语言的laravel框架的用户,介绍一些laravel框架里面容器管理方面的使用要点.文章很长,但是内容应该很有用,希望有需要的朋友能看到.php经验有限,不到位的地方,欢迎帮忙指正. ...

  9. 用python实现最长公共子序列算法(找到所有最长公共子串)

    软件安全的一个小实验,正好复习一下LCS的写法. 实现LCS的算法和算法导论上的方式基本一致,都是先建好两个表,一个存储在(i,j)处当前最长公共子序列长度,另一个存储在(i,j)处的回溯方向. 相对 ...

  10. Basic Tutorials of Redis(7) -Publish and Subscribe

    This post is mainly about the publishment and subscription in Redis.I think you may subscribe some o ...