html5 table 教程,HTML <table> 标签 | w3cschool菜鸟教程

╰+攻爆jí腚メ 2022-10-06 10:48 215阅读 0赞

HTML

实例

一个简单的 HTML 表格，包含两列两行：

<table> 
 <tbody> 
  <tr> 
   <th>Month</th> 
   <th>Savings</th> 
  </tr> 
  <tr> 
   <td>January</td> 
   <td>$100</td> 
  </tr> 
 </tbody> 
</table>

尝试一下 »

(更多实例见页面底部)

浏览器支持

![33899cac12a61a56804deda4daa5478d.gif][]

![b3a61ac54b0c34d189bd366626fab196.gif][]

![0ffb6a1e72531b145d0a4708f79ed93c.gif][]

![68daad65012e106459a18dc1d0009732.gif][]

![3932483f6a649a702f07e5300d04086f.gif][]

所有主流浏览器都支持

标签定义及使用说明

一个 HTML 表格包括

<table>  、      
 <tbody> 
  <tr> 
   <th> 以及 </th> 
   <td> 元素。</td> 
  </tr> 
  <tr> 
   <th> 元素定义表头，</th> 
   <td> 元素定义表格单元。<p>更复杂的 HTML 表格也可能包括 </p></td> 
  </tr> 
 </tbody> 
</table>

HTML 4.01 与 HTML5之间的差异

在 HTML5 中，仅支持 "border" 属性，并且只允许使用值 "1" 或 ""。

属性 属性 值 描述

left

center

right HTML5 不支持。HTML 4.01 已废弃。 规定表格相对周围元素的对齐方式。

rgb(x,x,x)

\#xxxxxx

colorname HTML5 不支持。HTML 4.01 已废弃。 规定表格的背景颜色。

"" 规定表格单元是否拥有边框。

pixels HTML5 不支持。规定单元边沿与其内容之间的空白。

pixels HTML5 不支持。规定单元格之间的空白。

void

above

below

hsides

lhs

rhs

vsides

box

border HTML5 不支持。规定外侧边框的哪个部分是可见的。

none

groups

rows

cols

all HTML5 不支持。规定内侧边框的哪个部分是可见的。

text HTML5 不支持。规定表格的摘要。

pixels

% HTML5 不支持。规定表格的宽度。

全局属性

事件属性

![f2f7c81972489406ce39e28143c7a56b.gif][]

尝试一下 - 实例

表格中的标题

本例演示如何显示表格标题。

空单元格

本例演示如何使用 " " 处理没有内容的单元格。

带有标题的表格

本例演示一个带标题(caption)的表格。

表格内的标签

本例演示如何在其他的元素内显示元素。

跨行或跨列的表格单元格

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

HTML 教程：HTML 表格

HTML DOM 参考手册：Table 对象

[33899cac12a61a56804deda4daa5478d.gif]: /images/20221005/88fd6c4b1ca5468d92983d541e1a667e.png
[b3a61ac54b0c34d189bd366626fab196.gif]: /images/20221005/38318f02cca245be9ba681343a07a5c9.png
[0ffb6a1e72531b145d0a4708f79ed93c.gif]: /images/20221005/f784e52e81584dcea9144594dce0e5e0.png
[68daad65012e106459a18dc1d0009732.gif]: /images/20221005/77323ea5a2e14faeadf24bc8ae7aab3b.png
[3932483f6a649a702f07e5300d04086f.gif]: /images/20221005/a8477771817d4337a0ebf7325701ff88.png
[f2f7c81972489406ce39e28143c7a56b.gif]: /images/20221005/e2f5e2497dec453f91f38cf9c5836f94.png