表格标签
- 表格标签
- 1. ★ table 表格 (搭配 tr,th,td 标签)
- 1.1 table 标签 的 可选的属性
- ⑴ align 属性: 水平对齐 (已废弃,枚举属性, 用 margin 替代)
- ⑵ bgcolor 属性: (已废弃,用 background-color 替代)
- ⑶ border 属性: 表格 四边的宽度 (已废弃,用 border 和 border-xxx 替代)
- ⑷ cellpadding 属性: 单元格 内边距 (已废弃,用 border-collapse 和 td 的 padding 替代)
- ⑸ cellspacing 属性: 单元格 外边距 (已废弃,用 border-spacing 替代)
- ⑹ frame 属性: 表格 四边的边框 (已废弃,枚举属性,用 border 和 border-xxx 替代)
- ⑺ rules 属性: 表格内 行列的边框,不包含 四边 (已废弃,用 其他标签的 border 替代 )
- ⑻ summary 属性: 不显示的 内容摘要 (替代文本) (已废弃,用 caption ,figure 标签替代)
- ⑼ width 属性: 表格的 宽度 (已废弃,用 width 替代)
- 2. ★ caption 表格 标题 (搭配 table 标签)
- 3. ★ tr 表格的行 (搭配 table,th,td 标签)
- 4. ★ th 表头单元格 & td 数据单元格 (两种单元格)
- 4.1 th 标签 和 td 标签 的 可选的属性
- ⑴ abbr 属性: 单元格 内容缩写 (已废弃,用 title 替代 长内容,单元格里 用缩写)
- ⑵ align 属性: 单元格内容 水平对齐 (已废弃,枚举属性,用 text-align 替代)
- ⑶ axis 属性:表头单元格 分类 (已废弃,用 标签属性 scope 替代)
- ⑷ char 属性: 字符对齐 (已废弃,用 text-align 替代)
- ⑸ charoff 属性: 字符对齐 偏移量 (已废弃,数字,对齐方向和移动距离)
- ⑹ colspan 属性: 跨列(合并列)的 数目 (正 整数)
- ⑺ rowspan 属性: 跨行(合并行)的 数目 (正 整数)
- ⑻ headers 属性: 表头单元格 和 数据单元格 相关联 (不显示,关联 th 的 id)
- ⑼ nowrap 属性: 单元格内容 不换行 (已废弃,布尔属性,用 white-space 替代)
- ⑽ scope 属性: 表头单元格 归属范围 (不显示,枚举属性,限定标签 th 使用)
- ⑾ valign 属性: 单元格内容 垂直对齐 (已废弃,用 vertical-align 替代)
- 5. ★ thead / tbody / tfoot 对行 进行分组 (分组 标签,标题行,数据行,汇总行)
- 6. ★ col 表格的 列 (为每列 定义 公共属性/样式,搭配 colgroup 标签)
- 7. ★ colgroup 列组: 对列 进行分组 (搭配 col 标签)
- 8. table 表格示例
- 结束语
表格标签
| 标签名 | 用于 |
|---|---|
① <table> | 定义 表格 |
② <caption> | 定义 表格 标题。 |
③ <th> | 定义表格中的 表头 单元格。 |
④ <tr> | 定义表格中的 行。 |
⑤ <td> | 定义表格中的 单元。 |
⑥ <thead> | 定义表格中的 表头内容。 |
⑦ <tbody> | 定义表格中的 主体内容。 |
⑧ <tfoot> | 定义表格中的 表注内容（脚注）。 |
⑨ <col> | 定义表格中 一个或多个 列的属性值。 |
⑩ <colgroup> | 定义表格中 供格式化的 列组。 |
1. ★ table 表格 (搭配 tr,th,td 标签)
- 表格 (二维 数据表)
- 定义 HTML 表格。
- 二维 数据表: HTML的
table元素表示 表格式数据 — 即 通过二维数据表 表示的信息。- 注: 不要 用于布局: 在 CSS 创建之前， HTML
<table>元素 常常被用于 布局页面。 这种用法 在 HTML 4 之后不被推荐使用，并且<table>元素 不应该 被用于此目的。 - 下方这种,有着 多行多列,包含 多项数据(数据量很大) 的时候,就很适合 使用表格
table标签, 
- 注: 不要 用于布局: 在 CSS 创建之前， HTML
- 表格的组成 (搭配标签)
- ① 简单表格的 组成标签
- 由
<table>元素 以及 一个或多个<tr>、<th>或<td>元素组成。- 行:
<tr>元素- 定义表格 行
- 表头 单元格:
<th>元素- 定义 表头
- 数据 单元格:
<td>元素- 定义 表格中的 数据单元。
- 行:
- 由
- ② 复杂表格的 组成标签
- 可能包括:
<caption>、<col>、<colgroup>、<thead>、<tfoot>以及<tbody>元素。
- 可能包括:
- ① 简单表格的 组成标签
- 过时 属性: HTML 与 XHTML 之间的差异
- 在 HTML 4.01 中，
<table>元素的"align" , "bgcolor"属性 是不被赞成使用的。 - 在 XHTML 1.0 Strict DTD，
<table>元素的"align" , "bgcolor"属性是不被支持的。
- 在 HTML 4.01 中，
- 使用说明
table限定 子元素:<table></table>中,子元素 只能放caption,thead,tbody,tfoot,tr,不能放其他的标签,比如p,ul等 都是不可放的.- 就算是
th,td两种单元格,也都是 不可以 直接放在table内部的,它们的限定父元素是tr.
tr限定 子元素: 是th,td,两种单元格,其他的标签 也不可以直接 放在tr中.td不限定 子元素:td作为 数据单元格,是不限定 内容的- 基本上 主体内 可以放的标签,都可以作为一种数据 放在
td标签中. - 这一点,和
li元素一致,都不限制 标签内容.
<table>表格标签和属性的 浏览器支持
已弃用。不要 用于新网站。
- 示例1: 一个简单的 HTML 表格，包含两行两列：
- 嵌套关系
table > tr > th,table > tr > td,tr > th | td<table>- 行:
<tr>2个子元素- 列:
<th>表头 单元格 - 列:
<td>数据 单元格
- 列:
- 行:
<table border="1">
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
<tr>
<td>January</td>
<td>$100</td>
</tr>
</table>
- 先行,后列: 先
<tr>,后子元素<th>,<td>,先有行,再有单元格 (表头+数据)- 2 行: 2个
tr- 2个 表头单元格: 2 个
th - 2 个数据单元格: 2个
td 
- 2个 表头单元格: 2 个
- 2 行: 2个
1.1 table 标签 的 可选的属性
<table>表格 标签的 9个属性,全部已废弃,浏览器还支持,但是不要使用这些 属性- 需要 类似效果,使用 CSS 来替代
| 属性名 | 属性值 | 用于 |
|---|---|---|
| ① | =pixels | 已废弃. 使用 css 替代. 规定表格 边框的宽度。 |
| ② | =pixels , % | 已废弃. 规定 单元 单元格 边框 与内容之间的 空白。 |
| ③ | =pixels , % | 已废弃. 规定 单元格和单元格之间 的空白。默认值是2,单元格边框之间 是有距离的. |
| ④ | = void, above , below , hsides , lhs , rhs , vsides , box ,border | 已废弃. 外侧边框 可见部分 . 规定 外侧边框 的哪个部分 是可见的。 |
| ⑤ | =none , groups , rows , cols, all | 已废弃. 内侧边框 可见部分. 规定 内侧边框 的哪个部分 是可见的。 |
| ⑥ | =text | 已废弃. 规定表格的 摘要。 |
| ⑦ | = , =% , pixels | 已废弃. 规定 表格的宽度。 |
| ⑧ | =left, center , right | 已废弃. 对齐方式. 不赞成使用。请使用样式代替。规定 表格 相对周围元素的 对齐方式。 |
| ⑨ | =rgb(x,x,x) , #xxxxxx , colorname | 已废弃. 背景颜色不赞成使用。使用 CSS 样式代替。规定表格的 背景颜色。 |
⑴ align 属性: 水平对齐 (已废弃,枚举属性, 用 margin 替代)
- ⑴
<table>标签的align对齐属性 [已废弃]- 水平对齐 方式
- 规定表格相对于 周围元素的 对齐方式。
- 显示效果
- 前后 折行: 通常来说，HTML 表格的前后 都会出现折行。
- 围绕 表格: 通过运用
align属性，可实现 其他 HTML 元素围绕表格 的效果。
- 使用说明:不要使用 这个属性，它已经废弃, 不赞成 被使用。
-
替代的 CSS 属性: 外边距
margin属性- 替代 表格 水平对齐
- 例如,设置
margin-left= "auto"、margin-right= "auto"( 或者margin="0 auto") 来实现 类似于align="center"属性的效果。
-
<table>标签的align对齐 属性值- 枚举属性: 指定了表格 在文档中 如何对齐
- ❶ 文档 左侧:
left- 表格 将在 文档左侧显示；
- ❷ 文档 中央:
center- 表格将在 文档中央显示；
- ❸ 文档 右侧:
right- 表格将在 文档右侧显示；
- ❶ 文档 左侧:
- 枚举属性: 指定了表格 在文档中 如何对齐
-
- 水平对齐 方式
- 示例1: 创建一个表格,位置在 文档的右侧
<p>align 属性可以使文本围绕在表格周围。表格在右侧.</p>
<table border="1" align="right">
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
<tr>
<td>January</td>
<td>$100</td>
</tr>
<tr>
<td>February</td>
<td>$80</td>
</tr>
</table>
- table-
align="right": 表格 在右侧,其他内容 在左侧
⑵ bgcolor 属性: (已废弃,用 background-color 替代)
- ⑵
<table>表格 标签的bgcolor背景颜色 属性 [已废弃]- 背景 颜色
- 规定 表格的 背景颜色。
- 过时 属性: 版本兼容性
- 在 HTML 4.01 中，不赞成使用
<table>元素的bgcolor属性； - 在 XHTML 1.0 Strict DTD 中，不支持
<table>元素的bgcolor属性。
- 在 HTML 4.01 中，不赞成使用
- 使用说明: 不要使用 这个属性, 该属性已废弃, 使用 CSS 代替。
- 替代的 CSS 语法：
background-color背景颜色 属性
- 替代的 CSS 语法：
- 背景 颜色
<table style="background-color:red">
| 属性值 | 用于 |
|---|---|
| ① color_name | 颜色名: 规定颜色值为 颜色名称 的背景颜色（比如 “red”）。 |
| ② hex_number | 十六进制 值: 规定颜色值为 十六进制值 的背景颜色（比如 “#ff0000”）。 |
| ③ rgb_number | rgb() 代码: 规定颜色值为 rgb代码 的背景颜色（比如 “rgb(255,0,0)”）。 |
- 示例1: 一个 带有 背景颜色的 表格：
<table border="1" bgcolor="#00FF00">
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
<tr>
<td>January</td>
<td>$100</td>
</tr>
<tr>
<td>February</td>
<td>$80</td>
</tr>
</table>
- 整个表格,都会被 填充上颜色
常用的 颜色名 和十六进制 值
- 颜色名 = 十六进制 值
⑶ border 属性: 表格 四边的宽度 (已废弃,用 border 和 border-xxx 替代)
- ⑶
<table>表格 标签的border边框 属性 [已废弃]- 四边的边框 宽度
- 规定 围绕表格的边框 的 宽度。
border属性使用- 会为每个单元格 应用边框，并用边框 围绕表格。
- 如果
border属性的值 发生改变- ① 表格 四边的边框: 只有 表格 四条边的边框的尺寸 会跟着发生变化。
- ② 内部的 单元格边框: 表格内部的单元格边框,只要
border ≠0,就有边框,并且 一直是 1 像素宽。 - 整型,使用像素，定义了 表格边框的大小。
- 没有 边框: 如果设置为
border="0"，这意味着 整个表格 都没有边框了(包括内部单元格 )。 - 意味着
frame属性 被设置为空。 - 四边的 边框宽: 如果设置为
border="2"，表示表格四边 具有 2px 大小的边框,内部单元格 有边框,并且只有 1px 宽.
- 没有 边框: 如果设置为
- 使用说明
- 不要使用: 已废弃. 不要使用 这个 table-
border边框 属性, 该属性 已废弃，<table>元素应当使用 CSS 定制样式。 - 替换的 CSS 属性
border, border-color, border-width和border-style可实现 相同效果。
- 不要使用: 已废弃. 不要使用 这个 table-
- 四边的边框 宽度
- 示例1: 把表格 四边的边框 设置为 8 像素宽：
- 嵌套关系
table >tr >thtable > tr > td
<table border="8">
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
<tr>
<td>January</td>
<td>$100</td>
</tr>
<tr>
<td>February</td>
<td>$80</td>
</tr>
</table>
- 单元格 边框的宽:
border≠0: 每个单元格的 都有边框 ,一直是 1像素宽, - 围绕表格 四边的宽: 跟着 table-
border边框 属性的数值增大,而变粗了
⑷ cellpadding 属性: 单元格 内边距 (已废弃,用 border-collapse 和 td 的 padding 替代)
- ⑷
<table>标签的cellpadding单元格 内边距 属性 [已废弃]- 单元格 内边距
- 规定 单元格边框 与其内容之间的空白。
- 单元格 内边距: 各个单元格 边框 和单元格 内容 之间的 空白,类似 内边距
- 边框 和内容之间的空白
- 使用说明
- 请勿将该属性与
cellspacing属性相混淆，cellspacing属性规定的是 单元格边框 之间的空间。 - 从实用角度出发，最好不要规定
cellpadding，而是使用 CSS 来添加内边距。 - 替代的 css: 在
<table>元素上使用 边框合并border-collapse="collapse"，在<td>元素上使用属性 内边距padding，以达到类似于cellpadding的效果。
- 请勿将该属性与
- 单元格 内边距
<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="15">
<tr>
<td>First</td>
<td>Row</td>
</tr>
<tr>
<td>Second</td>
<td>Row</td>
</tr>
</table>
- table-
cellpadding属性:= 单元格内边距- 单元格边框 和单元格内容的 距离
⑸ cellspacing 属性: 单元格 外边距 (已废弃,用 border-spacing 替代)
- ⑸
<table>标签的cellspacing属性 [已废弃]- 用于
- 规定 单元格之间的空白。
- 单元格 外边距(间距): 单元格 边框 和 边框 之间的 空白.
- 包括和 表格 四边的边框 之间的距离: 表格的 顶部与第一行 的单元格，表的 左边与第一列 单元格，表的 右边与最后一列 的单元格，表的 底部与最后一行 单元格之间的空间。
- 使用说明
- 不要将 该属性与
cellpadding属性相混淆 cellpadding属性规定的是 单元格 内边距 (单元格 边沿与内容之间) 的空间。- 替代的 css: 在
<table>元素上 使用 CSS 的属性 边框间距(外边距)border-spacing，以达到类似于cellspacing的效果。
- 不要将 该属性与
- 用于
<h4>带有 cellspacing：</h4>
<table border="1"
cellspacing="10">
<tr>
<td>First</td>
<td>Row</td>
</tr>
<tr>
<td>Second</td>
<td>Row</td>
</tr>
</table>
- 单元格 内边距: table-
cellpadding,会增大 单元格 - 单元格 外边距: table-
spacing,单元格大小不变,变得是 单元格 边框之间的距离
⑹ frame 属性: 表格 四边的边框 (已废弃,枚举属性,用 border 和 border-xxx 替代)
- ⑹
<table>标签的frame属性 [已废弃]- 四边 边框
- 规定 外侧边框的哪个部分 是可见的。
- 外侧边框 的 可见部分
- 外侧边框
- 即 四边的 四条边框
- 使用说明
- 枚举属性
- 指定 包围在 表格周围的边框 显示哪个边。
- 不要使用: 不要使用 这个table-
frame框架 属性，因为它已经 被废弃。 - CSS 替代:
<table>表格 元素应该使用 CSS 定制样式。- 在
<table>表格 元素上使用 CSS 的属性border-style边框样式 属性和border-width边框宽度 属性，以达到类似于 table-frame的效果。
- 在
- 四边 边框
<table>表格 标签 的frame四边 边框 的 属性值
| 属性值 | 用于 |
|---|---|
| ① void | 不显示: 不显示 外侧边框。 |
| ② above | 上边: 显示 上部的外侧边框。 |
| ③ below | 下边: 显示 下部的外侧边框。 |
| ④ hsides | 水平的 上下边: 水平,即上下边框 . 显示 上部和下部的外侧边框。 |
| ⑤ vsides | 垂直的 左右边: 显示 垂直 , 即左右边框 . 左边和右边的外侧边框。 |
| ⑥ lhs | 左边: 显示 左边的外侧边框。 |
| ⑦ rhs | 右边: 显示 右边的外侧边框。 |
| ⑧ box | 四个边: 在所有 四个边上 显示外侧边框。 |
| ⑨ border | 四个边: 在所有 四个边上 显示外侧边框。 |
<html>
<body>
<p><b>注释：</b>frame 属性无法在 Internet Explorer 中正确地显示。</p>
<p>① 无边(默认值): Table with frame="void"</p>
<table frame="void">
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
<tr>
<td>January</td>
<td>$100</td>
</tr>
</table>
</br>
<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>
</br>
<p>③ 四条边: Table with frame="border"</p>
<table frame="border">
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
<tr>
<td>January</td>
<td>$100</td>
</tr>
</table>
</br>
<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>
</br>
<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>
</br>
<p>⑥ 左边: Table with frame="lhs":</p>
<table frame="lhs">
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
<tr>
<td>January</td>
<td>$100</td>
</tr>
</table>
</br>
<p>⑦ 右边: Table with frame="rhs":</p>
<table frame="rhs">
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
<tr>
<td>January</td>
<td>$100</td>
</tr>
</table>
</br>
<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>
</br>
<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>
</body>
</html>
- table-
frame: 表格四周的边框,不是单元格的边框
⑺ rules 属性: 表格内 行列的边框,不包含 四边 (已废弃,用 其他标签的 border 替代 )
- ⑺
<table>标签的rules属性 [已废弃]- 表格 行列的边框: (内部的 水平或垂直的 线条)
- 规定 内侧边框 的哪个部分 是可见的。
- 表格内部边框:内侧 行列之间 的边框 的可见部分
- table-
frame表格 四边的 边框
- table-
- 从实用角度出发，最好不要规定
rules，而是使用 CSS 来添加边框样式。 - 替代的 css: 使用
border属性，在适当的<thead>, <tbody>, <tfoot>, <col>或<colgroup>元素上。
- 表格 行列的边框: (内部的 水平或垂直的 线条)
<table>标签的rules内边框 规则 属性 的属性值
| 属性值 | 用于 |
|---|---|
| ① none | 没有 线条。 |
| ② groups | 行组之间 和列组之间: 位于 行组和列组之间 的线条。只显示在行组（row groups，通过 <thead> ， <tbody> 和 <tfoot> 元素定义）和列组（ column groups，通过<col> 和 <colgroup> 元素定义）之间 |
| ③ rows | 行之间: 位于 行之间 的线条。 |
| ④ cols | 列之间: 位于 列之间 的线条。 |
| ⑤ all | 行之间 和列之间: 位于 行和列之间 的线条。 |
<p><b>注释：</b>rules 属性无法在 Internet Explorer、Chrome 或者 Safari 中正确地显示。</p>
<p>① 不显示(默认值): Table with rules="none"</p>
<table rules="none">
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
<tr>
<td>January</td>
<td>$100</td>
</tr>
</table>
</br>
<p>② 行之间: Table with rules="rows"</p>
<table rules="rows">
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
<tr>
<td>January</td>
<td>$100</td>
</tr>
</table>
</br>
<p>③ 列之间: Table with rules="cols"</p>
<table rules="cols">
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
<tr>
<td>January</td>
<td>$100</td>
</tr>
</table>
</br>
<p>④ 行之间 和列之间: Table with rules="all"</p>
<table rules="all">
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
<tr>
<td>January</td>
<td>$100</td>
</tr>
</table>
- 表格内的边框: table-
rules
⑻ summary 属性: 不显示的 内容摘要 (替代文本) (已废弃,用 caption ,figure 标签替代)
- ⑻
<table>标签的summary摘要 属性 [已废弃]- 用于
- 规定 表格 内容的摘要。
- 不显示
- 表格摘要 用户不可见:
summary属性 不会对普通浏览器中 产生任何 视觉变化。
- 表格摘要 用户不可见:
- 使用说明
- 屏幕阅读器 可以利用该属性。
- 表格不可见时,摘要 = 替代文本:
- 描述 表格: 定义了一个 替代文本，当表格 无法在用户代理中 显示的时候 用来 描述表格。
- 利于盲人: 通常，它被用来 为残障人士 提供可用性，比如，盲人使用 盲文屏幕（Braille screen,美 /breɪl/） 浏览网页，从中获取信息。
- 替代的 标签: 用
<caption>标签 替代 table-summary摘要属性- 如果要想 对于非视力受限的人 来说也可以 提供作用，考虑使用
<caption>代替。 summary属性 不是强制性的，当一个<caption>发挥它应有的作用时，可以省略summary属性。
- 如果要想 对于非视力受限的人 来说也可以 提供作用，考虑使用
- 替代
summary的方法- 不要使用 这个摘要属性，因为它已经 被废弃。 作为替代，选择其中一种方法为表格添加描述：
- ❶ 在表格的
<caption>元素中 添加描述。 - ❷ 在表格的
<caption>元素中，添加一个带有描述的<details>元素。 - ❸ 将
<table>元素包含在一个 补充说明<figure>元素中，并且在旁边添加描述。 - ❹ 将
<table>元素包含在一个<figure>元素中，并且在<figcaption>元素中添加 描述。 - ❺ 调整表格，以便 不需要这样的描述 (比如，使用
<th>和<thead>元素后,也能描述)。
- ❶ 在表格的
- 浏览器支持
- 由于 不会在普通浏览器中 产生任何视觉效果，很难判断 浏览器是否支持
summary属性。
- 由于 不会在普通浏览器中 产生任何视觉效果，很难判断 浏览器是否支持
- 不要使用 这个摘要属性，因为它已经 被废弃。 作为替代，选择其中一种方法为表格添加描述：
- 用于
<table border="1" summary="《摩登原始人》家庭每月的储蓄">
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
<tr>
<td>January</td>
<td>$100</td>
</tr>
<tr>
<td>February</td>
<td>$80</td>
</tr>
</table>
- table-
summary表格摘要 属性的内容,用户是看不见的- 通常是对 表格内容的总结
⑼ width 属性: 表格的 宽度 (已废弃,用 width 替代)
- ⑼
<table>标签的width属性 [已废弃]- 表格 宽度
- 规定 表格的宽度。
- 像素 和百分比: table-
width表格宽度 可能是一个 像素 或者是一个 百分比值- 宽度的百分比值: 将被定义为 表格容器的宽度。
- 如果 没有设置
width属性- 表格会占用 需要的空间 来显示表格数据。
- 使用说明
- 不要使用 这个属性，因为它已经 被废弃。
- 替代的 css: 应该使用 CSS 设计样式。使用 CSS 的
width属性代替。
- 表格 宽度
- 示例1: 带有 300 像素宽度的表格：
<table>标签的width属性的属性值- pixels
- 设置以 像素计的宽度（例子：width=“50”）。
- %
- 设置以 包含元素的百分比计 的宽度（例子：width=“50%”）。
- pixels
<table border="1" width="300">
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
<tr>
<td>January</td>
<td>$100</td>
</tr>
</table>
- 指定 表格的宽度
2. ★ caption 表格 标题 (搭配 table 标签)
- 表格 标题
- 定义 表格标题。
- 使用说明
- 第一个 子元素:
<caption>表格标题 标签 必须紧随<table>表格 标签之后。常常作为<table>的第一个子元素出现.- 有助于 访问: 通过提供一个
<caption>元素，它的值 清楚而简明地描述了 表的用途，它可以 帮助人们决定 是否需要 阅读其余的表内容 或跳过它。 - 帮助 导航: 这有助于 人们在辅助技术的帮助下 进行导航，如 屏幕阅读器、视力低下的人 以及有 认知障碍的人。
- 有助于 访问: 通过提供一个
- 仅限 一个: 一个表格,一个 表格标题.
- 只能对 每个表格 定义一个标题。
- HTML
<caption>元素 (表格标题 元素) 展示一个 表格的标题
- 显示在 最上方: 通常, 这个标题会被 居中于 表格之上 显示在 最前面。
- 可以被 CSS 样式化，所以，它同样可以出现在 任何一个 相对于表格的 任意位置。(不是 标签的代码位置,是通过 css 调整 显示的位置,上下左右)
- 第一个 子元素:
- 过时 属性: HTML 与 XHTML 之间的差异
- 在 HTML 4.01 中，
<caption>表格 标题 元素的align属性 是不被赞成使用的。 - 在 XHTML 1.0 Strict DTD 中，
<caption>表格 标题 元素的align属性是不被支持的。
- 在 HTML 4.01 中，
<caption>标签和属性的 浏览器支持
2.1 caption 标签 可选的属性
⑴ align 属性: 表格标题 上下左右 对齐 (已废弃,枚举属性,用 caption-side 和 text-align 替代)
- caption-
align对齐 属性[已废弃 HTML4.01 已废弃 HTML5]- 表格标题 上下左右 对齐
- 规定标题的 对齐方式(相对于
table表格整体 应该如何排列)。
- 规定标题的 对齐方式(相对于
- 上下左右
left- 标题在 表格的 左边。
right- 标题在 表格的 右边。
top- 标题在 表格的 上边。
bottom- 标题在 表格的 下边。
- 该属性将
caption作为 块元素 向表格的左边、右边、顶部、底部 进行对齐。
- 表格标题 对齐的 浏览器支持
- 所有主流浏览器都支持
"top"和"bottom"值。在表格上方和下方 对齐. - Chrome 和 Safari 不支持
"left"和"right"。 - Internet Explorer 和 Opera 只能对
caption内部的文本（而不是整个caption元素）进行对齐。
- 所有主流浏览器都支持
- 使用说明
- 不要使用 caption-
align表格标题对齐 这个属性，它已经被弃用 - 替代的 CSS:
- 要得到类似
align属性的效果，使用 CSS 属性 表格标题位置 caption-side 属性和 文本对齐 text-align 属性.
- 要得到类似
- 标签 替代: 当
<table>元素 是 补充说明<figure>元素的唯一后代时，应该使用<figcaption>元素，而不是<caption>。就是说,<figcaption>优先级 更高些.
- 不要使用 caption-
- 表格标题 上下左右 对齐
- 示例1: 显示在下方的 表格标题
- 嵌套关系
table > captiontable > tr > td
<table border="5" style="caption-side:bottom">
<caption>我是表格标题</caption>
<tr>
<td>100</td>
<td>200</td>
<td>300</td>
</tr>
<tr>
<td>400</td>
<td>500</td>
<td>600</td>
</tr>
</table>
- 使用 css 的
caption-side属性,把在 最前面的标签,显示在 最下方.
3. ★ tr 表格的行 (搭配 table,th,td 标签)
- 表格的 行
<tr>标签定义 HTML 表格中的行。
- 限定 子元素:
<tr>表格行 元素包含- 表头单元格
th或 数据单元格td元素。tr> th | td- 一行的组成: 表头 单元格+ 数据 单元格
<td>( table data cell 数据单元格) and<th>(table header cell 表头单元格)
- 表头单元格
- 跨行 和跨列: 对单元格 (
<th>,<td>) 使用 跨行列属性- 跨列 属性:
colspan - 跨行 属性:
rowspan - span [spæn] 跨越;跨度
- 跨列 属性:
<tr>标签和属性的 浏览器支持
3.1 tr 标签 的可选属性 (都已废弃,用 css 替代)
<tr>表格的行 标签 包含 全局属性。- 废弃属性: 已经废弃的属性，应该避免使用，但是在阅读较旧的代码时 可能需要知道这些属性。
- 不要使用: 以下属性 可能仍然在浏览器中 实现，但不再是 HTML规范的一部分，可能会丢失 或不能按预期工作。它们应该被避免。
| 属性名 | 属性值 | 用于 |
|---|---|---|
| ① | =right , left, center , justify , char | HTML5 中已废弃. ❶ 定义表格 行的内容 水平对齐方式。 ❷ 应该使用 CSS text-align文本对齐 属性 来为行单元格 建立左对齐、中对齐、右对齐或 justify 对齐对齐，而不是使用过时的 tr-align属性。❸ 要应用 基于字符的对齐，请将CSS文本对齐属性设置为对齐字符(例如“.”或“，”)。 |
| ② | = character | HTML5 中已废弃.❶ 规定根据 哪个 字符 来进行 文本对齐。 ❷ 它设置字符 使 行中每一列的 单元格对齐(使用相同字符的 每一行的中心 与使用相同字符的其他行 对齐) ❸ 当试图 对齐数字 或货币值时，典型的值 包括句号(".")或逗号("，")。如果align未设置为char，则忽略此属性。 ❹ 这个属性不仅过时，而且很少实现。要实现与char属性相同的效果，请将CSS text-align属性设置为您将为char属性指定的相同字符串，例如text-align: "char"(未实现)。 |
| ③ | =number | HTML5 中已废弃. 规定 第一个对齐字符的 偏移量。 |
| ④ | =top, middle ,bottom,baseline | HTML5 中已废弃.规定 表格行中内容的 垂直对齐方式,使用 vertical-align替代. |
| ⑤ | =rgb(x,x,x) , #RRGGBB ,colorname | HTML5 中已废弃. ❶ 请使用样式取而代之。规定表格行的背景颜色。 ❷ 继承父元素颜色: 省略属性或 在 JavaScript 中 将其设置为 nul 会导致 行单元格 继承行父元素的背景颜色。 ❸ CSS替代: tr 元素应该使用 CSS 进行 样式设置。要获得与tr-bgcolor属性类似的效果，使用 CSS 属性background-color。 |
- 示例1: 一个简单的 HTML 表格，包含 两行 两列：
<table border="1">
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
<tr>
<td>January</td>
<td>$100</td>
</tr>
</table>
4. ★ th 表头单元格 & td 数据单元格 (两种单元格)
-
表头单元格 和数据单元格
<th>标签定义 表格的 表头 单元格。<td>标签定义 表格的 数据 单元格
-
表格中的 两种类型的单元格
- ① 表头 单元格
- 包含 表头信息（由
<th>表头单元格 元素创建）,table header.
- 包含 表头信息（由
- ② 数据 单元格
- 包含 数据（由
<td>数据单元格 元素创建）, table data.
- 包含 数据（由
- ① 表头 单元格
-
单元格 显示
- 表头单元格:
<th>表头单元格 元素内部的文本 通常会呈现 为- 居中的 粗体文本
- 数据单元格:
<td>元素内的文本通常是- 左对齐的 普通文本
- 表头单元格:
-
跨行列: 需要将 内容横跨 多个行 或列
- 跨列
colspan属性 - 跨行
rowspan属性。
- 跨列
-
过时 属性: HTML 与 XHTML 之间的差异
- 在 HTML 4.01 中，
<th>元素的"bgcolor"、"height"、"width"以及"nowrap"属性是 不被推荐使用的。 - 在 XHTML 1.0 Strict DTD 中，th 元素的
"bgcolor"、"height"、"width"以及"nowrap"属性是 不被支持。
- 在 HTML 4.01 中，
-
<th>,<td>标签和属性的 浏览器支持<th>
<td>
4.1 th 标签 和 td 标签 的 可选的属性
- 宽,高,折行,背景颜色,4个属性 不推荐使用
| 属性名 | 属性值 | 用于 |
|---|---|---|
| ① | = text | 已过时. ❶ 规定 单元格中内容的 缩写版本。内容的简单的介绍. ❷ 不要使用, ❸ 把简短的描述 放置于单元格内，把较长的描述内容 放到title属性内。 |
| ② | =left , right , center , justify ,char | 已过时. ❶ 规定 单元格内容的 水平对齐方式。 ❷ 使用 CSS 的text-align 来实现。 |
| ③ | =category_name | 已过时. 对单元格进行 分类。使用 scope 属性代替. |
| ④ | = character | 已过时. 规定根据 哪个字符 来进行 内容的对齐。使用 CSS 的text-align 来实现 |
| ⑤ | =number | 已过时. 使用 CSS vertical-align特性代替. 规定 对齐字符的偏移量。 |
⑥ colspan | =number | 跨列. 设置单元格可 横跨的列数。 |
⑦ rowspan | =number | 跨行. 规定单元格可 横跨的行数。 |
⑧ headers | =idrefs | 由空格分隔的 表头单元格 ID 列表，为数据单元格 提供表头信息。 |
⑨ scope | =col colgroup , row , rowgroup | 定义将 表头数据与单元数据 相关联的方法。 |
| ⑩ | =top , middle , bottom , baseline | 已过时 . 规定 单元格内容的 垂直排列方式。使用 CSS vertical-align特性代替 |
| ⑪ | =rgb(x,x,x) , #xxxxxx , colorname | 已过时. 不推荐使用。替代: 使用 CSS 中的background-color属性。规定 表格单元格的 背景颜色。 |
| ⑫ | =pixels , % | 已过时. 不推荐使用。请使用样式 取而代之。规定表格单元格的 高度。不推荐使用。请使用 css height 属性 替代它。规定表格单元格的 高度。 |
| ⑬ | =pixels , % | 已过时. 不推荐使用。请使用样式 取而代之。规定表格单元格的 宽度。使用 CSS width属性代替。 |
| ⑭ | =nowrap | 已过时. 不推荐使用。请使用样式取而代之。规定单元格中的内容 是否折行。 |
⑴ abbr 属性: 单元格 内容缩写 (已废弃,用 title 替代 长内容,单元格里 用缩写)
- ⑴
<th>,<td>单元格 标签的abbr缩写 属性 [已过时]- 单元格 内容缩写
- 规定 单元格中内容 的缩写版本。
- 表头内容的缩写,简短描述
- 不显示
- th-
abbr属性不会在普通的 web 浏览器中 造成 任何 视觉效果方面的变化。 - 使用
- 屏幕阅读器 可以利用该属性。
- th-
- 浏览器支持
- 由于在普通的 web 浏览器中 不会造成 任何视觉效果方面的变化，因此很难说 是否存在对
abbr属性的支持。
- 由于在普通的 web 浏览器中 不会造成 任何视觉效果方面的变化，因此很难说 是否存在对
- th-
abbr单元格 内容缩写 的属性值- 文本
text - 表头单元格的 短描述。
- 文本
- 使用说明 :
- 不要使用: 不要使用 这个属性，因为它 已经在最新标准中 过时。
- 替代的 属性: 把简短的描述 放置于单元格内，把较长的描述内容 放到
title属性内。
- 单元格 内容缩写
- 在 HTML 表格中使用 th-
abbr属性：
<table border="1">
<tr>
<th abbr="Company">Company in USA</th>
<th>Address</th>
</tr>
<tr>
<td>Apple, Inc.</td>
<td>1 Infinite Loop Cupertino, CA 95014</td>
</tr>
<tr>
<td>Google, Inc.</td>
<td>1600 Amphitheatre Parkway Mountain View, CA 94043</td>
</tr>
</table>
- 测试
- th-
abbr短描述 属性,显示上没有特别,换成 th-title="Company"鼠标放在表头位置,会显示相关信息
- th-
⑵ align 属性: 单元格内容 水平对齐 (已废弃,枚举属性,用 text-align 替代)
- ⑵
<th>,<td>标签的align水平对齐 属性[已过时]- 单元格内容 水平对齐
- 规定表格的 单元格中 内容的 水平对齐方式。
- 浏览器支持
- 所有浏览器都支持
align水平对齐 属性。
- 所有浏览器都支持
- 属性值 兼容性
- IE 无法正确地处理
"justify"值，IE 会 以居中的方式 进行处理。 - 几乎没有浏览器 能够正确地处理 “
char” 值。
- IE 无法正确地处理
- 使用提示:
- 不要使用: 不要使用 这个属性，因为它 已经在最新标准中 过时。
- 替代的 css:
left, center, right或justify这些对齐效果，应该使用 CSS 的text-align来实现。 char的对齐效果 使用CSS的text-align实现，char亦同. 在 CSS3中, 尚未实现 .
- 单元格内容 水平对齐
- 语法
<th align="left|right|center|justify|char">
<th>,<td>表头单元格 标签align属性值
| 属性值 | 用于 |
|---|---|
① left | 左对齐 内容（默认值）。 |
② right | 右对齐 内容。 |
③ center | 居中对齐 内容。 |
④ justify | 拉伸覆盖: 对 行进行伸展，这样 每行 都可以有 相等的长度（就像在报纸和杂志中）。 (仅文字内容): 内容拉伸 以覆盖单元格. |
⑤ char | 字符对齐: 将内容 对准 指定字符。 (仅文字内容): 内容相对<th>标签中的 某个字符对齐（默认值是 页面语言的 小数点字符）。该字符由 char 和charoff属性定义。 |
⑶ axis 属性:表头单元格 分类 (已废弃,用 标签属性 scope 替代)
-
⑶
<th>标签的axis分类 属性 [ 已过时 ]- axis ['æksɪs]
- 轴(zhou)
- 表头单元格 分类
- 对表头单元格 进行分类。
- 组合 列:
axis属性可用于- 对 相关的信息列 进行组合。
- th-
axis的属性值: 这个属性 包含了一个 空间分隔的 字符串 的 列表.- 每个字符串 是一组 单元格的
id，而该表头 适用于这个id。
- 每个字符串 是一组 单元格的
- 使用说明:
- 不要使用: 不要使用 这个属性，因为它 已经在最新标准中 过时。
- 替代的属性: 应该使用 标签的
scope属性代替。
- axis ['æksɪs]
-
带有分类 表头单元格的表格：
-
axis属性值- category_name
- 规定 类别的名称。
<table border="1" width="100%">
<tr>
<th axis="name">Company</td>
<th axis="contact">Email</td>
<th axis="contact">Phone</td>
<th axis="contact">Address</td>
</tr>
<tr>
<td>Apple, Inc.</td>
<td>someone@example.com</td>
<td>+12345678</td>
<td>1 Infinite Loop Cupertino, CA 95014</td>
</tr>
</table>
scope示例
<table>
<caption>Alien football stars</caption>
<tr>
<th scope="col">Player</th>
<th scope="col">Gloobles</th>
<th scope="col">Za'taak</th>
</tr>
<tr>
<th scope="row">TR-7</th>
<td>7</td>
<td>4,569</td>
</tr>
<tr>
<th scope="row">Khiresh Odo</th>
<td>7</td>
<td>7,223</td>
</tr>
<tr>
<th scope="row">Mia Oolong</th>
<td>9</td>
<td>6,219</td>
</tr>
</table>
- 在
<th>中 使用scope属性
⑷ char 属性: 字符对齐 (已废弃,用 text-align 替代)
- ⑷
<th> ,<td>表头单元格 标签的char字符 属性 [ 已过时 ]- 字符 对齐
- 规定将 表头单元格中的内容 相对某个字符的 对齐方式。
- 使用说明
- 限定 搭配属性: 仅当
align属性 设置为"char"时，才能使用char属性。- 通常其值 包含 一个(
.) , 来 排列 数字 或者 货币值。 - 如果
align没有被设置为char，这个属性 就会被忽略。
- 通常其值 包含 一个(
- 字符 对齐中心线: 可以使用
char属性，来指定 表格行内单元格中的一个字母，这个字母 就是 对齐的中心线。- 字母对齐: 列中的内容与
<th>元素中的 字母对齐。
- 字母对齐: 列中的内容与
- 限定 搭配属性: 仅当
char字符对齐 的默认值- 页面语言的
.小数点字符。
- 页面语言的
- 浏览器支持
- 几乎没有浏览器支持
char属性。
- 几乎没有浏览器支持
- 使用说明:
- 不要使用: 不要使用 这个属性，因为 它已经在最新标准中 过时。
- 替代的 css: 为了达到同样的效果， 你可以指定 该字母为
text-align属性中的 第一个值。
- 字符 对齐
- 语法
<th char="character">
<th align="char" char="C">Company</th>
char属性值- character
- 规定将 内容与之对齐的 字符。
- 示例1: 第一个 表头单元的的内容 与 “C” 字符对齐：
<table border="1">
<tr>
<th align="char" char="C">Company</th>
<th>Address</th>
</tr>
<tr>
<td>Apple, Inc.</td>
<td>1 Infinite Loop Cupertino, CA 95014</td>
</tr>
<tr>
<td>Google, Inc.</td>
<td>1600 Amphitheatre Parkway Mountain View, CA 94043</td>
</tr>
</table>
⑸ charoff 属性: 字符对齐 偏移量 (已废弃,数字,对齐方向和移动距离)
- ⑸
<th>,<td>标签的charoff字符对齐 偏移量 属性 [ 已过时 ]- 字符对齐 偏移量
- 设置内容 相对于由
char属性规定的 字符的 对齐偏移量。 - 移动: 将列数据 移到
char属性指定的字符 的右侧或者左侧。 - 移动长度:其值 指定了 移动的长度。
- 设置内容 相对于由
- 限定 搭配属性:
align="char",char- 仅当
align属性设置为"char"且已设置char属性时，才能使用charoff属性。
- 仅当
- 字符对齐 偏移量的 属性值
- number
- 数字
- 规定 对齐方向和移动长度。
- 值 指定了 移动的长度。
- 正数
- 规定向 字符的 右边对齐。
- 负数
- 规定向 字符的 左边对齐。
- 使用说明
- 不要使用: 不要使用 这个属性，因为它 已经在最新标准中 过时。
- 字符对齐 偏移量
- 第一个 表头单元的的内容 与 “C” 字符对齐, 向右二个字符的位置对齐(移动)：
<table border="1">
<tr>
<th align="char" char="C" charoff="2">Company</th>
<th>Address</th>
</tr>
<tr>
<td>Apple, Inc.</td>
<td>1 Infinite Loop Cupertino, CA 95014</td>
</tr>
<tr>
<td>Google, Inc.</td>
<td>1600 Amphitheatre Parkway Mountain View, CA 94043</td>
</tr>
</table>
⑹ colspan 属性: 跨列(合并列)的 数目 (正 整数)
- ⑹
<th>,<td>表头单元格 标签的colspan合并列 属性- 跨列(合并列)的 数目
colspan合并列 属性规定 表头单元格 可横跨的列数。- 正 整数: 包含一个正整数 ,表示了 每单元格中 扩展列的 数量。
colspan浏览器支持- 所有浏览器 都支持
colspan属性。 - 没有浏览器支持
colspan="0"，这个值 有特殊的意义.- 跨到 最后一列:
colspan="0"指示浏览器 横跨到 列组的最后一列。
- 跨到 最后一列:
- 所有浏览器 都支持
colspan合并列的 属性值- number
- 数字,正 整数
- 设置单元格可 横跨的列数。
- 扩展列的 数量: 正整数 表示了 每单元格中 扩展列的数量。
- 默认值为1 。就是只有1列,不扩展列.
- 大于1000 的值 将被认为是不正确的，并将被设置 为默认值(1)。
- 跨列(合并列)的 数目
⑺ rowspan 属性: 跨行(合并行)的 数目 (正 整数)
-
⑺
<th>,<td>表头单元格 标签的rowspan合并行 属性- span,美 /spæn/
- 跨越,跨度
- 跨行(合并行)的 数目
rowspan属性规定 表头单元格 可横跨的行数。
- 浏览器支持
- 所有浏览器 都支持
rowspan合并行 属性。 - 没有浏览器支持
rowspan="0"，这个值 有特殊的意义。- 跨到 最后一行:
rowspan="0": 指示浏览器 横跨到表格部分的 最后一行(末尾)（包括 即使是隐式定义的<thead>, <tbody>, <tfoot>）。
- 跨到 最后一行:
- 所有浏览器 都支持
rowspan合并行数目的 属性值- number
- 正 整数: 数字,正 整数(其实是 非负整数(non-negative integer),但0 不支持,所以 直接记忆成 正 整数即可)
- 设置表头单元格 可横跨的行数。
- 跨行数 比
65534大的值 被视作65534
- 跨行数 比
- △ 跨列数 最大是
1000,超1000,变成1
- span,美 /spæn/
-
示例, 见最后一章(表格的示例),目录列表中 可以看到.
⑻ headers 属性: 表头单元格 和 数据单元格 相关联 (不显示,关联 th 的 id)
- ⑻
<th>,<td>标签的headers属性- 单元格 相关联
headers属性规定 表头单元格 与 数据单元格 相关联。- 关联 th 的 id: 这个属性 包含了一个 (空格分隔的) 字符串的列表, 每个字符串 对应于 应用于此元素的
<th>元素的id属性。
- 不显示
headers属性 不会在普通浏览器中 产生任何视觉变化。- 使用
- 屏幕阅读器 可以利用该属性。
- 两种 单元格 相关联:
headers属性会将 表格中的 一个表头单元格 和一个数据单元格 联系起来。
headers关联表头单元格 的属性值- 表头单元格
id: th-id- 与 数据单元格 相关联的 (一个或多个) 表头单元格
<th>的 id。
- 与 数据单元格 相关联的 (一个或多个) 表头单元格
headers属性 对 非可视化的浏览器- 也就是那些 在显示出 相关数据单元格内容之前 就显示 表头单元格内容的浏览器 非常有用。
- 表头单元格
- 浏览器支持
- 由于不会在 普通浏览器中产生 任何视觉效果，很难判断 浏览器是否支持
headers属性。
- 由于不会在 普通浏览器中产生 任何视觉效果，很难判断 浏览器是否支持
- 单元格 相关联
⑼ nowrap 属性: 单元格内容 不换行 (已废弃,布尔属性,用 white-space 替代)
-
⑼
<th>,<td>标签的nowrap不换行 属性[已过时]- 单元格内容 不换行
nowrap属性规定 单元格中的 内容不换行。
- 浏览器支持
- 尽管 不赞成使用
nowrap属性，但是所有浏览器 都支持它
- 尽管 不赞成使用
- 替代的 css：
white-space: nowrap
- 单元格内容 不换行
-
带有
nowrap属性的表格单元
<tr>
<th>Company in USA</th>
<th nowrap="nowrap">Address</th>
</tr>
⑽ scope 属性: 表头单元格 归属范围 (不显示,枚举属性,限定标签 th 使用)
- ⑽
<th>标签的scope表头关联范围 属性- scope [skop]
- 范围
- 表头单元格的 归属范围: 这个枚举属性 定义了表头元素 (在
<th>中定义) 关联的单元格。scope属性标识 某个单元格 是否是行、列、行组或列组的 表头。
- 表头的归属: 表明
<th>是谁的表头. - 限定 标签: 仅将 此属性与
<th>元素一起使用,不要在<td>中使用.
- 不显示
scope属性 不会在普通浏览器中 产生任何视觉变化。- 使用
- 屏幕阅读器 可以利用该属性。
- 使用
scope属性，可以将 数据单元格与表头单元格 联系起来。- ❶ 绑定 行: 通过属性值
row- 会将 当前行的 所有单元格 和表头单元格 联系起来。
- ❷ 绑定 列: 指定
col- 会将 当前列的 所有单元格 和表头单元格 绑定起来。
- ❸ 绑定 行组和列组:
rowgroup和colgroup- 会将 行组的所有单元格（由
<thead>、<tbody>或<tfoot>标签定义）或列组中的所有单元格 和 表头单元格 绑定起来（由<col>或<colgroup>标签定义）。
- 会将 行组的所有单元格（由
- ❶ 绑定 行: 通过属性值
- 浏览器支持
- 由于不会 在普通浏览器中产生 任何视觉效果，很难判断 浏览器是否支持
scope属性。
- 由于不会 在普通浏览器中产生 任何视觉效果，很难判断 浏览器是否支持
- scope [skop]
<th>标签的scope绑定范围 属性值
| 属性值 | 用于 |
|---|---|
① col | 规定单元格是 列的表头。表头 关联一行中 所有的单元格。 |
② row | 规定单元格是 行的表头。表头 关联一列中 所有的单元格。 |
③ colgroup | 规定单元格是 列组的表头。表头 属于一个列组 并与其中所有单元格 相关联。 |
④ rowgroup | 规定单元格是 行组的表头。表头 属于一个行组 并与其中所有单元格 相关联。这些单元格 可以被放在 表头的左侧或右侧，取决于 <table>元素中 dir属性的值 。 |
⑤ auto | 未设置的 默认值. 未指定 此属性时的 默认值为 auto。 |
- 把两个
th元素标识为 列的表头 - 把两个
th元素标识为 行的表头：
<table border="1">
<tr>
<th></th>
<th scope="col">Month</th>
<th scope="col">Savings</th>
</tr>
<tr>
<th scope="row">1</td>
<td>January</td>
<td>$100</td>
</tr>
<tr>
<th scope="row">2</td>
<td>February</td>
<td>$80</td>
</tr>
</table>
⑾ valign 属性: 单元格内容 垂直对齐 (已废弃,用 vertical-align 替代)
- ⑾
<th>,<td>标签的valign属性- 单元格内容 垂直对齐
valign属性规定 单元格中内容的 垂直对齐方式。
- 使用说明：
- 不要使用: 不要使用 这个属性，因为 它已经在最新标准中 过时。
- 替代的 css: 使用 CSS
vertical-align特性代替。(美 /ˈvɜːrtɪkl/,垂直的)
- 单元格内容 垂直对齐
<th>标签valign属性值
| 属性值 | 用于 |
|---|---|
| ① top | 对内容进行 上对齐。 |
| ② middle | 对内容进行 居中对齐（默认值）。 |
| ③ bottom | 对内容进行 下对齐。 |
| ④ baseline | 与 基线对齐。 |
- 示例1: 带有 不同垂直对齐 单元格的表格：
<table border="1" style="height:200px">
<tr>
<th valign="top">Company</th>
<th valign="bottom">Address</th>
</tr>
<tr>
<td>Apple, Inc.</td>
<td>1 Infinite Loop Cupertino, CA 95014</td>
</tr>
</table>
baseline值- 基线: 是一条 虚构的线。
- 基线应用
- 在一行文本中，大多数字母 以基线 为基准。
- 英文字母中
bottom在 字母 p 的最下方 ,baseline基线 在 p的 圆圈 正下方
baseline值设置行中的 所有表格数据- 都分享 相同的基线。
- 该值的效果
- 常常与
bottom值相同。不过，如果文本的 字号 各不相同，那么baseline的效果 会更好。
- 常常与
5. ★ thead / tbody / tfoot 对行 进行分组 (分组 标签,标题行,数据行,汇总行)
-
把行 分组 (分组标签):
<thead>、<tfoot>以及<tbody>用于 把行 分组- 分组后, 分别是: 表头,主体,表注 (标题行,数据行,汇总行).
- ① 表头:
<thead>标签定义 表格的表头。- 组合 表头内容: 该标签用于 组合表头内容。
<thead>的位置:- 要在
<caption>表格标题 或<colgroup>列组 之后 - 在
<tbody>, <tfoot>和<tr>之前
- 要在
- ② 主体:
<tbody>标签表格 主体（正文）。- 组合 主体内容: 该标签用于 组合 表格的主体内容。
<tbody>封装了一组表行(<tr>元素)，表示它们 组成了 表的主体(<table>)。
- 数量 可以多个:
<tbody>元素在一个<table> 元素中 可以出现 一个或者多个.
- 组合 主体内容: 该标签用于 组合 表格的主体内容。
- ③ 表注:
<tfoot>标签定义表格的 页脚（脚注或表注）。- 该标签用于 组合 表格中的 表注内容。
- 汇总行: 定义一组 汇总 表格中各列 的行
- ① 表头:
- 分组后, 分别是: 表头,主体,表注 (标题行,数据行,汇总行).
-
使用说明
- 强制 三胞胎: 如果使用
<thead>、<tfoot>以及<tbody>元素中的一个，就 必须 3 个标签 一起使用。- 3 个标签 必须一起用 (为什么 ? 为了组成 一个完整的整体 ?不一起使用,又会怎样 ?)
- 呈现 和可访问性:
<tbody>元素及其兄弟元素<thead>和<tfoot>提供了 有用的 语义信息，可用于 屏幕 或 打印机 的 呈现 以及 可访问性。 - 出现次序是：
<thead>,<tbody>,<tfoot>
- 强制 三胞胎: 如果使用
-
限定 父标签 和子标签
- 限定 父标签: 必须在
<table>表格 元素内部 使用这 3 个标签。 - 限定 子标签:
<thead>,<tbody>,<tfoot>内部 只能有 表格行<tr>标签,不能有 其他的标签 放在里面.(有了行,才能有 行内的单元格th ,td)- 其他的标签,比如 段落
p,无序列表ul,表格table等, 作为数据, 可以放在 数据单元格td中.
table> thead > tr > th|td
- 限定 父标签: 必须在
-
显示
- 默认 不影响外观: 在默认情况下 , 这些元素 不会影响到表格的布局。
- 修改 样式: 不过，您可以使用 CSS 使这些元素 改变表格的外观。
-
把行分组 和分组的用途:
<thead>,<tbody>,<tfoot>元素 , 对表格中的行 进行分组。- 行的分组
- ① 标题 行: 当您创建某个表格时，希望拥有一个 标题行
- ② 数据 行: 一些带有数据的行
- ③ 汇总 行: 位于底部的一个 总计行
- 正文 滚动: 这种划分, 使浏览器有能力支持 独立于 表格标题和页脚的 表格正文滚动。
- 长表格 打印: 当长的表格 被打印 时，表格的表头和页脚 可被打印在 包含表格数据的 每张页面上。
- 行的分组
-
可选的属性
- 已过时属性:
align,char, charoff ,valign - 使用 CSS 替代
- 已过时属性:
-
3个分组标签 和属性的 浏览器支持
-
示例1: 把表格 分成 表头,主体,表注 三部分,分别设置样式
<head>
<style type="text/css">
thead,
tfoot {
background-color: #3f87a6;/*表头行和脚注汇总行的背景颜色*/
color: #fff;/*脚注总结行的字体颜色*/
}
tbody {
background-color: #e4f0f5;/*主体内容的背景颜色*/
}
table {
border-collapse: collapse;/*边之间的间隙: 不要间隙*/
border: 3px solid rgb(200, 200, 200);/*表格的边框粗细 样式 颜色*/
letter-spacing: 1px;/*字符之间的距离*/
font-family: sans-serif;/*字体*/
font-size: .8rem;/*字号大小*/
}
td,
th {
border: 1px solid rgb(150,150,100);/*单元格的边框 粗细 样式 颜色*/
padding: 5px 10px;/*表头单元格和数据单元格的 上下,左右内边距*/
}
td {
text-align: center;/* 数据单元格的内容 居中*/
}
</style>
</head>
<body>
<table border="1">
<thead>
<tr>
<th>Items</th>
<th scope="col">Expenditure</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">Donuts</th>
<td>3,000</td>
</tr>
<tr>
<th scope="row">Stationary</th>
<td>18,000</td>
</tr>
</tbody>
<tfoot>
<tr>
<th scope="row">Totals</th>
<td>21,000</td>
</tr>
</tfoot>
</table>
</body>
- 嵌套关系
<table>- ①
table > thead > tr > th <thead><tr><th>
- ②
table > tbody > tr > th | td <tbody><tr><th><td>
- ③
table > tfoot > tr > th | td <tfoot><tr><th><td>
- ①
- 总结:
table> ( thead | tbody | tfoot) > tr > ( th|td )
6. ★ col 表格的 列 (为每列 定义 公共属性/样式,搭配 colgroup 标签)
-
定义 一个列:
- HTML
<col>元素在表中 定义一个列，用于 在所有公共单元格上 定义 公共语义。 - 类似于
<tr>,一个是行,一个列,分别管理 横向和纵向。
- HTML
-
限定 父元素:
<col>通常放在<colgroup>元素中 (也可放在<table>中)。 -
使用说明
-
① 为列 定义 公共属性 (相同属性):
- 一列 具有相同属性: 在
<col>标签中 定义一个属性, 这个属性 会应用在 这一列的 所有单元格中 (<th>,<td>)- 当一列的单元格,都需要定义 相同属性的时候,这样很 节省时间。
- 多个列 具有相同属性: 如果想在
<colgroup>内部 为每个列 规定不同的属性值时- 使用 多个
<col>列 元素。 - 如果没有
<col>列 元素- 父业子乘: 列会从
<colgroup>列组 那里 继承所有的属性值。
- 父业子乘: 列会从
- 使用 多个
- 一列 具有相同属性: 在
-
② 为列 定义 公共样式 (相同的样式):
- 一列 具有相同样式:
- 如果想 对一列(的所有单元格
th,td) 应用 相同样式，可以在<col>中 定义一个类class, 就相当于 给这一列的 所有单元格 都定义了一个 相同的class. - 对这个
class应用样式, 这样就不需要 对各个单元格 重复定义 相同的属性和 css 了。 - 添加
class类 属性: 给<col>列 标签添加class类 属性。这样就可以使用 CSS 来负责对齐方式、宽度和颜色等等。
- 如果想 对一列(的所有单元格
- 一列 具有相同样式:
-
-
<col>列 标签的位置: 只能在<table>或<colgroup>元素中 使用<col>列 标签。 -
正确关闭: HTML 与 XHTML 之间的差异
- 在 HTML 中，
<col>没有结束标签。 - 在 XHTML 中，
<col>标签必须被 正确的关闭。 - 空标签:
<col>列 元素是 仅包含属性的 标签,因为 没有结束标签,所以 没有标签内容,是空的。
- 在 HTML 中，
-
创建列: 必须在
<tr>元素内部规定<td>,<th>单元格 元素。
<col>列 标签 的 可选的属性span- 已过时 废弃的属性:
align , valign , char , charoff , width.
<col>浏览器支持- 所有主流浏览器 都支持
<col>列 标签。 
- 所有主流浏览器 都支持
⑴ span 属性: 跨列(合并列)的 数目
<col>列 标签的span跨列(合并列) 属性- 浏览器支持
- 所有浏览器都支持
span属性。
- 所有浏览器都支持
- 跨列(合并列)的 数目 :
span属性规定<col>元素应该 横跨的列数,对应的是几列。- 逻辑 跨列: 逻辑上的跨列,不是视觉上的跨列.(使用 CSS 添加样式后,才会出现视觉上的分组)
- 使用说明
- 逻辑跨列 (影响列数):
<col>标签，如同<colgroup> 标签中的span属性一样，允许设置<col>标签能够影响 多少列。 - 默认对应的列数: 一列. 在默认情况下，它只能影响一列。
- 逻辑跨列 (影响列数):
- 浏览器支持
- 示例1: 给 4列数据 设置样式,前两列1个样式,后两列 1个样式
<head>
<style type="text/css">
.batman {
background-color: #d7d9f2;/* 给类名为.batman 的列 设置背景颜色*/
}
.flash {
background-color: #ffe8d4;/* 给类名为.flash 的列 设置背景颜色*/
}
caption {
border:1px solid; /*给表格的标题 设置边框*/
padding: 8px;/* 表格标题的内边距*/
caption-side: bottom;/*表格标题显示的位置 在表格的下方*/
}
table {
border-collapse: collapse;/*表格的单元格的边框之间的间隙*/
border: 2px solid rgb(100, 100, 100);/*表格四周的边框*/
letter-spacing: 1px;/*表格内容 字符之间的间距*/
font-family: sans-serif;
font-size: .7rem;
}
td,
th {
border: 1px solid rgb(100, 100, 100);/*单元格的边框*/
padding: 10px 10px;
}
td {
text-align: center;
}
</style>
</head>
<body>
<table>
<caption>Superheros and sidekicks</caption>
<colgroup>
<col> <!-- 第1列 ,默认一个col 标签,对应1列-->
<col span="2" class="batman"> <!-- 第2列和第3列,因为设置了跨2列 -->
<col span="2" class="flash"> <!-- 第3列和第4列,设置了跨2列 -->
</colgroup>
<tr>
<td> </td>
<th scope="col">Batman</th>
<th scope="col">Robin</th>
<th scope="col">The Flash</th>
<th scope="col">Kid Flash</th>
</tr>
<tr>
<th scope="row">Skill</th>
<td>Smarts</td>
<td>Dex, acrobat</td>
<td>Super speed</td>
<td>Super speed</td>
</tr>
</table>
</body>
- 总结:
- 跨列数目 (影响的列数): col-
span - 指定 列的样式:col-
class - 指定 表头单元格的归属: 是 列标题 还是行标题: th-
scope
- 跨列数目 (影响的列数): col-
7. ★ colgroup 列组: 对列 进行分组 (搭配 col 标签)
-
组合 列:
<colgroup>列组 标签用于 对表格中的 列进行组合，以便对其 进行格式化。- 对列 进行分组
- 一组 列: 表格列组（Column Group
<colgroup>） 标签 用来定义 表中的 一组列
-
对列 应用样式:
- 如果要对 全部列 应用样式
<colgroup>标签很有用，这样就 不需要对 各个单元和各行 重复应用样式 了。
- 如果要对 全部列 应用样式
-
使用说明
- 限定 父元素:
<colgroup>列组 标签只能在<table>表格 标签中使用。 - 限定 位置: 要在
<thead>表头标签 之前
- 限定 父元素:
-
<colgroup>列组 标签 的 可选的属性span- 过时 属性:
align , valign , char , charoff , width - 列组 标签 不使用
text-align属性:- 不要为一个
<colgroup>列组 元素选择器设置text-align文本对齐 属性.- 因为
<td>数据单元格 元素并不是<colgroup>列组 元素的后代，不继承于它。 <colgroup>的后代是<col>,是空标签,没有标签内容的,所以用不到 文本对齐text-align.
- 因为
- 不要为一个
-
<col> , <colgroup>之间的区别:- 都可以作用于: 单列 和多列
- 细化:
<col>列 标签的作用是 细化<colgroup>列组 标签- 即使 在一个列组中，列与列之间 也可以设置 不同的样式，这时就可以使用
<col>列 标签
- 即使 在一个列组中，列与列之间 也可以设置 不同的样式，这时就可以使用
- 组合 列
<colgroup>列组 标签,也可以作用于 单列,作用于全部列时 更有用.当给多个列,设置不同的样式时,<colgroup>一般用于 组合<col>.
-
浏览器支持
- 所有主流浏览器 都支持
<colgroup>列组 标签。 - Firefox、Chrome 以及 Safari 仅支持
< colgroup>元素的span和width属性。 
- 所有主流浏览器 都支持
- 示例1: 两个 列组 元素 为表格中的三列 规定了 不同的背景色（注意第一个列组 元素横跨两列）：
<table width="100%" border="1">
<colgroup span="2" style="background-color:rgb(120,120,120)"></colgroup>
<colgroup style="background-color:rgb(120,220,120)"></colgroup>
<tr>
<th>ISBN</th>
<th>Title</th>
<th>Price</th>
</tr>
<tr>
<td>3476896</td>
<td>My first HTML</td>
<td>$53</td>
</tr>
<tr>
<td>2489604</td>
<td>My first CSS</td>
<td>$47</td>
</tr>
</table>
- 单独使用:
<col>列 标签和<colgroup>列组 标签 都可以单独使用,都可以 作用于 单列和多列 - 细分 和组合使用: 要细分列组中的列,
<col>列 标签和<colgroup>列组 标签 一起使用 比较好 ,colgroup用来组合col:colgroup > col
<colgroup>
<col> <!-- 第1列 ,默认一个col 标签,对应1列 -->
<col span="2" class="batman"> <!-- 第2列和第3列,因为设置了跨2列 -->
<col span="2" class="flash"> <!-- 第3列和第4列,设置了跨2列 -->
</colgroup>
8. table 表格示例
⑴ 普通表格 (搭配 table, tr td 标签)
- 示例1: 普通的表格
<p>每个表格由 table 标签开始。</p>
<p>每个表格行由 tr 标签开始。</p>
<p>每个表格数据由 td 标签开始。</p>
<h4>一列：</h4>
<table border="1">
<tr>
<td>100</td>
</tr>
</table>
<h4>一行三列：</h4>
<table border="1">
<tr>
<td>100</td>
<td>200</td>
<td>300</td>
</tr>
</table>
- 总结
- 行的数目:
<tr>行标签 个数决定 - 列的数目:
<td>单元格 标签 个数决定,必须是<tr>的子元素
- 行的数目:
⑵ 带 水平表头 和垂直表头 的表格 (搭配 th )
- 示例2: 带表头的表格,带 垂直表头的表格
<h4>带表头 2行3列: 1tr> 3th , 1tr> 3td</h4>
<table border="1">
<tr>
<th>姓名</th>
<th>电话</th>
<th>电话</th>
</tr>
<tr>
<td>Bill Gates</td>
<td>555 77 854</td>
<td>555 77 855</td>
</tr>
</table>
<h4>垂直的表头：1tr> (1th + 1td) </h4>
<p>3个 th ,不在一个 tr 中,在每个 tr 的 第一个子元素的位置</p>
<table border="1">
<tr>
<th>姓名</th>
<td>Bill Gates</td>
</tr>
<tr>
<th>电话</th>
<td>555 77 854</td>
</tr>
<tr>
<th>电话</th>
<td>555 77 855</td>
</tr>
</table>
- 水平表头: 表头单元格
<th>,都在一行 一个<tr>里 - 垂直表头: 表头单元格
<th>, 放在 多行里, 每个<tr>行 标签 的第一个子元素的位置
⑶ 带 空单元格 的表格 (td 内容, 使用 & nbsp ; 占位)
- 示例3: 带有 空单元格 的表格
- 使用
" "处理 没有内容的单元格。用空格占位.
- 使用
<table border="1">
<tr>
<td>Some text1</td>
<td>Some text2</td>
</tr>
<tr>
<td> </td>
<td>Some text4</td>
</tr>
</table>
⑷ 带 表格标题 的表格 (搭配 caption 标签)
- 示例4: 一个带标题 (caption) 的表格
- 这个表格有一个标题，以及 粗的外围边框：
- 嵌套关系
table > captiontable > tr > td<table><caption>和 tr 行标签 是同层次的<tr><td>
<table border="5">
<caption>我是表格标题</caption>
<tr>
<td>100</td>
<td>200</td>
<td>300</td>
</tr>
<tr>
<td>400</td>
<td>500</td>
<td>600</td>
</tr>
</table>
- 表格的标题: 表格标题
<caption>标签,默认位置是: 居中 显示.
⑸ 带 跨行和跨列 (合并行或列) 的表格 (单元格 搭配 rowspan,colspan 属性)
- 示例5: 跨行 或跨列的 表格单元格
<h4>横跨两列的单元格：</h4>
<p>第一行的 表头的第二单元格和第三单元格 显示成一个单元格: th colspan="2" 合并2列 ,第一行的 第三个 th 省略了</p>
<table border="1">
<tr>
<th>姓名</th>
<th colspan="2">电话</th>
<!-- 这位置,原本有个 th ,因为合并列的关系,被左边的占位置了,只能删掉 -->
</tr>
<tr>
<td>Bill Gates</td>
<td>555 77 854</td>
<td>555 77 855</td>
</tr>
</table>
<h4>横跨两行的单元格：</h4>
<p>第二行的第一个表头单元格 占用2个单元格 th rowspan="2",第三行的第一个 th 省略了</p>
<table border="1">
<tr>
<th>姓名</th>
<td>Bill Gates</td>
</tr>
<tr>
<th rowspan="2">电话</th>
<td>555 77 854</td>
</tr>
<tr>
<!-- 原本有个 th ,因为合并列的关系,被上一行的 占位置了,只能删掉 -->
<td>555 77 855</td>
</tr>
</table>
| 合并列: 横向合并 | 合并行: 纵向合并 |
 |  |
- 删除 单元格标签:
- 删除 被合并的单元格 标签:
- 被合并的那个单元格
<td>或者表头单元格<th>去掉 (如,原来一行3个 td 单元格,变只有2个 td 单元格) - △ 预判 行列位置: 预判下 被合并的是单元格的 行列位置,就知道该省掉哪个单元格了
- 比如上方例子,第一个被省略的 (1,3),一行 第三列,第二个是 (3,1),三行 第一列,这样就能确定 是第几行 省略了
<th>或者<td>了.
- 比如上方例子,第一个被省略的 (1,3),一行 第三列,第二个是 (3,1),三行 第一列,这样就能确定 是第几行 省略了
- 被合并的那个单元格
- 删除 被合并的单元格 标签:
- 合并列 ( 横向合并) : 删除 本行的
th,td,搭配 合并列属性colspan - 合并行 (纵向合并) : 删除 下一行的
th,td, 搭配 合并行属性rowspan - 合并属性的 归属: 合并行列的 开始单元格 标签.
- 合并行或列 的第一个
<td>,<th>用合并属性,后面的删除<td>,<th>,根据合并的列数删除
- 合并行或列 的第一个
⑹ 嵌套 其他标签 (搭配 p,table,ul 等标签,放在 td 中)
- 示例6: 表格内 显示其他元素,如 段落,无序列表等
- 放在 数据单元格
<td>中: 在 数据单元格<td>内 ,嵌套其他的标签,因为<td>就是 数据单元格,所以放置 其他标签数据 也很合理.
- 放在 数据单元格
- 嵌套关系
- 嵌套 段落:
table > tr > td > p - 嵌套 另一个表格:
table > tr > td > table - 嵌套 无序列表:
table > tr > td > ul
- 嵌套 段落:
<table><tr><td>(<td>单元格的子元素:<p>,<table>,<ul>)- ❶
<p> - ❷
<table><tr><td>
- ❸
<ul>
- ❶
<table border="1">
<tr>
<td>
<p>这是一个段落。</p>
<p>这是另一个段落。</p>
</td>
<td>这个单元包含一个表格：
<table border="1">
<tr>
<td>A</td>
<td>B</td>
</tr>
<tr>
<td>C</td>
<td>D</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>这个单元包含一个列表：
<ul>
<li>苹果</li>
<li>香蕉</li>
<li>菠萝</li>
</ul>
</td>
<td>HELLO</td>
</tr>
</table>
- 总结
- 限定 父元素: 表格中 包含其他标签,放在
<td>中 .<p>,<table>,<ul>放在<td>中- 在
<td>单元格中,放上 : 段落,无序列表,表格,文本
- 限定 父元素: 表格中 包含其他标签,放在
⑺ 复杂表格 (搭配 thead,tbody,tfoot,colgroup,col 标签)
- 示例7: 多个 表格元素
<!-- 带表头单元格 -->
<p>含 th</p>
<table border="1">
<tr>
<th>First name</th>
<th>Last name</th>
</tr>
<tr>
<td>John</td>
<td>Doe</td>
</tr>
<tr>
<td>Jane</td>
<td>Doe</td>
</tr>
</table>
<!-- 表格分成 表头,主体,页脚 三部分 -->
<p>含 thead, tfoot, and tbody</p>
<table border="1">
<thead>
<tr>
<th>Header content 1</th>
<th>Header content 2</th>
</tr>
</thead>
<tbody>
<tr>
<td>Body content 1</td>
<td>Body content 2</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>Footer content 1</td>
<td>Footer content 2</td>
</tr>
</tfoot>
</table>
<!-- 含列组 -->
<p>含 colgroup</p>
<table border="1">
<colgroup span="4" class="columns"></colgroup>
<tr>
<th>Countries</th>
<th>Capitals</th>
<th>Population</th>
<th>Language</th>
</tr>
<tr>
<td>USA</td>
<td>Washington D.C.</td>
<td>309 million</td>
<td>English</td>
</tr>
<tr>
<td>Sweden</td>
<td>Stockholm</td>
<td>9 million</td>
<td>Swedish</td>
</tr>
</table>
<!-- 含列组 和列 标签 -->
<p>含 colgroup and col</p>
<table border="1">
<colgroup>
<col class="column1">
<col class="columns2plus3" span="2">
</colgroup>
<tr>
<th>Lime</th>
<th>Lemon</th>
<th>Orange</th>
</tr>
<tr>
<td>Green</td>
<td>Yellow</td>
<td>Orange</td>
</tr>
</table>
<p>含 caption</p>
<table border="1">
<caption>Awesome caption</caption>
<tr>
<td>Awesome data</td>
</tr>
</table>
结束语
- 捐助: 喜欢这篇文章吗? 持续更新中,捐助此文,向团团 表示鼓励和支持吧~❤
- 捐助二维码:
- 感谢：♥♥♥ 如果这篇文章 对您有帮助的话，可以点赞、评论、关注，鼓励下作者哦，感谢阅读 ~
- 欢迎指正: 如果发现 有需要 更正的细节问题,欢迎指正,谢谢大家 ~╮(￣▽￣)╭
- 转载 请注明出处 ,Thanks♪(･ω･)ﾉ
- 作者：Hey_Coder
- 来源：CSDN
- 原文：https://blog.csdn.net/VickyTsai/article/details/90635277
- 版权声明：本文为博主原创文章，转载请附上博文链接！
257
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
