<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>

HTML 表格<table><caption><th><tr><td><thead><tbody><tfoot><col><colgroup>的更多相关文章

  1. html-3,table 表格标签 tr th td caption thead tbody tfoot 的简单使用

    <!-- table border='1' style="border-collapse:collapse;" border 表格的像素宽度 border-collapse: ...

  2. HTML表格,table,thead,tbody,tfoot,th,tr,td,的属性以及跨行,跨列

    在HTML中表格是作为一个整体来解析的,解析完才会在页面显示,如果表格很复杂很长,加载时间很长,用户体验就不好.所以这里就要用到表格结构标签,解析一部分就显示一部分,不用等表格全部加载完再显示. 表格 ...

  3. HTML——表格table标签,tr或者td

    表格定义和用法 <tr> 标签定义 HTML 表格中的行. tr 元素包含一个或多个 th 或 td 元素. HTML 与 XHTML 之间的差异 在 HTML 4.01 中,tr 元素的 ...

  4. jQuery遍历table中的tr td并获取td中的值

    jQuery遍历table中的tr td并获取td中的值 $(function(){ $("#tableId tr").find("td").each(func ...

  5. table的thead,tbody,tfoot

    为了让大表格(table)在下载的时候可以分段的显示,就是说在浏览器解析HTML时,table是作为一个整体解释的,使用tbody可以优化显示. 如果表格很长,用tbody分段,可以一部分一部分地显示 ...

  6. table样式测试总结tr td宽度分析

    题外话:一直以来习惯布局用ul,li样式调整比较方便,不会互相影响出现一些问题,but~现在公司涉及很多表格打印,都是用table写的,好多宽度高度合并啊,组合啊~~~,单元格之间互相影响,有的样式设 ...

  7. table标签修改tr,td标签的行距

    修改tr标签的行距,tbale标签的td标签间距 看如下Css文件的代码,其都没有table的tr行距产生效果 tr{ margin-top: 10px; padding: 10px; } td{ m ...

  8. thead tbody tfoot

    <!DOCTYPE html> <html lang="en"> <head> <title>Title</title> ...

  9. html5 表格标签 table tr td

      最重要的三个 <table>     表格声明标签 属性: boarder    边框粗细 style    可配合css 使用 <tr>    行标签 table row ...

随机推荐

  1. 【转】The import javax.servlet cannot be resolved

    转载地址:http://www.2cto.com/kf/201212/176868.html 今天将别人的项目导入eclipse之后,出现了“The import javax.servlet cann ...

  2. ROCKETMQ源码分析笔记2:client

    CLIENT 之前讲过tools里面有大量调用client的东西.为了从源码层面了解rocket,决定啃下client这块骨头. pom 先看pom,看看CLIENT依赖谁.看完后原来是依赖commo ...

  3. discuz教程:discuz模板js与jQuery冲突的解决方案

    今天在做discuz模板的时候,用到jquery的时候和原来主题js冲突.这个主要是Discuz X使用了$(id)作为dom节点的获取方法,而$符号刚好与jQuery的默认符号相冲突. 以下是基于之 ...

  4. SQL Join的一些总结

    1.1.1 摘要 Join是关系型数据库系统的重要操作之一,SQL Server中包含的常用Join:内联接.外联接和交叉联接等.如果我们想在两个或以上的表获取其中从一个表中的行与另一个表中的行匹配的 ...

  5. AIDMA VS AISAS vs ISMAS 营销法则

    AIDMA法则与传统媒体时代 引起注意——产生兴趣——培养欲望——形成记忆——购买行动 注:AIDMA,传统消费者行为学理论模型,即:Attention(引起注意),Interest (引起兴趣),D ...

  6. 。Java中的一些小细节

    1.main方法. ------任何一个Java程序都有一个main方法,它是程序的入口. ------当执行  “ java + 类名 “  这个命令时,JVM就会去加载这个类,并且寻找这个类中的m ...

  7. 解决file_get_contents遇到中文文件名无法打开问题

    利用file_get_contents打开文件或采集远程服务器文件如果文名或url中碰到汉字中文那么会出现failed to open stream:Lnvalid argument in错误.   ...

  8. 一次U盘拯救的经历

    U盘拷资料,突然就弹出框框,复制终止了,然后U盘里面的只是编程可读的了. 倒是没有啥重要的资料,就是只有这一个U盘了,平时传资料都靠它,不能就这么垮了啊,于是就来了一次拯救行动. 一共有三个步骤 第一 ...

  9. docker tomcat7 dubbo-admin monitor

    docker run --name=dubbo_admin9201 -tid -p : -v /home/dubbo/admin:/usr/local/tomcat7/webapps/ROOT cen ...

  10. Polly

    Polly Polly is a .NET 3.5 / 4.0 / 4.5 / PCL (Profile 259) library that allows developers to express ...