おすすめ記事
テーブルタグ
スポンサーリンク

あらすじ

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

 

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

 

具体的には

  • <tr>
  • <th>
  • <td>
  • <thead>
  • <tbody>
  • <tfoot>
  • <caption>
  • <col>
  • <colgroup>

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

 

スポンサーリンク

テーブルタグとは

 

テーブル

 

テーブルタグとは、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>

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

 

memo
なお、テーブルの大きさによっては、<thead><tbody><tfoot>といった要素は省略するのが一般的です。

<caption><colgroup><col>タグも好みによってなので、こちらも省略可能です。

 

スポンサーリンク

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

 

テーブル

 

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

  • <tr>
  • <th>
  • <td>

の3つがあります。

 

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

  • <thead>
  • <tbody>
  • <tfoot>

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

 

<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>タグ。

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

 

<td>

 

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

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

 

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

 

グループ

 

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

  • <thead>
  • <tbody>
  • <tfoot>

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

 

<thead>

 

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

 

<tbody>

 

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

 

<tfoot>

 

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

 

memo
これらのタグを記載する理由として、印刷する際にヘッダやフッタ部分を全ページに表示することができたり、ブラウザ上でヘッダとフッタ部分を固定してボディ部分をスクロール表示させることが可能になります。

また、テーブルが長くなったり、大きくなった際により各テーブル行をわかりやすくしてくれる効果もあったりします。

 

テーブルのタイトルを定義する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>

 

 

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

性別 種類 年齢
オス トイ・プードル 3歳
メス 柴犬 1歳

 

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

 

変更

 

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

  • <col>
  • <colgroup>

の2つです。

 

memo
どちらのタグも終了タグを省略することが可能です。

 

<col>

 

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

 

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

 

<col width=”100”>

 

<colgroup>

 

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

 

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

 

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

 

まとめ

 

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

 

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

 

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

 

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

 

スポンサーリンク

Twitterでフォローしよう!

おすすめの記事