HTMLのテーブルタグ(tr,th,td等)を使ってテーブル(表)を表現する方法

あらすじ

Excel(エクセル)やWord(ワード)といったソフトウェアで、表やテーブルを見たことはありませんか？
 
実はHTMLにもそのような表やテーブルを表現するタグがあるんです。

今回はそんなHTMLで使われる、「テーブルタグ」についてや、テーブル内はどのような構成なのかも合わせてご紹介していきたいと思います。

具体的には

といったタグを中心にご紹介していきます。

テーブルタグとは

テーブルタグとは、HTMLで表やテーブルを表現したい時に使用するタグのことです。

具体的には

<table>
  <caption></caption>
  <colgroup>
    <col></col>
  </colgroup>
  <thead>
    <tr>
      <th></th>
      <th></th>
      <th></th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td></td>
      <td></td>
      <td></td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td></td>
      <td></td>
      <td></td>
    </tr>
  </tfoot>
</table>

といった文法で構成されています。

テーブルタグ内に記載する基本タグとは

<table>タグ内に記載する基本的なタグには

の3つがあります。

細かくテーブルをグループ分けする際に記載する

といったタグもありますが、詳しくは次項で解説します。

<table>
  <tr>
    <th>名前</th>
    <th>国</th>
    <th>市</th>
  </tr>
  <tr>
    <td>佐藤</td>
    <td>日本</td>
    <td>大阪</td>
  </tr>
  <tr>
    <td>鈴木</td>
    <td>日本</td>
    <td>東京</td>
  </tr>
</table>

と記載すると、

といったように表示されます。

<tr>

まずは<tr>タグですが、trとはtable rowの略で、テーブルの行内に記載する値を囲うタグです。

どういうことかというと、テーブルの行が

1行の場合

<tr>
  <th></th>
</tr>

2行の場合

<tr>
  <td></td>
  <td></td>
</tr>

といった具合に表示したい行数に応じて<tr>タグ内に<th>か<td>を行数分記載します。

<th>

<tr>タグ内に記載することのできるタグの一つ、<th>タグ。

thはtable headerの略でテーブル内の見出しの役割をするタグです。

<td>

<tr>タグ内に記載することのできるもう一つのタグ、<td>タグ。tdとはtable dataの略です。

<th>タグが見出しの役割を担うのに対し、<td>タグはテーブル内のデータを記載することのできるタグです。

テーブルをグループごとに分けるタグ

テーブルを細かくグループ分けしたい際には

といったタグを使用することができます。

<thead>

theadタグはテーブルのヘッダ部分をグループ化する際に記載するタグです。

<tbody>

tbodyはthead以降の本体部分をグループ化する際に記載するタグです。

<tfoot>

tfootはテーブルのフッタ部分をグループ化する際に記載するタグです。

テーブルのタイトルを定義するcaption(キャプション)タグ

<caption>タグはテーブルのタイトルを記載する際に使用するタグです。

<caption>タグの記載位置は<table>タグの下です。

<table>
  <caption>ペットショップのワンちゃん</caption>
  <tr>
    <th>性別</th>
    <th>種類</th>
    <th>年齢</th>
  </tr>
  <tr>
    <td>オス</td>
    <td>トイ・プードル</td>
    <td>3歳</td>
  </tr>
  <tr>
    <td>メス</td>
    <td>柴犬</td>
    <td>1歳</td>
  </tr>
</table>

ペットショップのワンちゃん

テーブルの縦列のスタイルを変更する際に使うタグ

テーブルの縦列のスタイルをまとめて変更したい際に使用するタグが

の2つです。

<col>

<col>タグは1つの縦列に対してスタイルを反映する際に有効なタグです。

なお<col>タグは<colgroup>タグ内に記載する必要があります。

<col width=”100”>

<colgroup>

<colgroup>タグは縦列をグループ化して、スタイルを反映することができます。

反映させたい縦列の数はspan属性で記載します。

<colgroup span=”2” width=”100”>

まとめ

いかがだったでしょうか。

テーブルタグはよく使うタグですので、覚えておいて損はないはずです。

これらのタグを使いこなすことで、テーブル(表)を作成することができるようになるでしょう。

ぜひご自身のウェブサイトにテーブルを表現してみてはいかがでしょうか。