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

<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. merge into语句的使用

    merge语法是根据源表对目标表进行匹配查询,匹配成功时更新,不成功时插入. 其基本语法规则是 merge into 目标表 a using 源表 b on(a.条件字段1=b.条件字段1 and a ...

  2. lua迭代

    迭代 function enum(array) local index = 1 return function() --返回迭代函数 local ret = array[index] index = ...

  3. 让.bashrc文件在终端自动生效

    修改了.bashrc文件,想在打开终端时默认路径变成桌面路径.代码如下 cd ~/desktop export PATH="/Users/nola/local:$PATH" 但是每 ...

  4. javascript中天气接口案例

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

  5. Android Studio插件:Android Drawable Importer

    Android Drawable Importer 为了在不同分辨率的设备上更好的展示图片的效果,我们往往需要在 res/drawable 中添加不同分辨率的图片.有时我们可能手里只有一份分辨率的图片 ...

  6. Windows Phone 编程: 摇一摇 效果

    Step 1: 下载摇晃手势开发库 http://create.msdn.com/en-us/edu ... ake_Gesture_LibraryStep 2: 解压后进入 ShakeGesture ...

  7. Ruby. Vs . Python

    前言:从语言的本质上来分析,我对Ruby持反对态度,毕竟语言是为了交流,在表达的效率层面为了正确性必须适当放弃复杂性.且有句老话说的好,Ruby In Rails 才是语言,而Ruby只是这个语言的工 ...

  8. 前端自动化构建yeoman

    前端自动化可分为: yo(脚手架工具).grunt(构建工具).bower(包管理器). OMAN的特性 http://yeoman.io/learning/   闪电般的初始化:项目开始阶段,可以基 ...

  9. WPF 创建用户控件并引用

    项目源码地址:https://github.com/lizhiqiang0204/WpfControlLibrary.git 首先创建新项目->WPF用户控件库项目 在UserControl1. ...

  10. ListUtil常用操作

    /** * 获取列表总页数 */ public static <T> int getListPages(List<T> list,int pageNum,int pageSiz ...