シンプルな表

table、tr、th、tdタグで、データを行と列に整えて見せましょう。

6 分 · 3 問

時間割、価格表、スポーツの順位表。ある種の情報は、自然と行と列で読み取れます。それこそがHTMLの表の役割です。3つのタグがあれば始められます。<table> は表全体を包み、<tr>（table row、表の行）は行を作り、<td>（table data、表のデータ）は行の中にセルを作ります。

<table>
  <tr>
    <td>Apple</td>
    <td>0.50 euros</td>
  </tr>
  <tr>
    <td>Banana</td>
    <td>0.30 euros</td>
  </tr>
</table>

各列に見出しを付けるには、最初の行で <td> を <th>（table header、表の見出し）に置き換えます。ブラウザはこれらの見出しセルを太字で中央寄せにして表示し、データと区別します。

<table>
  <tr>
    <th>Fruit</th>
    <th>Price</th>
  </tr>
  <tr>
    <td>Apple</td>
    <td>0.50 euros</td>
  </tr>
</table>

ブラウザは表を1行ずつ組み立てます。各 <tr> の最初のセルは最初の列に、2番目のセルは2番目の列に、というふうに配置されます。初期状態では、表は目に見える枠線なしで表示されます。それは正常です。見た目（線、色、間隔）は後でCSSを使って扱います。

理解度チェック

このレッスンの要点をしっかり覚えているか確認しましょう。

1. 表の行を作るのはどのタグですか？
   • <td>
   • <tr>
   • <table>
   • <row>
2. <td> と <th> の違いは何ですか？
   • <th>は見出しセルを、<td>はデータセルを作る
   • <th>は表全体を、<td>は行を作る
   • 違いはなく、2つは入れ替え可能
3. HTMLの表は何のために使うべきですか？
   • サイト全体をレイアウトするため
   • データを行と列で見せるため
   • 箇条書きリストの代わりにするため