|
カスタム検索
|
|
 <tbody> |
|
||||||||
<tbody>タグ| 機能 | テーブルのボディ部を定義 | |
|---|---|---|
| 属性 | HTML-4.01 | コア 言語 イベント align valign char charoff |
| XHTML-1.0 | コア 言語 イベント align valign char charoff | |
<tbody>タグは、テーブルのボディ要素を定義します。<tbody>タグは、1つのテーブルに複数記述することができます。
<tbody>タグは通常、<thead>、<tfoot>タグとセット使用され、ヘッダ部、ボディ部、フッタ部を定義して、テーブルを複数のセクションに分けます。<tbody>を複数記述し、ボディ部分を定義すれば、細やかなテーブルの表現ができます。
tbody.html
<html>
<head>
<title><tbody>タグの例</title>
</head>
<body>
<table border="1">
<caption>製品別スペック</caption>
<thead>
<tr>
<th><br /></th>
<th colspan="2">計測データ</th>
</tr>
<tr>
<th>製品名</th>
<th>温度／時間</th>
<th>変化</th>
</tr>
</thead>
<tbody>
<tr>
<th>プラチナール</th>
<td>100度／1</td>
<td>なし</td>
</tr>
<tr>
<th>ゴールドール</th>
<td>100度／1</td>
<td>1mm膨張</td>
</tr>
</tbody>
<tbody>
<tr>
<th>プラチナーラ</th>
<td>80度／1</td>
<td>なし</td>
</tr>
<tr>
<th>ゴールドーラ</th>
<td>80度／1</td>
<td>0.5mm膨張</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="3">計測データは保証値ではありません</td>
</tr>
</tfoot>
</table>
</body>
</html>
<tbody>タグを使用して、テーブルを複数のボディセクションを作成しても、見た目の変化として現れませんが、CSSを使用して見た目やレイアウトを制御すれば、かなり有効的な使用ができると思います。
tbody_css.html
<html>
<head>
<title><tbody>タグの例</title>
</head>
<body>
<h2>CSSを使用した<thead>、<tbody>、<tfoot>タグの例</h2>
<table style="border: 3px solid #666" cellspacing="0" cellpadding="8">
<caption>製品別スペック</caption>
<thead style="border: 2px solid #666">
<tr>
<th style="border: 1px solid #666"><br /></th>
<th style="border: 1px solid #666" colspan="2">計測データ</th>
</tr>
<tr>
<th style="border: 1px solid #666">製品名</th>
<th style="border: 1px solid #666">温度／時間</th>
<th style="border: 1px solid #666">変化</th>
</tr>
</thead>
<tbody style="border: 2px solid #666; background: #ccf">
<tr>
<th style="border: 1px solid #666">プラチナール</th>
<td style="border: 1px solid #666">100度／1</td>
<td style="border: 1px solid #666">なし</td>
</tr>
<tr>
<th style="border: 1px solid #666">ゴールドール</th>
<td style="border: 1px solid #666">100度／1</td>
<td style="border: 1px solid #666">1mm膨張</td>
</tr>
</tbody>
<tbody style="border: 2px solid #666; background: #fcc">
<tr>
<th style="border: 1px solid #666">プラチナーラ</th>
<td style="border: 1px solid #666">80度／1</td>
<td style="border: 1px solid #666">なし</td>
</tr>
<tr>
<th style="border: 1px solid #666">ゴールドーラ</th>
<td style="border: 1px solid #666">80度／1</td>
<td style="border: 1px solid #666">0.5mm膨張</td>
</tr>
</tbody>
<tfoot style="border: 2px solid #666">
<tr>
<td style="border: 1px solid #666" colspan="3">計測データは保証値ではありません</td>
</tr>
</tfoot>
</table>
</body>
</html>
align属性
align属性を指定すると、<tbody>要素に含まれる全てのセルに対して、水平方向の位置揃えを指定することができます。
CSSを使用すれば、このalign属性と同等のことが可能ですので、水平方向の位置揃えを指定する場合は、CSSを使用するようにしてください。
valign属性
valign属性を指定すると、<tbody>要素に含まれる全てのセルに対して、垂直方向の位置揃えを指定することができます。
valign属性の詳細については、<tr>タグを参照してください。
char属性
char属性は、任意の1文字を基準として位置揃えをさせたい場合に使用します。小数や、価格の表示に適していると思います。値に任意の1文字（小数なら「.」）を指定すると、その文字を基準に位置揃えが行われます。
ただし、ほとんどのブラウザでは、この属性を指定しても機能しないようです。
charoff属性
charoff属性は、char属性の値で指定した文字までの文字数（オフセット値）を指定します。
ただし、ほとんどのブラウザでは、この属性を指定しても機能しないようです。
<thead>
ページの先頭
2024 Webデザインレッスン