tr,th,td

機能

• tr 要素は、表の行を定義するために使用されます。各行には、複数のセル（または）が含まれます。

• th 要素は、表のヘッダーセルを定義するために使用されます。通常、列の見出しとして使用され、デフォルトで太字かつ中央揃えになります。tr 要素の一行目で使用されます。

• td 要素は、表のデータセルを定義するために使用されます。各セルには、テキスト、画像、リンクなどのコンテンツが含まれます。tr 要素の２行目以降で使用されます。

よく設定する属性

tr 要素

id

一意の識別子を指定します。例: id=“row1”

class

CSS クラスを指定して、スタイルを適用します。例: class=“data-row”

style

インラインスタイルを直接指定します。例: style=“background-color: lightgray;”

td 要素

colspan

セルがまたがる列数を指定します。例: colspan=“2”

rowspan

セルがまたがる行数を指定します。例: rowspan=“2”

headers

セルが関連付けられているヘッダーセルの ID を指定します。例: headers=“header1”

th 要素

scope

ヘッダーセルが適用される範囲を指定します。例: scope=“col”（列全体）、scope=“row”（行全体）

abbr

ヘッダーセルの略語を指定します。例: abbr=“ID”

使い方

HTML ファイルは下記のテンプレートに従い 記載します。

<table>
  <tr class="header-row" style="background-color: lightblue;">
    <th scope="col">名前</th>
    <th scope="col">年齢</th>
    <th scope="col">職業</th>
  </tr>
  <tr class="data-row" style="background-color: white;">
    <td headers="header1">山田太郎</td>
    <td headers="header2">30</td>
    <td headers="header3">エンジニア</td>
  </tr>
  <tr class="data-row" style="background-color: lightgray;">
    <td headers="header1">鈴木花子</td>
    <td headers="header2">25</td>
    <td headers="header3">デザイナー</td>
  </tr>
</table>