免費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設(shè)置。
tr
tr 元素表示表行。
HTML表是面向行的，您必須分別表示每一行。
tr 元素可以在 table ， thead tfoot 和 tbody 元素內(nèi)使用。
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。
例子
您可以組合它們來創(chuàng)建表，如下面的代碼所示。
<!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>實例：長單元格
添加更長的單元格內(nèi)容
<!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 元素標記標題單元格，使我們能夠區(qū)分數(shù)據(jù)及其描述。
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 屬性已過時。
大多數(shù)瀏覽器在處理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 元素可以出現(xiàn)在tbody 或 tr 元素之前或之后。
align，char，charoff 和 valign 屬性已過時。
在HTML5之前， tfoot 元素必須出現(xiàn)在 tbody 元素之前。
在HTML5中，您可以將 tfoot 元素放在 tbody 或最后一個 tr 元素后面。
以下代碼顯示了如何使用 tfoot 元素為table元素創(chuàng)建頁腳。
<!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>
更多建議：