在一个实例中碰到表格,总结下,先上代码,例:

<table border="1">
<thead>
<th>表头</th>
<th>表头</th>
<th>表头</th>
</thead>
<tbody>
<tr>
<td>表内容单元格</td>
<td>表内容单元格</td>
<td><a href="#">操作</a></td>
</tr>
<tr>
<td>表内容单元格</td>
<td>表内容单元格</td>
<td><a href="#">操作</a></td>
</tr>
<tr>
<td>表内容单元格</td>
<td>表内容单元格</td>
<td><a href="#">操作</a></td>
</tr>
<tr>
<td>表内容单元格</td>
<td>表内容单元格</td>
<td><a href="#">操作</a></td>
</tr>
</tbody>
<tfoot>
<tr>
<td>总计</td>
<td colspan="2">1000</td>
</tr>
</tfoot>
</table>

  显示效果如下:

  总结:

  • <thead>标签:用于定义表格的表头,该标签用于组合 HTML 表格的表头内容;<thead> 内部必须拥有 <tr> 标签!

   <th> 元素内部的文本通常会呈现为居中的粗体文本,而 td 元素内的文本通常是左对齐的普通文本。

  • <tbody>标签:用于对 HTML 表格中的主体内容进行分组;
  • <tfoot>标签:用于对 HTML 表格中的表注(页脚)内容进行分组;

如果使用 thead、tfoot 以及 tbody 元素,就必须使用全部的元素。它们的出现次序是:thead、tfoot、tbody,这样浏览器就可以在收到所有数据前呈现页脚了,并且必须在 table 元素内部使用这些标签。

HTML5学习笔记(四):关于表格的更多相关文章

  1. HTML5学习笔记<四>: 列表, 块和布局

    HTML列表 列表标签 标签 描述 <ol> 定义有序列表. <ul> 定义无序列表. <li> 定义列表项. <dl> 定义定义列表. <dt& ...

  2. HTML5学习笔记四 HTML文本格式化

    HTML 格式化标签 HTML 使用标签<b> 与<i> 对输出的文本进行格式, 如:粗体 or 斜体 这些HTML标签被称为格式化标签 通常标签 <strong> ...

  3. HTML5学习笔记四:html5结构

    一.大纲:大纲即文档中各内容区块的结构编排 1. 显示编排内容区块:使用section等元素创建文档结构,每个内容区块使用标题(h1~h6,hgroup); 2. 隐式编排内容区块:根据页面所书写的各 ...

  4. HTML5学习笔记之表格标签

    HTML5学习笔记之表格标签 其他HTML5相关文章 HTML5学习笔记之HTML5基本介绍 HTML5学习笔记之基础标签 HTML5学习笔记之表格标签 HTML5学习笔记之表单标签 HTML5学习笔 ...

  5. html5学习笔记一

    HTML5学习笔记 <video>标记:定义视频,Ogg.MPEG4.WebM三种格式 <video src=”movie.ogg”  controls=”controls”> ...

  6. C#可扩展编程之MEF学习笔记(四):见证奇迹的时刻

    前面三篇讲了MEF的基础和基本到导入导出方法,下面就是见证MEF真正魅力所在的时刻.如果没有看过前面的文章,请到我的博客首页查看. 前面我们都是在一个项目中写了一个类来测试的,但实际开发中,我们往往要 ...

  7. IOS学习笔记(四)之UITextField和UITextView控件学习

    IOS学习笔记(四)之UITextField和UITextView控件学习(博客地址:http://blog.csdn.net/developer_jiangqq) Author:hmjiangqq ...

  8. java之jvm学习笔记四(安全管理器)

    java之jvm学习笔记四(安全管理器) 前面已经简述了java的安全模型的两个组成部分(类装载器,class文件校验器),接下来学习的是java安全模型的另外一个重要组成部分安全管理器. 安全管理器 ...

  9. Learning ROS for Robotics Programming Second Edition学习笔记(四) indigo devices

    中文译著已经出版,详情请参考:http://blog.csdn.net/ZhangRelay/article/category/6506865 Learning ROS for Robotics Pr ...

  10. Typescript 学习笔记四:回忆ES5 中的类

    中文网:https://www.tslang.cn/ 官网:http://www.typescriptlang.org/ 目录: Typescript 学习笔记一:介绍.安装.编译 Typescrip ...

随机推荐

  1. NSLayoutConstraint的使用

    *一切皆代码*- -- #继承关系框架|类|类:-:|:-:|:-:UIKit|NSLayoutConstraint|--|-|- #应用场景UI界面的搭建一般会占用项目开发相当一部分的时间.涉及到控 ...

  2. tab选项卡切换(js原生、jQuery )

    思路: ① 遍历Tab选项 ② 然后给每个Tab选项绑定点击事件 ③ 每次点击时清除所有Tab选项及Tab选项内容的样式,然后给当前Tab选项添加标记样式,给当前Tab选项添加显示样式 <!DO ...

  3. css简单介绍

    css层叠样式表,主要作用就是解决内容与表现分离的问题.html标签有自己的意义当然也是有自己的默认样式的,但有时候我们想修改他的样式,这时候就需要了css. 例:给字体加上颜色,我们有如下几种方法: ...

  4. 【OpenCV】关于 waitKey()的使用方法

    C++: int waitKey(int delay=0) cvWaitKey()函数的功能是不断刷新图像,频率时间为delay,单位为ms. 返回值为当前键盘按键值. 所以显示图像时,如果需要在cv ...

  5. DevExpress 如何读取当前目录下文件,加载至grid

    DBFileName=DevExpress.Utils.FileHelper.FindingFileName(Appliaction.StartupPath,"Data\\Product&g ...

  6. sqoop从DB2迁移数据到HDFS

    Sqoop import job failed to read data from DB2 database which has UTF8 encoding. Essentially, even th ...

  7. 使用PyQT编写界面程序

    使用PyQT比QT好在,可以随时监测函数正确性,省去编译时间 ! 这是个不小的节省. 1. PyQt: 打开对话框 msgbox = QtGui.QMessageBox(self)# 我的语句是 ms ...

  8. html form表单追加input元素后在提交

    form.append(input); //input为对象 (设置name和val有效) $("#form1").submit();//提交事件

  9. word2016如何英汉互译

    1.如果是一篇英文文档且是pdf格式,可以用word2016打开直接转化成了word,就算不是会员也可以的,在此附上16版的光盘安装包,可以百度自行下载 (链接:https://pan.baidu.c ...

  10. Php+Redis队列原理

    我们新建一个文件queue.php <?php while(true){ echo 1; sleep(1); } 然后中 命令行里面 执行 php queue 你会发现每秒钟输出一个1:等了很久 ...