tableタグの基本的な使い方、+αの使い方を解説!

2021年5月19日2021年5月31日

今回は、HTMLタグのtableタグの正しい使い方、+αな使い方についてを解説していきます。

tableタグが正しく使えるようになれば、料金表やカレンダーなどもマークアップができるようになるのでまだ使い方が分からないという方は是非、使い方をマスターするようにして下さい。

tableタグとは

tableタグは、エクセルで作られたような表をマークアップするためのHTMLタグです。

また、tableタグはtableタグ単体では使われず、trタグ、thタグ、tdタグといったようなタグと組み合わせて使われます。

<table>
  <thead>
    <tr>
      <th scope="col">サービス</th>
      <th scope="col">詳細</th>
      <th scope="col">料金</th>
    </tr>
  </thead>

  <tbody>
    <tr>
      <th scope="row">サイト制作</th>
      <td>自分で更新ができるウェブサイトを制作致します。</td>
      <td>200,000円(税込)~</td>
    </tr>
    <tr>
      <th scope="row">ウェブライティング</th>
      <td>コンテンツの企画、執筆を行います。</td>
      <td>2.2円/文字~</td>
    </tr>
  </tbody>
</table>

※補足
tableタグ、trタグ、thタグ、tdタグにはスタイルを指定しています。

tableタグの基本的な使い方

それではtableタグの基本的な使い方についてを解説します。

行を増やすtrタグ、行内でのセルを増やすtdタグ

表の行を増やすにはtrタグを、その行内でのセルを増やしたい場合はtdタグをそれぞれtableタグの中に記述します。

また、tdタグは必ずtrタグの中で使用しなければならないので、3行、5列の表を作る場合は以下のように記述します。

<table>
  <tr>
    <td></td> <!-- 1行目の1つ目のセルだけ中身を空にしています。 -->
    <td>国語</td>
    <td>算数</td>
    <td>社会</td>
    <td>理科</td>
  </tr>

  <tr>
    <td>山田くん</td>
    <td>75点</td>
    <td>90点</td>
    <td>53点</td>
    <td>64点</td>
  </tr>
  
  <tr>
    <td>鈴木さん</td>
    <td>欠席</td>
    <td>欠席</td>
    <td>82点</td>
    <td>90点</td>
  </tr>
</table>

※補足
tableタグ、trタグ、thタグ、tdタグにはスタイルを指定しています。

これで3行、5列の表を作ることができました。

表の見出しにあたるtdタグはthタグに置き換える

表の見出しにあたるtdタグはthタグに置き換えることで、表の中の見出しがどこにあるのかということをクローラーに知らせることができます。

今回の表の場合は、1行目に当たる教科の名前と1列目にあたる人物の名前がこの表の見出しに該当するので、教科名と人物名を囲うtdタグがthタグに置き換えられます。

また、scope属性をthタグに追加することでそれがどのセルに対する見出しなのかを明確に示すことができます。(値を”col”に指定すると、thタグは下側に対しての見出しであることを表すことができ、値を”row”に指定すると、右側に対しての見出しであることを表すことができます。)

<table>
  <tr>
    <th scope="col"></th>
    <th scope="col">国語</th>
    <th scope="col">算数</th>
    <th scope="col">社会</th>
    <th scope="col">理科</th>
  </tr>

  <tr>
    <th scope="row">山田くん</th>
    <td>75点</td>
    <td>90点</td>
    <td>53点</td>
    <td>64点</td>
  </tr>

  <tr>
    <th scope="row">鈴木さん</th>
    <td>欠席</td>
    <td>欠席</td>
    <td>82点</td>
    <td>90点</td>
  </tr>
</table>

※補足
tableタグ、trタグ、thタグ、tdタグにはスタイルを指定しています。

これで表の見出し箇所ができました。

テーブルの行をヘッダー、フッター、ボディーに分割する

tableタグの中に複数の行が追加されたら、theadタグ、tbodyタグ、tfootタグを使用して、それら行をヘッダー、ボディー、フッターに分割することができます。(今回はtfootタグは使用しません。)

