1.最简单的table

<table>

  <tr>

    <th></th>

  </tr>

  <tr>

    <td></td>

  </tr>

</table>

2.结构标签

<thead><tbody><tfoot>

<thead> 标签定义表格的表头。该标签用于组合 HTML 表格的表头内容。应该与 tbody 和 tfoot 元素结合起来使用。

tbody 元素用于对 HTML 表格中的主体内容进行分组,而 tfoot 元素用于对 HTML 表格中的表注(页脚)内容进行分组。

thead、tfoot 以及 tbody 元素使您有能力对表格中的行进行分组。当您创建某个表格时,您也许希望拥有一个标题行,一些带有数据的行,以及位于底部的一个总计行。

这种划分使浏览器有能力支持独立于表格标题和页脚的表格正文滚动。当长的表格被打印时,表格的表头和页脚可被打印在包含表格数据的每张页面上。

注意事项:

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

  b.必须在 table 元素内部使用这些标签。

  c.在默认情况下这些元素不会影响到表格的布局。不过,可以使用 CSS 使这些元素改变表格的外观。

  d.<thead> 内部必须拥有 <tr> 标签!

<thead>、<tbody> 以及 <tfoot> 很少被使用,这是因为糟糕的浏览器支持。

3.表格属性

属性 描述
align
  • right
  • left
  • center
  • justify
  • char
定义元素中内容的对齐方式。<thead> <tbody><tr>都支持
char character 规定根据哪个字符来进行文本对齐。几乎没有浏览器支持这个属性。
charoff number 规定第一个对齐字符的偏移量。几乎没有浏览器支持这个属性。
valign
  • top
  • middle
  • bottom
  • baseline
规定元素中内容的垂直对齐方式。<thead> <tbody><tr>都支持

【HTML】table元素的更多相关文章

  1. IE 中单元格的 colspan 属性在某些情况下会影响 TABLE 元素的自动布局

    今天在写一个jsp页面时,遇到一个如下的问题:在一个table中写了如下内容,table中定义了4列,在firefox中能正常显示,而在ie8中,显示不正常, 如下如图1:第二,三,四列宽度发生变化, ...

  2. 关于table元素的认识

    表格是网页上最常见的元素,但是,现在对很多刚入行的前端们那是谈table色变.那是为啥?这是表格的框架的简单.明了.在传统的网页中使用没有边框的表格来排版是非常流行.在web标准逐渐深入设计领域以后, ...

  3. HTML&CSS Table元素详细解说

    1.预热 css样式多如牛毛,我不可能一个一个去讲,那样好像背字典一样,我相信你们也不喜欢这样的方式.所以,我会在实战中慢慢和你讲解,然后,你记住一些重要的css属性就可以了.关键是,你要学会去查资料 ...

  4. Bootstrap table 元素列内容超长自动折行显示方法?

    共需要四步: 1.在table元素的父容器div加上:class="table-responsive" 3.设置表头th的width:<th width="20%& ...

  5. jq 获取table元素,ajax 静态填加数据

    知识点: 1.jq如何操作table->操作html内的元素 2. this 怎么使用 问题: 1.点击 修改 后,自动刷新了.判断取值,提示错误.正确出不来 2.ajax传值操作如何保密 ht ...

  6. JQuery操作Table元素

    使用Jquery操作Table中的tr向上或向下移动,以及全选和反选操作. 点击Table Head中的复选框,全选或反选表格中所有的复选框; 选中复选框,点击Up 按钮, tr上移;点击 Down ...

  7. Jquery table元素操作-创建|数据填充|重置|隐藏行

    1.Jquery创建表格 /** * 创建表格 * @param label 标题 json格式,数据结构见附录1 * @param data 数据 json格式,数据结构见附录1 * @param ...

  8. HTML table元素

    搬运,内容来自HTML Dog. 简单示例 <!DOCTYPE html> <html> <body> <table> <tr> <t ...

  9. table元素使用bug

    一.问题的产生 javaWeb课上老师让我们用表单做一个简单的自我介绍,但是在对表单里的单元格进行合并时出现了变形的情况,这里做个记录. 二.实验 让我们先做一个简单的4*4表格 <!DOCTY ...

随机推荐

  1. 平衡树初阶——AVL平衡二叉查找树+三大平衡树(Treap + Splay + SBT)模板【超详解】

    平衡树初阶——AVL平衡二叉查找树 一.什么是二叉树 1. 什么是树. 计算机科学里面的树本质是一个树状图.树首先是一个有向无环图,由根节点指向子结点.但是不严格的说,我们也研究无向树.所谓无向树就是 ...

  2. [0] AssemblyInfo.cs文件介绍

    AssemblyInfo.cs文件:包含程序版本.信息.版权的属性文件 先介绍AssemblyInfo.cs文件中的程序集属性 内容: using System.Reflection;using Sy ...

  3. ViewPager实现无限轮播踩坑记

    最近笔者想通过ViewPager来实现一个广告Banner,并实现无限轮播的效果,但是在这个过程中踩了不少的坑,听我慢慢道来.如果大家有遇到和我一样的情况,可以参考我的解决方法,没有那就更好,如果针对 ...

  4. 使用websocket-sharp来创建c#版本的websocket服务

    当前有一个需求,需要网页端调用扫描仪,javascript不具备调用能力,因此需要在机器上提供一个ws服务给前端网页调用扫描仪.而扫描仪有一个c#版本的API,因此需要寻找一个c#的websocket ...

  5. [USACO08JAN]手机网络Cell Phone Network

    [USACO08JAN]手机网络Cell Phone Network 题目描述 Farmer John has decided to give each of his cows a cell phon ...

  6. MySql三大范式与数据库设计和表创建常用语句

    [数据库设计的三大范式] 1.第一范式(1NF First Normal Fromate):数据表中的每一列(字段),必须是不可拆分的最小单元.也就是确保每一列的原子性. 例如: userInfo: ...

  7. Chapter 5. MPEG-4 Visual

    本章着重介绍有关MPEG-4 Visual标准的细节. Tool 编码工具集合的子集(比如支持交织等). Object 视频元素(比如一个矩形视频帧,或者一个任意形状的区域,静止的图像). Profi ...

  8. if else的错误用法!

    在学习C语言的时候,我们会了解和认识if  else 的用法, 并在程序里面使用它来作为判断条件! if(表达式)       //先定义一个条件,如果成立,则循环if里面的语句. { 语句 } el ...

  9. Log4Net不同日志类型写入到不同文件

    1. 一直在用log4net,从来没有自己整理过.实践出真知,只有自己整理过才能真正掌握. 2. log4net,应该读logfornet,以前一直说log4,log4............ 安装 ...

  10. EF查询百万级数据的性能测试

    一.起因  个人还是比较喜欢EF的,毕竟不用写Sql,开发效率高,操作简单,不过总是听人说EF的性能不是很好,也看过别人做的测试,但是看了就以为真的是那样.但是实际上到底是怎么样,说实话我真的不知道. ...