【HTML 教程】表格标签

作者 | 阮一峰

表格（table）以行（row）和列（column）的形式展示数据。

1、，

是一个块级容器标签，所有表格内容都要放在这个标签里面。

<table>
  ... ...
table>

总是里面的第一个子元素，表示表格的标题。该元素是可选的。

<table>
  <caption>示例表格caption>
table>

2、

、、

、、都是块级容器元素，且都是的一级子元素，分别表示表头、表体和表尾。

<table>
  <thead>... ...thead>
  <tbody>... ...tbody>
  <tfoot>... ...tfoot>
table>

这三个元素都是可选的。如果使用了

，那么和一定在的后面。如果使用了，那么一定在后面。

大型表格内部可以使用多个

，表示连续的多个部分。

3、

，

是的一级子元素，用来包含一组列的定义。是的子元素，用来定义表格的一列。

<table>
  <colgroup>
    <col>
    <col>
    <col>
  colgroup>
table>

上面代码表明表格有3列。

不仅是一个单独使用的标签，没有结束标志，而且还是一个空元素，没有子元素。它的主要作用，除了申明表格结构，还可以为表格附加样式。

<table>
  <colgroup>
    <col class="c1">
    <col class="c2">
    <col class="c3">
  colgroup>
  <tr>
    <td>1td>
    <td>2td>
    <td>3td>
  tr>
table>

上面代码中，

声明表格有三列，每一列有自己的 class，可以使用 CSS 针对每个 class 设定样式，会对整个表格生效。

有一个span属性，值为正整数，默认为1。如果大于1，就表示该列的宽度包含连续的多列。

<table>
  <colgroup>
    <col>
    <col span="2">
    <col>
  colgroup>
table>

上面代码中，表格的表头定义了3列，实际数据有4列。表头的第2列会连续跨2列。

4、

标签表示表格的一行（table row）。如果表格有、、，那么就放在这些容器元素之中，否则直接放在的下一级。

<table>
  <tr>...tr>
  <tr>...tr>
  <tr>...tr>
table>

上面代码表示表格共有3行。

5、

，		和	都用来定义表格的单元格。其中，	是标题单元格，	是数据单元格。 <table> <tr> <th>学号th><th>姓名th> tr> <tr> <td>001td><td>张三td> tr> <tr> <td>002td><td>李四td> tr> table> 上面代码中，表格一共有三行。第一行是标题行，所以使用	；第二行和第三行是数据行，所以使用	。 （1）colspan属性，rowspan属性 单元格会有跨越多行或多列的情况，这要通过colspan属性和rowspan属性设置，前者表示单元格跨越的栏数，后者表示单元格跨越的行数。它们的值都是一个非负整数，默认为1。 <table> <tr> <td colspan="2">Atd><td>Btd> tr> <tr> <td>Atd><td>Btd><td>Ctd> tr> table> 上面代码中，第一行的第一个单元格会跨两列。 （2）headers属性 如果表格很大，单元格很多，源码里面会看不清，哪个单元格对应哪个表头，这时就可以使用headers属性。 <table> <tr> <th id="no">学号th><th id="names">姓名th> tr> <tr> <td headers="no">001td><td headers="names">张三td> tr> <tr> <td headers="no">002td><td headers="names">李四td> tr> table> 上面代码中，标题栏的	设置了id属性，后面的	单元格的headers属性就对应这些id属性的值，因此就能看出来这些单元格对应哪个标题栏。 headers属性的值总是对应	标签的id属性的值。由于一个单元格可以对应多个标题栏（跨行的情况），所以headers属性可以是一个空格分隔的字符串，对应多个id属性的值。 （3）scope属性 scope属性只有	标签支持，一般不在	标签使用，表示该	单元格到底是栏的标题，还是列的标题。 <table> <tr> <th scope="col">姓名th> <th scope="col">学号th> <th scope="col">性别th> tr> <tr> <th scope="row">张三th> <td>001td> <td>男td> tr> <tr> <th scope="row">李四th> <td>002td> <td>男td> tr> table> 上面代码中，第一行的标题栏都是列标题，所以	的scope属性为col，第二行和第三行的第一列是行标题，所以	标签的scope属性为row。 scope属性可以取下面这些值。 row：该行的所有单元格，都与该标题单元格相关。 col：该列的所有单元格，都与该标题单元格相关。 rowgroup：多行组成的一个行组的所有单元格，都与该标题单元格相关，可以与rowspan属性配合使用。 colgroup：多列组成的一个列组的所有单元格，都与该标题单元格相关，可以与colspan属性配合使用。 auto：默认值，表示由浏览器自行决定。 下面是一个colgroup属性和rowgroup属性的例子。 <table> <thead> <tr> <th scope="col">海报名称th> <th scope="col">颜色th> <th colspan="3" scope="colgroup">尺寸th> tr> thead> <tbody> <tr> <th rowspan="3" scope="rowgroup">Zodiacth> <th scope="row">Full colorth> <td>A2td> <td>A3td> <td>A4td> tr> <tr> <th scope="row">Black and whiteth> <td>A1td> <td>A2td> <td>A3td> tr> <tr> <th scope="row">Sepiath> <td>A3td> <td>A4td> <td>A5td> tr> tbody> table> 上面的例子中，列标题“尺寸”的scope属性为colgroup，表示这个标题单元格对应多列（本例为3列）；行标题的scope属性为rowgroup，表示这个标题单元格对应多行（本例为2行）。 本文完~ 浏览 26 点赞 评论 收藏 分享 手机扫一扫分享 分享 举报 评论 图片 表情 视频 评价 全部评论 推荐 eXtremeTableJSP表格标签库 eXtremeTable是一个可扩展的用于以表格的形式来显示数据的一组JSP标签库.代码有如： &l WebJMXJSP表格标签库 WebJMX标签库项目可以控制你的JMX接口。WebJMX这个标签库项目的目的是生成一个JSP标签库，可以让有技巧的JSP开发人员为JMX生成一个可定制的、规范的、基于Web的界面。 HTML meta 标签详解 JavaScript之禅 0 eXtremeTableJSP表格标签库 eXtremeTable是一个可扩展的用于以表格的形式来显示数据的一组JSP标签库.代码有如： <ec:table  items="presidents"  action="${pageCont AutoEmbed多媒体HTML标签生成类 AutoEmbed是一个PHP的类，用来生成在页面上嵌入音频和视频（包括Flash动画）的HTML标签。 AutoEmbed多媒体HTML标签生成类 AutoEmbed 是一个PHP的类，用来生成在页面上嵌入音频和视频（包括Flash动画）的HTML 【HTML】meta 标签到底是做什么的 前端自习课 0 Python私活300元，给Excel表格打标签 蚂蚁学Python 0 matplotlib绘图教程：设置标签与图例 Python与算法社区 0 关键词高亮：HTML字符串中匹配跨标签关键词 编程微刊 0 点赞 评论 收藏 分享 手机扫一扫分享 分享 举报