<table>标签:

定义和用法:

<table>标签定义HTML表格。

简单的HTML表格由table元素以及一个或多个tr、th或td元素组成。

tr元素定义表格行,th元素定义表头,td元素定义表格单元。

可选的属性:

1.border

值:pixels       规定表格边框的宽度。

2.cellpadding

值:pixels或%     规定单元边沿与内容之间的空白。

3.cellspacing  

值:pixels或%   规定单元格之间的空白。

4. frame

值:void(不显示外侧边框。)                       规定外侧边框的哪个部分是可见的。

above (显示上部的外侧边框。)

below (显示下部的外侧边框。)

hsides (显示上部和下部的外侧边框。)

vsides  (显示左边和右边的外侧边框。)

lhs  (显示左边的外侧边框。)

rhs (显示右边的外侧边框。)

box  (在所有四个边上显示外侧边框。)

border (在所有四个边上显示外侧边框。)

5. rules    值:  none (没有线条。)                             规定内侧边框的哪个部分是可见的。

groups (位于行组和列组之间的线条。)

rows   (位于行之间的线条。)

cols    (位于列之间的线条。)

all       (位于行和列之间的线条。)

6. summary

值: text       规定表格的摘要。

7. width

值:%或pixels    规定表格的宽度。

<caption> 标签

定义和用法

caption 元素定义表格标题。

caption 标签必须紧随 table 标签之后。您只能对每个表格定义一个标题。通常这个标题会被居中于表格之上。

所有浏览器都支持 <caption> 标签。

<th> 标签

定义和用法

定义表格内的表头单元格。

HTML 表单中有两种类型的单元格:

  • 表头单元格 - 包含表头信息(由 th 元素创建)

  • 标准单元格 - 包含数据(由 td 元素创建)

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

提示和注释

提示:如果需要将内容横跨多个行或列,请使用 colspan 和 rowspan 属性。

可选的属性:

1. align

值:left (左对齐内容(默认值)。)           规定表格的表头单元格中内容的水平对齐方式。

right  (右对齐内容。)

center  (居中对齐内容。)

