免费AI编程助手
HTML 表格
HTML表格
每个表必须包含三个元素: table ， tr 和 td 。
table
具有本地属性border的table标记HTML文档中的表。
table 元素可以有 caption，colgroup，thead，tbody，tfoot，tr，th和td 元素。
table元素的summary，align，width，bgcolor，cellpadding，cellspacing，frame和rules属性已过时。
border 属性的值必须为1。边框的厚度必须使用CSS设置。
tr
tr 元素表示表行。
HTML表是面向行的，您必须分别表示每一行。
tr 元素可以在 table ， thead tfoot 和 tbody 元素内使用。
tr 元素可以包含一个或多个 td 或 th 元素。
align，char，charoff，valign 和 bgcolor 属性已过时。你必须使用CSS。
td
td 与 colspan，rowspan，headers 局部属性表示表单元格。
scope 属性已过时。请使用 th 元素上的 scope 属性。
abbr，axis，align，width，char，charoff，valign，bgcolor，height 和 nowrap 属性已过时，因此必须使用CSS。
例子
您可以组合它们来创建表，如下面的代码所示。
<!DOCTYPE HTML>
<html>
<body>
<table>
<tr>
<td>A</td>
<td>B</td>
<td>C</td>
</tr>
<tr>
<td>D</td>
<td>E</td>
<td>F</td>
</tr>
</table>
</body>
</html>实例：长单元格
添加更长的单元格内容
<!DOCTYPE HTML>
<html>
<body>
<table>
<tr>
<td>A</td>
<td>G</td>
<td>M</td>
</tr>
<tr>
<td>O</td>
<td>O</td>
<td>L</td>
</tr>
<tr>
<td>E</td>
<td>Long cell</td>
<td>V</td>
</tr>
</table>
</body>
</html>thead - 表头包装器
thead 元素定义一行或多行，这些行是table元素的列标签。
没有 thead 元素，所有的tr元素都被假定为属于表的主体。
align，char，charoff 和valign属性已过时。
以下代码显示将 thead 元素添加到实例表中。
<!DOCTYPE HTML>
<html>
<head>
<style>
thead th {
text-align: left;
background: grey;
color: white
}
tbody th {
text-align: right;
background: lightgrey;
color: grey
}
</style>
</head>
<body>
<table>
<thead>
<tr>
<th>A</th>
<th>B</th>
<th>C</th>
<th>D</th>
</tr>
</thead>
<tbody>
<tr>
<th>Favorite:</th>
<td>XML</td>
<td>HTML</td>
<td>CSS</td>
</tr>
<tr>
<th>2nd Favorite:</th>
<td>Java</td>
<td>Javascript</td>
<td>Oracle</td>
</tr>
<tr>
<th>3rd Favorite:</th>
<td>C#</td>
<td>MySQL</td>
<td>PHP</td>
</tr>
</tbody>
</table>
</body>
</html>th - 表头单元格
th 元素标记标题单元格，使我们能够区分数据及其描述。
th 元素的父代是 tr 元素。它具有局部属性: colspan，rowspan，scope，headers 。
abbr，axis，align，width，char，charoff，valign，bgcolor，height，和 nowrap 属性已过时，而你必须使用CSS。
以下代码向表中添加标题单元格。
<!DOCTYPE HTML>
<html>
<body>
<table>
<tr>
<th>Rank</th>
<th>Name</th>
<th>Color</th>
<th>Size</th>
</tr>
<tr>
<th>Favorite:</th>
<td>Apples</td>
<td>Green</td>
<td>Medium</td>
</tr>
<tr>
<th>2nd Favorite:</th>
<td>Oranges</td>
<td>Orange</td>
<td>Large</td>
</tr>
<tr>
<th>3rd Favorite:</th>
<td>Pomegranate</td>
<td>A kind of greeny-red</td>
<td>Varies from medium to large</td>
</tr>
</table>
</body>
</html> th 和 td 元素在一行中混合在一起。它向表中添加垂直头和行头。
tbody - 表主体
tbody 元素标记表体的行，而不是标题行和页脚行。
align，char，charoff 和 valign 属性已过时。
大多数浏览器在处理table>元素时会自动插入 tbody 元素，即使它在文档中未指定。依赖于表格布局的CSS选择器可能会失败。
例如，像 table > tr的选择器将不工作，因为浏览器在table和 tr 元素之间插入了一个 tbody。
要解决这个问题，您必须使用选择器，如 table > tbody > tr， table tr (no> character)，甚至只是 tbody > tr 。
以下代码显示了向示例表中添加 tbody 元素。
<!DOCTYPE HTML>
<html>
<head>
<style>
thead th {
text-align: left;
background: grey;
color: white
}
tbody th {
text-align: right;
background: lightgrey;
color: grey
}
</style>
</head>
<body>
<table>
<tbody>
<tr>
<th>Favorite:</th>
<td>XML</td>
<td>HTML</td>
<td>CSS</td>
</tr>
<tr>
<th>2nd Favorite:</th>
<td>Java</td>
<td>Javascript</td>
<td>Oracle</td>
</tr>
<tr>
<th>3rd Favorite:</th>
<td>C#</td>
<td>MySQL</td>
<td>PHP</td>
</tr>
</tbody>
</table>
</body>
</html>tfoot - 表页脚
tfoot 元素标记表页脚。
tfoot 元素可以出现在tbody 或 tr 元素之前或之后。
align，char，charoff 和 valign 属性已过时。
在HTML5之前， tfoot 元素必须出现在 tbody 元素之前。
在HTML5中，您可以将 tfoot 元素放在 tbody 或最后一个 tr 元素后面。
以下代码显示了如何使用 tfoot 元素为table元素创建页脚。
<!DOCTYPE HTML>
<html>
<head>
<style>
thead th, tfoot th {
text-align: left;
background: grey;
color: white
}
tbody th {
text-align: right;
background: lightgrey;
color: grey
}
</style>
</head>
<body>
<table>
<thead>
<tr>
<th>Rank</th>
<th>Name</th>
<th>Color</th>
<th>Size</th>
</tr>
</thead>
<tfoot>
<tr>
<th>Rank Footer</th>
<th>Name Footer</th>
<th>Color Footer</th>
<th>Size Footer</th>
</tr>
</tfoot>
<tbody>
<tr>
<th>Favorite:</th>
<td>XML</td>
<td>HTML</td>
<td>CSS</td>
</tr>
<tr>
<th>2nd Favorite:</th>
<td>Java</td>
<td>Javacript</td>
<td>Oracle</td>
</tr>
<tr>
<th>3rd Favorite:</th>
<td>Json</td>
<td>Text</td>
<td>CSV</td>
</tr>
</tbody>
</table>
</body>
</html>
更多建议：