免費(fèi)AI編程助手
HTML 表列
2018-06-16 16:15 更新
HTML表列
colgroup - 表列組
HTML表是面向行的。將單元格的定義放在 tr 中元素中，并逐行構(gòu)建表。
要將樣式應(yīng)用于列，我們可以使用 colgroup 和 col 元素。
具有局部屬性 span 的colgroup 元素表示一組列。
colgroup 元素可以包含零個(gè)或多個(gè) col 元素。
width，char，charoff 和 valign 屬性已過時(shí)。
以下代碼顯示了 colgroup 元素的使用。
<!DOCTYPE HTML>
<html>
<head>
<style>
#colgroup1 {
background-color: red
}
#colgroup2 {
background-color: green;
font-size: small
}
</style>
</head>
<body>
<table>
<colgroup id="colgroup1" span="3" />
<colgroup id="colgroup2" span="2" />
<thead>
<tr>
<th>Rank</th>
<th>Name</th>
<th>Color</th>
<th colspan="2">Size & Votes</th>
</tr>
</thead>
<tbody>
<tr>
<th>Favorite:</th>
<td>XML</td>
<td>HTML</td>
<td>CSS</td>
<td>500</td>
</tr>
<tr>
<th>2nd Favorite:</th>
<td>CSS</td>
<td>Java</td>
<td>Javascript</td>
<td>450</td>
</tr>
</tbody>
</table>
</body>
</html>上面的代碼定義了兩個(gè) colgroup 元素。 span 屬性指定 colgroup 元素應(yīng)用于多少列。
列表中的第一個(gè) colgroup 應(yīng)用于表中的前三列，其他元素應(yīng)用于后兩列。
全局 id 屬性是為每個(gè) colgroup 元素定義的，CSS樣式通過使用 id 值作為選擇器來定義。
col - 表單個(gè)列
您可以使用 col 元素而不是 colgroup 元素的 span 屬性定義組。
col 元素具有局部屬性: span 。
align，width，char，charoff 和 valign 屬性已過時(shí)。
您可以將樣式應(yīng)用于列的組和該組中的單個(gè)列。 col 元素放置在 colgroup 元素內(nèi)部， col 的每個(gè)實(shí)例表示組中的一列。
以下代碼使用 col 元素。
<!DOCTYPE HTML>
<html>
<head>
<style>
#colgroup1 {
background-color: red
}
#col3 {
background-color: green;
font-size: small
}
</style>
</head>
<body>
<table>
<colgroup id="colgroup1">
<col id="col1And2" span="2" />
<col id="col3" />
</colgroup>
<colgroup id="colgroup2" span="2" />
<thead>
<tr>
<th>Rank</th>
<th>Name</th>
<th>Color</th>
<th colspan="2">Size & Votes</th>
</tr>
</thead>
<tbody>
<tr>
<th>Favorite:</th>
<td>1234</td>
<td>1234</td>
<td>1234</td>
<td>500</td>
</tr>
<tr>
<th>2nd Favorite:</th>
<td>1234</td>
<td>1234</td>
<td>1234</td>
<td>450</td>
</tr>
</tbody>
</table>
</body>
</html>您可以使用 span 屬性創(chuàng)建表示 colgroup 中兩列的col 元素。
如果不使用 span 屬性，col 元素表示單個(gè)列。
上面的代碼將樣式應(yīng)用于 colgroup 和其它包含的 col 元素之一。
以上內(nèi)容是否對(duì)您有幫助：
← HTML 表頭
更多建議：