HTML&CSSコーディング
表の作成と各タグの覚え方

表は、tableタグ、trタグ、thタグ、tdタグを入れ子にして作成します。

ぱっと見ではややっこしそうですが、ひとつひとつ見ていけば、実はシンプルな構造になっています。

ここでは、基本的な表の作り方とあわせて、それぞれのタグの機能と覚え方をわかりやすく解説します。

tableタグ

まず、表のおおもととなるtableタグを設置します。tableは英語で表のことです。

<table>
</table>

以降、tableタグの中にどんどんタグを入れていきます。

trタグ

tableタグの中には、まずtrタグを入れます。

trはtable rawに由来します。つまり、表の行という意味です。

まず行を重ねていき、後で縦に分割して列を作ります。

<table>
  <tr>
  </tr>
  <tr>
  </tr>
</table>

上記の例では、<tr></tr>を2つ挿入したので、つまり2行の表になります。

3行にしたければ<tr></tr>を3つ、4行にしたければ4つ・・という具合に増やしていきます。

tdタグ

そうしたら、縦に分割して列を作っていきます。

trタグ内に、tdタグを挿入して、表の中身を記述します。

tdとは、table dataを意味し、表中の具体的なデータを記述するタグです。

<table>
  <tr>
    <td>1行目/1列目</td>
    <td>1行目/2列目</td>
    <td>1行目/3列目</td>
  </tr>
  <tr>
    <td>2行目/1列目</td>
    <td>2行目/2列目</td>
    <td>2行目/3列目</td>
  </tr>
</table>

<td></td>の数だけ、列ができます。

上記の例では、各行に<td></td>を3つ記述しているので、3列の表になります。

参考：表を線で囲む

上記の例では、枠線を設定していないので、枠線のない表として表示されます。

わかりやすくするため、最低限の枠線をCSSで設定してみます。

table, td {
  border: solid 1px black;
}

表の枠線を単線にしたい、表のサイズやコンテンツの位置を調整したい場合は、こちらをご覧ください（準備中です）。

見出し相当のセルはthタグに

表で構成する各セルが見出しに相当する場合は、tdの代わりにthタグを使うのが適切です。

thとは、table heading に由来します。つまり、表の見出しです。

一般的に、表の一番上や一番左のセルが見出しになります。

一番上のセルが見出しに相当する場合

<table>
  <tr>
    <th>名前</th>
    <th>年齢</th>
    <th>性別</th>
  </tr>
  <tr>
    <td>田中 太郎</td>
    <td>30歳</td>
    <td>男</td>
  </tr>
  <tr>
    <td>鈴木 あかね</td>
    <td>20歳</td>
    <td>女</td>
  </tr>
</table>

一番左のセルが見出しに相当する場合

<table>
  <tr>
    <th>旅行先</th>
    <td>北海道</td>
    <td>沖縄</td>
  </tr>
  <tr>
    <th>人数</th>
    <td>1人</td>
    <td>2人</td>
  </tr>
  <tr>
    <th>料金</th>
    <td>20000円</td>
    <td>50000円</td>
  </tr>
</table>

なお、わかりやすくするために、thタグに対しても枠線をCSSで設定しておきました。CSSコードは次の通りです。

table, td, th {
  border: solid 1px black;
}