【HTML 教程】表格标签
共 1996字，需浏览 4分钟
·
2020-12-08 01:29
作者 | 阮一峰
表格（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 设定样式，会对整个表格生效。
<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行）。
本文完~ 
、、都是块级容器元素，且都是 这三个元素都是可选的。如果使用了，那么和一定在的后面。如果使用了，那么一定在后面。 大型表格内部可以使用多个，表示连续的多个部分。 上面代码表明表格有3列。 上面代码中， 上面代码中，表格的表头定义了3列，实际数据有4列。表头的第2列会连续跨2列。 上面代码表示表格共有3行。 上面代码中，表格一共有三行。第一行是标题行，所以使用 （1）colspan属性，rowspan属性 单元格会有跨越多行或多列的情况，这要通过colspan属性和rowspan属性设置，前者表示单元格跨越的栏数，后者表示单元格跨越的行数。它们的值都是一个非负整数，默认为1。 上面代码中，第一行的第一个单元格会跨两列。 （2）headers属性 如果表格很大，单元格很多，源码里面会看不清，哪个单元格对应哪个表头，这时就可以使用headers属性。 上面代码中，标题栏的 headers属性的值总是对应 （3）scope属性 scope属性只有 上面代码中，第一行的标题栏都是列标题，所以 scope属性可以取下面这些值。 row：该行的所有单元格，都与该标题单元格相关。 col：该列的所有单元格，都与该标题单元格相关。 rowgroup：多行组成的一个行组的所有单元格，都与该标题单元格相关，可以与rowspan属性配合使用。 colgroup：多列组成的一个列组的所有单元格，都与该标题单元格相关，可以与colspan属性配合使用。 auto：默认值，表示由浏览器自行决定。 下面是一个colgroup属性和rowgroup属性的例子。 上面的例子中，列标题“尺寸”的scope属性为colgroup，表示这个标题单元格对应多列（本例为3列）；行标题的scope属性为rowgroup，表示这个标题单元格对应多行（本例为2行）。是一个块级容器标签，所有表格内容都要放在这个标签里面。
<table>
... ...
table>里面的第一个子元素，表示表格的标题。该元素是可选的。
<table>
<caption>示例表格caption>
table>2、、、
的一级子元素，分别表示表头、表体和表尾。
<table>
<thead>... ...thead>
<tbody>... ...tbody>
<tfoot>... ...tfoot>
table>3、
的一级子元素，用来包含一组列的定义。
<table>
<colgroup>
<col>
<col>
<col>
colgroup>
table><table>
<colgroup>
<col class="c1">
<col class="c2">
<col class="c3">
colgroup>
<tr>
<td>1td>
<td>2td>
<td>3td>
tr>
table><table>
<colgroup>
<col>
<col span="2">
<col>
colgroup>
table>4、
标签表示表格的一行（table row）。如果表格有、 、，那么就放在这些容器元素之中，否则直接放在 的下一级。
<table>
<tr>...tr>
<tr>...tr>
<tr>...tr>
table>5、
， 和 都用来定义表格的单元格。其中， 是标题单元格， 是数据单元格。 <table>
<tr>
<th>学号th><th>姓名th>
tr>
<tr>
<td>001td><td>张三td>
tr>
<tr>
<td>002td><td>李四td>
tr>
table>；第二行和第三行是数据行，所以使用 。 <table>
<tr>
<td colspan="2">Atd><td>Btd>
tr>
<tr>
<td>Atd><td>Btd><td>Ctd>
tr>
table><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属性的值，因此就能看出来这些单元格对应哪个标题栏。 标签的id属性的值。由于一个单元格可以对应多个标题栏（跨行的情况），所以headers属性可以是一个空格分隔的字符串，对应多个id属性的值。 标签支持，一般不在 标签使用，表示该 单元格到底是栏的标题，还是列的标题。 <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。 <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>