HTML Living Standard/tr

tr 要素

<tr> 要素は、表（<table>）内の「行」を定義するために使用されます。行ごとにセル（<td> または <th>）を配置することで、表のデータを構成します。

基本構造

<tr> 要素は、通常、以下のような親要素の中で使用されます：

<thead>: 表のヘッダー部分を構成する行。
<tbody>: 表の本文部分を構成する行。
<tfoot>: 表のフッター部分を構成する行。

また、<tr> 要素内には、以下の子要素を配置できます：

<td>: データセル。
<th>: ヘッダーセル。

使用例

以下は、<tr> 要素を使用した表の例です：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>Table Row Example</title>
  </head>
  <body>
    <table border="1">
      <thead>
        <tr>
          <th>商品名</th>
          <th>価格</th>
          <th>在庫状況</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>ノートパソコン</td>
          <td>100,000円</td>
          <td>在庫あり</td>
        </tr>
        <tr>
          <td>スマートフォン</td>
          <td>80,000円</td>
          <td>在庫なし</td>
        </tr>
      </tbody>
    </table>
  </body>
</html>

属性

<tr> 要素は、以下のグローバル属性を使用することができます：

class: CSS クラス名を指定します。
id: 一意の識別子を指定します。
style: インラインスタイルを指定します。

加えて、以下の属性を利用することで、スタイリングや機能性を向上させることができます：

hidden: 行を非表示にします。
data-*: カスタムデータ属性。

スタイリングの例

CSS を使用して特定の行をスタイル設定する例を示します：

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Styled Table Rows</title>
    <meta charset="UTF-8">
    <style>
      .highlight {
        background-color: #f0f8ff;
        font-weight: bold;
      }
      tr:hover {
        background-color: #ffffe0;
      }
    </style>
  </head>
  <body>
    <table border="1">
      <thead>
        <tr class="highlight">
          <th>名前</th>
          <th>年齢</th>
          <th>職業</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>田中 太郎</td>
          <td>30</td>
          <td>エンジニア</td>
        </tr>
        <tr>
          <td>鈴木 花子</td>
          <td>25</td>
          <td>デザイナー</td>
        </tr>
      </tbody>
    </table>
  </body>
</html>

アクセシビリティ

<tr> 要素を含む表をアクセシブルにするには、以下の点を考慮します：

ヘッダーセル（<th>）を適切に使用し、scope 属性で関連付けを明確にする。
行の背景色を調整する場合は、色覚障害のユーザーにも配慮したコントラストを確保する。

練習問題

練習1: <tr> 要素を使用して、3行×3列の表を作成してください。
練習2: 特定の行を CSS でスタイル設定してください（例：色を変更、太字にするなど）。
練習3: ユーザーが行をホバーした際に背景色が変わるように設定してください。

tr 要素

基本構造

使用例

属性

スタイリングの例

アクセシビリティ

関連仕様

練習問題