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

今回は、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>
詳細メニューを閉じた状態
詳細メニューを開いた状態

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

これでテーブルにテーブルに関する説明文を追加することができました。

スマホではテーブルを横スクロールできるようにする

今回の場合のようにテーブルの列数が増えてくると、スマホ表示の際に文字が改行されて見にくくなったり、テーブルがウィンドウからはみ出てレイアウトが崩れてしまったりする原因になります。

そこでスマホではテーブルを横スクロールできるようにすることができるのですが、こちらについては別の記事で詳しく解説していますので、ご興味がある方はこちらの記事も併せてご覧下さい。

まとめ

以上、tableタグの基本的な使い方や+αの使い方についてを解説しました。

今回は解説していませんが、このtableタグを使うとよくウェブサイトで見かける料金表や会社概要、カレンダーなどをマークアップしたりすることができます。

この機会にしっかりと覚えて、是非テーブルタグを使いこなせるようになっておいて下さい。

最後までご覧頂き、ありがとうございました!

よかったらシェアしてね!

コメント

コメントする

CAPTCHA

目次
閉じる