カスタム検索

<tr>タグ

<tr>タグの機能と属性
機能 テーブルに新しい行を定義
属性 HTML-4.01 コア 言語 イベント  align  valign  char  charoff  
XHTML-1.0 コア 言語 イベント  align  valign  char  charoff  

<tr>タグは、テーブルに新しい行を定義します。セルを定義する<td>タグ、あるいは、項目名を定義する<th>タグを必ずネストします。

また、<tr>タグで定義された個々の行には、各行でセルの数が一致していなければなりません(<td>、あるいは、<th>でcolspan属性やrowspan属性が指定されている場合を除きます)。

各行でセルの数が一致していない場合は、ブラウザの機能によって、少ない分だけセルが自動で追加されるか、そうでない場合には、表示がおかしくなることがあるので、各行のセルの数は一致させるようにしましょう。

valign属性

<tr>タグにvalign属性を指定すると、その行に含まれる全てのセルに対して、垂直方向の位置揃えを指定することができます。この属性の値としては、

  • top(上)
  • bottom(下)
  • middle(中央)
  • baseline(列が複数ある場合のテキストのベースライン)

があります。何も指定しない場合は「middle」です。

tr.html
<html>
    <head>
        <title>&lt;tr&gt;タグの例</title>
    </head>
    <body>
        <table border="1">
            <tr valign="top">
                <th>項目名1</th>
                <td>データ1a</td>
                <td>
                    <p>段落a1
                    </p>
                    <p>段落a2
                    </p>
                </td>
            </tr>
            <tr>
                <th>項目名2</th>
                <td>データ2a</td>
                <td>
                    <p>段落b1
                    </p>
                    <p>段落b2
                    </p>
                </td>
            </tr>
        </table>
    </body>
</html>

この例では、1番目の行を上に位置揃えしています。

align属性

align属性を指定すると、その行に含まれる全てのセルに対して、水平方向の位置揃えを指定することができます。この属性の値としては、

  • left(左)
  • right(右)
  • center(中央)
  • justify(両端)

があります。何も指定しない場合、<td>のセルに対しては、「left」、<th>には「center」となります。

CSSを使用すれば、このalign属性と同等のことが可能ですので、水平方向の位置揃えを指定する場合は、CSSを使用するようにしましょう。

char属性

char属性は、任意の1文字を基準として位置揃えをさせたい場合に使用します。小数や、価格の表示に適していると思います。値に任意の1文字(小数なら「.」)を指定すると、その文字を基準に位置揃えが行われます。

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

charoff属性

charoff属性は、char属性の値で指定した文字までの文字数(オフセット値)を指定します。

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

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