justify  (对行进行伸展,这样每行都可以有相等的长度(就像在报纸和杂志中)。

char   (将内容对准指定字符。)注释:几乎没有浏览器能够正确地处理 "char" 值。

2. colspan

值:number                              规定表头单元格可横跨的列数。

注释:没有浏览器支持 colspan="0",这个值有特殊的意义。

3. rowspan

值:number                            规定表头单元格可横跨的行数。

注释:没有浏览器支持 rowspan="0",这个值有特殊的意义。

4.  valign

值:top(对内容进行上对齐。)                   规定单元格中内容的垂直排列的方式。

middle  (对内容进行居中对齐(默认值)。)

bottom  (对内容进行下对齐。)

baseline   (与基线对齐。)

注释:基线是一条虚构的线。在一行文本中,大多数字母以基线为基准。baseline 值设置行中的所有表格数据都分享相同的基线。该值的效果常常与 bottom 值相同。不过,如果文本的字号各不相同,那么 baseline 的效果会更好。

例如: valign="bottom"

 valign="baseline"

<tr> 标签

定义和用法:

<tr> 标签定义 HTML 表格中的行。

tr 元素包含一个或多个 th 或 td 元素。

可选属性:

1. align

值:left (左对齐内容(默认值)。)           规定表格行中内容的水平对齐方式。

right  (右对齐内容。)

center  (居中对齐内容。)

justify  (对行进行伸展,这样每行都可以有相等的长度(就像在报纸和杂志中)。

char   (将内容对准指定字符。)注释:几乎没有浏览器能够正确地处理 "char" 值。

2.  valign

值:top(对内容进行上对齐。)                   规定表格行中内容的垂直排列的方式。

middle  (对内容进行居中对齐(默认值)。)

bottom  (对内容进行下对齐。)

baseline   (与基线对齐。)

注释:基线是一条虚构的线。在一行文本中,大多数字母以基线为基准。baseline 值设置行中的所有表格数据都分享相同的基线。该值的效果常常与 bottom 值相同。不过,如果文本的字号各不相同,那么 baseline 的效果会更好。

例如: valign="bottom"

 valign="baseline"

<td> 标签

定义和用法:

<td> 标签定义 HTML 表格中的标准单元格。

HTML 表格有两类单元格:

  • 表头单元 - 包含头部信息(由 th 元素创建)
  • 标准单元 - 包含数据(由 td 元素创建)

td 元素中的文本一般显示为正常字体且左对齐。

可选属性:

1. align

值:left (左对齐内容(默认值)。)           规定单元格中内容的水平对齐方式。

right  (右对齐内容。)

center  (居中对齐内容。)

justify  (对行进行伸展,这样每行都可以有相等的长度(就像在报纸和杂志中)。

char   (将内容对准指定字符。)注释:几乎没有浏览器能够正确地处理 "char" 值。

2. colspan

值:number                              规定单元格可横跨的列数。

注释:没有浏览器支持 colspan="0",这个值有特殊的意义。

3. rowspan

值:number                            规定单元格可横跨的行数。

注释:没有浏览器支持 rowspan="0",这个值有特殊的意义。

4.  valign

值:top(对内容进行上对齐。)                   规定单元格中内容的垂直排列的方式。

middle  (对内容进行居中对齐(默认值)。)

bottom  (对内容进行下对齐。)

baseline   (与基线对齐。)

注释:基线是一条虚构的线。在一行文本中,大多数字母以基线为基准。baseline 值设置行中的所有表格数据都分享相同的基线。该值的效果常常与 bottom 值相同。不过,如果文本的字号各不相同,那么 baseline 的效果会更好。

例如: valign="bottom"

 valign="baseline"

<thead> 标签

定义和用法

<thead> 标签定义表格的表头。该标签用于组合 HTML 表格的表头内容。

thead 元素应该与 tbody 和 tfoot 元素结合起来使用。

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

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

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

详细描述

thead、tfoot 以及 tbody 元素使您有能力对表格中的行进行分组。当您创建某个表格时,您也许希望拥有一个标题行,一些带有数据的行,以及位于底部的一个总计行。这种划分使浏览器有能力支持独立于表格标题和页脚的表格正文滚动。当长的表格被打印时,表格的表头和页脚可被打印在包含表格数据的每张页面上。

可选属性:

1. align

值:left (左对齐内容(默认值)。)           规定thead元素中内容的水平对齐方式。

right  (右对齐内容。)

center  (居中对齐内容。)

justify  (对行进行伸展,这样每行都可以有相等的长度(就像在报纸和杂志中)。

char   (将内容对准指定字符。)注释:几乎没有浏览器能够正确地处理 "char" 值。

2.  valign

值:top(对内容进行上对齐。)                   规定thead元素中内容的垂直排列的方式。

middle  (对内容进行居中对齐(默认值)。)

bottom  (对内容进行下对齐。)

baseline   (与基线对齐。)

注释:基线是一条虚构的线。在一行文本中,大多数字母以基线为基准。baseline 值设置行中的所有表格数据都分享相同的基线。该值的效果常常与 bottom 值相同。不过,如果文本的字号各不相同,那么 baseline 的效果会更好。

例如: valign="bottom"

 valign="baseline"

<tbody> 标签

定义和用法

<tbody> 标签表格主体(正文)。该标签用于组合 HTML 表格的主体内容。

tbody 元素应该与 thead 和 tfoot 元素结合起来使用。

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

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

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

详细描述

thead、tfoot 以及 tbody 元素使您有能力对表格中的行进行分组。当您创建某个表格时,您也许希望拥有一个标题行,一些带有数据的行,以及位于底部的一个总计行。这种划分使浏览器有能力支持独立于表格标题和页脚的表格正文滚动。当长的表格被打印时,表格的表头和页脚可被打印在包含表格数据的每张页面上。

可选属性:

1. align

值:left (左对齐内容(默认值)。)           规定tbody元素中内容的水平对齐方式。

right  (右对齐内容。)

center  (居中对齐内容。)

justify  (对行进行伸展,这样每行都可以有相等的长度(就像在报纸和杂志中)。

char   (将内容对准指定字符。)注释:几乎没有浏览器能够正确地处理 "char" 值。

2.  valign

值:top(对内容进行上对齐。)                   规定tbody元素中内容的垂直排列的方式。

middle  (对内容进行居中对齐(默认值)。)

bottom  (对内容进行下对齐。)

baseline   (与基线对齐。)

注释:基线是一条虚构的线。在一行文本中,大多数字母以基线为基准。baseline 值设置行中的所有表格数据都分享相同的基线。该值的效果常常与 bottom 值相同。不过,如果文本的字号各不相同,那么 baseline 的效果会更好。

例如: valign="bottom"

 valign="baseline"

<tfoot> 标签

定义和用法

<tfoot> 标签定义表格的页脚(脚注或表注)。该标签用于组合 HTML 表格中的表注内容。

tfoot 元素应该与 thead 和 tbody 元素结合起来使用。

thead 元素用于对 HTML 表格中的表头内容进行分组,而 tbody 元素用于对 HTML 表格中的主体内容进行分组。

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

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

详细描述

thead、tfoot 以及 tbody 元素使您有能力对表格中的行进行分组。当您创建某个表格时,您也许希望拥有一个标题行,一些带有数据的行,以及位于底部的一个总计行。这种划分使浏览器有能力支持独立于表格标题和页脚的表格正文滚动。当长的表格被打印时,表格的表头和页脚可被打印在包含表格数据的每张页面上。

可选的属性:

1. align

值:left (左对齐内容(默认值)。)           规定tfoot元素中内容的水平对齐方式。

right  (右对齐内容。)

center  (居中对齐内容。)

justify  (对行进行伸展,这样每行都可以有相等的长度(就像在报纸和杂志中)。

char   (将内容对准指定字符。)注释:几乎没有浏览器能够正确地处理 "char" 值。

2.  valign

值:top(对内容进行上对齐。)                   规定tfoot元素中内容的垂直排列的方式。

middle  (对内容进行居中对齐(默认值)。)

bottom  (对内容进行下对齐。)

baseline   (与基线对齐。)

注释:基线是一条虚构的线。在一行文本中,大多数字母以基线为基准。baseline 值设置行中的所有表格数据都分享相同的基线。该值的效果常常与 bottom 值相同。不过,如果文本的字号各不相同,那么 baseline 的效果会更好。

例如: valign="bottom"

 valign="baseline"

提示和注释:

注释:<thead> 内部必须拥有 <tr> 标签!

注释:<thead>、<tbody> 以及 <tfoot> 很少被使用,这是因为糟糕的浏览器支持。我们期望在 XHTML 的未来版本中这种情况会发生变化。

<col> 标签

定义和用法

<col> 标签为表格中一个或多个列定义属性值。

如需对全部列应用样式,<col> 标签很有用,这样就不需要对各个单元和各行重复应用样式了。

您只能在 table 或 colgroup 元素中使用 <col> 标签。

提示和注释:

提示:请为 <col> 标签添加 class 属性。这样就可以使用 CSS 来负责对齐方式、宽度和颜色等等。

提示:如果您希望在 colgroup 内部为每个列规定不同的属性值时,请使用此元素。如果没有 col 元素,列会从 colgroup 那里继承所有的属性值。

注释:col 元素是仅包含属性的空元素。如需创建列,您就必须在 tr 元素内部规定 td 元素。

可选属性:

1.span 

值:number            规定 col 元素应该横跨的列数。

2.  valign

值:top(对内容进行上对齐。)                   规定col元素中内容的垂直排列的方式。

middle  (对内容进行居中对齐(默认值)。)

bottom  (对内容进行下对齐。)

baseline   (与基线对齐。)

注释:基线是一条虚构的线。在一行文本中,大多数字母以基线为基准。baseline 值设置行中的所有表格数据都分享相同的基线。该值的效果常常与 bottom 值相同。不过,如果文本的字号各不相同,那么 baseline 的效果会更好。

例如: valign="bottom"

 valign="baseline"

3. width

值:pixels或%或像素       规定col元素的宽度。

通常,col 元素占用的空间就是它显示内容需要的空间。width 属性用于为 col 元素设置预定义的宽度。

注释:该属性会覆盖 colgroup 元素中的任何宽度设置。

<colgroup> 标签

定义与用法:

<colgroup> 标签用于对表格中的列进行组合,以便对其进行格式化。

如需对全部列应用样式,<colgroup> 标签很有用,这样就不需要对各个单元和各行重复应用样式了。

<colgroup> 标签只能在 table 元素中使用。

提示和注释:

提示:请为 <colgroup> 标签添加 class 属性。这样就可以使用 CSS 来负责对齐方式、宽度和颜色等等。

注释:col 元素是仅包含属性的空元素。如需创建列,您就必须在 tr 元素内部规定 td 元素。

可选属性:

1.span 

值:number            规定列组应该横跨的列数

2.  valign

值:top(对内容进行上对齐。)                   定义在列组合中内容的垂直对齐方式。

middle  (对内容进行居中对齐(默认值)。)

bottom  (对内容进行下对齐。)

baseline   (与基线对齐。)

注释:基线是一条虚构的线。在一行文本中,大多数字母以基线为基准。baseline 值设置行中的所有表格数据都分享相同的基线。该值的效果常常与 bottom 值相同。不过,如果文本的字号各不相同,那么 baseline 的效果会更好。

例如: valign="bottom"

 valign="baseline"

3. width

值:pixels或%或像素                   规定列组合的宽度。

通常,col 元素占用的空间就是它显示内容需要的空间。width 属性用于为 col 元素设置预定义的宽度。

注释:该属性会覆盖 colgroup 元素中的任何宽度设置。

例子:

1.跨行或跨列的表格单元格

本例演示如何定义跨行或跨列的表格单元格。

横跨两列的单元格:

姓名 电话
Bill Gates 555 77 854 555 77 855

横跨两行的单元格:

姓名 Bill Gates
电话 555 77 854
555 77 855
<html><body><h4>横跨两列的单元格:</h4>
<table border="1">
<tr><th>姓名</th><th colspan="2">电话</th>
</tr>
<tr><td>Bill Gates</td><td>555 77 854</td><td>555 77 855</td>
</tr>
</table><h4>横跨两行的单元格:</h4>
<table border="1">
<tr><th>姓名</th><td>Bill Gates</td>
</tr>
<tr><th rowspan="2">电话</th><td>555 77 854</td>
</tr>
<tr><td>555 77 855</td>
</tr>
</table></body>
</html>

2. 单元格边距(Cell padding)

本例演示如何使用 Cell padding 来创建单元格内容与其边框之间的空白。

没有 cellpadding:

First Row
Second Row

带有 cellpadding:

First Row
Second Row
<h4>没有 cellpadding:</h4>
<table border="1">
<tr><td>First</td><td>Row</td>
</tr>
<tr><td>Second</td><td>Row</td>
</tr>
</table><h4>带有 cellpadding:</h4>
<table border="1"
cellpadding="10">
<tr><td>First</td><td>Row</td>
</tr>
<tr><td>Second</td><td>Row</td>
</tr>
</table>

3.框架(frame)属性

本例演示如何使用 "frame" 属性来控制围绕表格的边框。

注释:frame 属性无法在 Internet Explorer 中正确地显示。

Table with frame="box":

Month Savings
January $100

Table with frame="above":

Month Savings
January $100

Table with frame="below":

Month Savings
January $100

Table with frame="hsides":

Month Savings
January $100

Table with frame="vsides":

Month Savings
January $100
<p><b>注释:</b>frame 属性无法在 Internet Explorer 中正确地显示。</p><p>Table with frame="box":</p>
<table frame="box"><tr><th>Month</th><th>Savings</th></tr><tr><td>January</td><td>$100</td></tr>
</table><p>Table with frame="above":</p>
<table frame="above"><tr><th>Month</th><th>Savings</th></tr><tr><td>January</td><td>$100</td></tr>
</table><p>Table with frame="below":</p>
<table frame="below"><tr><th>Month</th><th>Savings</th></tr><tr><td>January</td><td>$100</td></tr>
</table><p>Table with frame="hsides":</p>
<table frame="hsides"><tr><th>Month</th><th>Savings</th></tr><tr><td>January</td><td>$100</td></tr>
</table><p>Table with frame="vsides":</p>
<table frame="vsides"><tr><th>Month</th><th>Savings</th></tr><tr><td>January</td><td>$100</td></tr>
</table>

转载于:https://www.cnblogs.com/zuihongyan/p/5649624.html

HTML 表格tablecaptionthtrtdtheadtbodytfootcolcolgroup相关推荐

  1. jvm虚拟机规范 紧接上文的

    dneg dneg指令是类型安全的,if在传入的操作数堆栈中有一个类型匹配的双倍数.dneg指令不改变类型状态. instructionIsTypeSafe(dneg, Environment, _O ...

  2. TensorRT 数据和表格示例

    TensorRT 数据和表格示例 TensorRT 7.1在绑定索引方面比其前身更加严格.以前,允许错误配置文件的绑定索引.考虑一个网络,该网络具有四个输入,一个输出,以及在其中的三个优化配置文件 I ...

  3. HarmonyOS UI开发 TableLayout(表格布局) 的使用

    TableLayout 是什么 TableLayout  是表格布局,就是使用表格的方式划分子组件, 个人感觉应该也不是常用的布局,常用的还是选择DirectionalLayout和Dependent ...

  4. python 读取excel 表格的数据

    自己随便写了一个表格如下 使用工具xlrd 如果没有下载 可以使用pip install xlrd 下载一个 大致需要一下几个步骤 1 打开excel table = xlrd.open_workbo ...

  5. Python xlrd 读取excel表格 常用用法整理

    xlrd 的使用 #!/usr/bin/python# # -*- coding: utf-8 -*- import xlrd import sys reload(sys) sys.setdefaul ...

  6. TableLayout 表格布局,FrameLaout 帧布局 ,AbsoluteLayout绝对布局的分析

    这三个布局就放在一起来写了他们用的比较少,不过为了写这遍 博客我换特意去复习了下, 第一个表格布局TableLayout 表格布局顾名思义 就是与表格类似,以行,列形式来管理其中的组件的, 它是< ...

  7. 0x02 mysql 表格相关操作

    1.创建table 语法: create table  表格名称(列名 类型); NOT NULL:该列数据不能为空 AUTO_INCREMENT:定义该字段是否自增 primary key(xxx) ...

  8. html表格联动,html前端基础:table和select操作

    html前端基础:table和select操作 发布时间:2020-05-13 09:58:10 来源:亿速云 阅读:196 作者:Leah 这篇文章主要为大家详细介绍html前端基础中有关table ...

  9. 表格下划线怎么加粗_这招高!Excel签名栏的下划线随列宽变化,是不是感觉牛哄哄的?...

    职场牛人的世界总有各种高招,随手蹦出,令人赞叹不已! 今天早上去填一个表格,在输入签名时,突然发现签名处的下划线是随着列宽的变化而自动变化,这绝对是动态的,这是怎么做到的呢? 我特意看了一下这个单元格 ...

最新文章

  1. c++中的new_handler
  2. 从JS敏感信息泄露到GETSHELL
  3. 访问对象的属性和方法
  4. Machine Learning(CF-940F)
  5. 神经网络-反向传播算法
  6. mysql安装 demo [linux centos7] [5.7.26]
  7. java与python数据结构对比
  8. 电力企业信息化系统之调度信息报送系统整体解决方案
  9. C#笔记20:多线程之线程同步中的信号量AutoResetEvent和ManualResetEvent
  10. TopJUI Combobox 联动
  11. 微PE安装win10系统 GPT、BOOTMGR PBR、EFI PART红色
  12. 【软件架构文档之SOC篇】
  13. 宝塔linux面板ping网址找不到主机,云服务器安装宝塔面板后无法ping通ip地址问题的解决方法...
  14. 小米互联网思维新思考20141220
  15. 百度贴吧前负责人:做产品16年,我有9条心得
  16. Dennard Scaling
  17. 虚拟服务器端口211,双路由器要这样映射-路由器设置端口映射
  18. 阿里DRDS基本原理
  19. 【Linux集群教程】13 集群安全防御 - SELinux 功能
  20. 给网站加上一键分享功能

热门文章

  1. 知乎用户和龙鹏-言有三:计算机视觉应该怎样入门?
  2. 如何用MathType插入公式编号
  3. 关于y7000安装Ubuntu的一些心得体会
  4. css层叠上下文详解,CSS定位(层叠上下文)
  5. python xml解析dom_如何解析python中表示xml.dom.minidom节点的字符串?
  6. python语言的主要网站是_python语言主要是做什么的
  7. 009_InputNumber计数器
  8. php 配置域名与端口号,lnmp 配置不同端口号的域名
  9. phpthink 隐藏index.php,nginx 配置--支持phpthink框架 path_info
  10. Android多媒体开发:录音机