<table>
  <thead>
    <tr>
      <th scope="col"></th>
      <th scope="col">国語</th>
      <th scope="col">算数</th>
      <th scope="col">社会</th>
      <th scope="col">理科</th>
    </tr>
  </thead>

  <tbody>
    <tr>
      <th scope="row">山田くん</th>
      <td>75点</td>
      <td>90点</td>
      <td>53点</td>
      <td>64点</td>
    </tr>

    <tr>
      <th scope="row">鈴木さん</th>
      <td>欠席</td>
      <td>欠席</td>
      <td>82点</td>
      <td>90点</td>
    </tr>
  </tbody>
</table>

※補足
tableタグ、trタグ、thタグ、tdタグにはスタイルを指定しています。

これでこの表の行をヘッダー箇所とボディー箇所に分けることができました。

テーブルのセルを結合する

テーブルのセルを結合するには、thタグ、あるいはtdタグに水平方向ならcolspan属性を、垂直方向ならrowspan属性を使用します。

また、colspanとrowspanの値には結合させたいセルの数を入力します。

<table>
  <thead>
    <tr>
      <th scope="col"></th>
      <th scope="col">国語</th>
      <th scope="col">算数</th>
      <th scope="col">社会</th>
      <th scope="col">理科</th>
    </tr>
  </thead>

  <tbody>
    <tr>
      <th scope="row">山田くん</th>
      <td>75点</td>
      <td>90点</td>
      <td>53点</td>
      <td>64点</td>
    </tr>

    <tr>
      <th scope="row">鈴木さん</th>
      <td colspan="2">欠席</td>
      <!-- <td>欠席</td> --> <!-- セルを結合したことで不要になったので、削除している -->
      <td>82点</td>
      <td>90点</td>
    </tr>
  </tbody>
</table>

※補足
tableタグ、trタグ、thタグ、tdタグにはスタイルを指定しています。

これで表の一部のセルが水平方向に結合されました。

tableタグの使い方 +α

テーブルにキャプションを付ける

captionタグを使用すればテーブルにキャプションを追加することができます。

また、captionタグの記述する位置はtable開始タグの直後です。

<table>
  <caption>中間試験の結果</caption>
  <thead>
    <tr>
      <th scope="col"></th>
      <th scope="col">国語</th>
      <th scope="col">算数</th>
      <th scope="col">社会</th>
      <th scope="col">理科</th>
    </tr>
  </thead>

  <tbody>
    <tr>
      <th scope="row">山田くん</th>
      <td>75点</td>
      <td>90点</td>
      <td>53点</td>
      <td>64点</td>
    </tr>

    <tr>
      <th scope="row">鈴木さん</th>
      <td colspan="2">欠席</td>
      <td>82点</td>
      <td>90点</td>
    </tr>
  </tbody>
</table>

※補足
tableタグ、trタグ、thタグ、tdタグにはスタイルを指定しています。

これでテーブルにキャプションが追加されました。

テーブルに説明文を追加する

テーブルに説明文を追加するには、詳細折りたたみメニューを作るタグであるdetailsタグと、detailsタグの中に記述してその詳細の概要を表示するタグであるsummaryタグを使用します。

また、detailsタグの記述する位置はcaptionタグの中に記述します。(※tableタグの直下の子要素にはdetailsタグは使用できません。)

<table>
  <caption>中間試験の結果
    <details>
      <summary>表の概要</summary>
      この表は1学期中間試験の結果です。<br>
      1行目に教科タイトル、1列目に試験を受けた学生の名前が入っています。
    </details>
  </caption>
  <thead>
    <tr>
      <th scope="col"></th>
      <th scope="col">国語</th>
      <th scope="col">算数</th>
      <th scope="col">社会</th>
      <th scope="col">理科</th>
    </tr>
  </thead>

  <tbody>
    <tr>
      <th scope="row">山田くん</th>
      <td>75点</td>
      <td>90点</td>
      <td>53点</td>
      <td>64点</td>
    </tr>

    <tr>
      <th scope="row">鈴木さん</th>
      <td colspan="2">欠席</td>
      <td>82点</td>
      <td>90点</td>
    </tr>
  </tbody>
</table>