カスタム検索

<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>&lt;tbody&gt;タグの例</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>&lt;tbody&gt;タグの例</title>
    </head>
    <body>
        <h2>CSSを使用した&lt;thead&gt;、&#060;tbody&#062;、&#060;tfoot&#062;タグの例</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属性の値で指定した文字までの文字数(オフセット値)を指定します。

ただし、ほとんどのブラウザでは、この属性を指定しても機能しないようです。

CopyLeft 2021 Webデザインレッスン プライバシーポリシー サイト管理者に連絡