HTML 表格<table><caption><th><tr><td><thead><tbody><tfoot><col><colgroup>
<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>的更多相关文章
- html-3,table 表格标签 tr th td caption thead tbody tfoot 的简单使用
<!-- table border='1' style="border-collapse:collapse;" border 表格的像素宽度 border-collapse: ...
- HTML表格,table,thead,tbody,tfoot,th,tr,td,的属性以及跨行,跨列
在HTML中表格是作为一个整体来解析的,解析完才会在页面显示,如果表格很复杂很长,加载时间很长,用户体验就不好.所以这里就要用到表格结构标签,解析一部分就显示一部分,不用等表格全部加载完再显示. 表格 ...
- HTML——表格table标签,tr或者td
表格定义和用法 <tr> 标签定义 HTML 表格中的行. tr 元素包含一个或多个 th 或 td 元素. HTML 与 XHTML 之间的差异 在 HTML 4.01 中,tr 元素的 ...
- jQuery遍历table中的tr td并获取td中的值
jQuery遍历table中的tr td并获取td中的值 $(function(){ $("#tableId tr").find("td").each(func ...
- table的thead,tbody,tfoot
为了让大表格(table)在下载的时候可以分段的显示,就是说在浏览器解析HTML时,table是作为一个整体解释的,使用tbody可以优化显示. 如果表格很长,用tbody分段,可以一部分一部分地显示 ...
- table样式测试总结tr td宽度分析
题外话:一直以来习惯布局用ul,li样式调整比较方便,不会互相影响出现一些问题,but~现在公司涉及很多表格打印,都是用table写的,好多宽度高度合并啊,组合啊~~~,单元格之间互相影响,有的样式设 ...
- table标签修改tr,td标签的行距
修改tr标签的行距,tbale标签的td标签间距 看如下Css文件的代码,其都没有table的tr行距产生效果 tr{ margin-top: 10px; padding: 10px; } td{ m ...
- thead tbody tfoot
<!DOCTYPE html> <html lang="en"> <head> <title>Title</title> ...
- html5 表格标签 table tr td
最重要的三个 <table> 表格声明标签 属性: boarder 边框粗细 style 可配合css 使用 <tr> 行标签 table row ...
随机推荐
- 用hexdump获取event的输出信息
当我们在调试输入设备时,如:键盘,触摸屏 会使用到hexdump工具.其内容如下: 1. 键盘: # cat /dev/input/event0 | hexdump 0000000 f6a6 4e15 ...
- HTML5 History 模式
vue-router 默认 hash 模式 -- 使用 URL 的 hash 来模拟一个完整的 URL,于是当 URL 改变时,页面不会重新加载. 如果不想要很丑的 hash,我们可以用路由的 his ...
- Http组件的介绍
do_Http组件就是实现http/https协议的组件. 首先要说明一下,Do平台只是一个移动端开发的平台,不涉及任何后台服务端的技术,你可以使用你自己任何熟悉的语言和技术来实现服务端,do_Htt ...
- SVN图形管理工具-Submint
1.安装svn及相关依赖包 yum install subversion httpd mod_dav_svn apr-util-sqlite 2.下载submin wget https://sup ...
- 后端学 Angular 2 —— 组件间通信
1. 父组件向子组件传递信息 使用@Input 子组件的属性用 @Input 进行修饰,在父组件的模板中绑定变量 例子: import { Component, OnInit, Input } fro ...
- Client Window坐标 RECT相关函数
GetClientRect(HWND, RECT*) ---得到窗口的客户区大小,left,top总是0,bottom是客户区高度,right是客户区宽度 GetWindowRect(HWND, RE ...
- webDriver 执行杀死浏览器进程方法
/** * 执行dos命令 * @param command */ public static void command(String command) { ...
- 【前端】js中new和Object.create()的区别
js中new和Object.create()的区别 var Parent = function (id) { this.id = id this.classname = 'Parent' } Pare ...
- onSaveInstanceState的执行时机
当某个activity变得"容易"被系统销毁时,该activity的onSaveInstanceState就会被执行,除非该activity是被用户主动销毁的,例如当用户按BACK ...
- getFragmentManager()和getSupportFragmentManager()
在Android开发中,少不了Fragment的运用.目前在实际运用中,有v-4包下支持的Fragment以及app包下的Fragment,这两个包下的FragmentManager获取方式有点区别, ...