【HTML】tableタグの使い方、テーブル・表を作る方法を解説

【HTML】tableタグの使い方、テーブル・表を作る方法を解説
本記事にはPR広告が含まれています。

本記事にはPR広告が含まれています。掲載されている広告についての詳細はプライバシーポリシーをご参照ください。

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

tableタグは料金表やカレンダーなど、さまざまなところで使用されています。まだ使い方が分からないという方はぜひ使い方をマスターしてみて下さい。

効率よくプログラミングを学ぶならテックアカデミー

最短距離でWeb制作に必要なスキルを学びたい方は、プログラミングスクールに通うのがおすすめです。

中でもテックアカデミーは、経験豊富な現役エンジニアがメンターとなって学習をサポートしてくれるため、挫折せず続けられます。

とりあえず話を聞いてみたいといった方向けにテックアカデミーでは無料相談を実施しているので、まずは公式サイトより気軽に相談してみて下さい。

\ 質の高い現役エンジニアからプログラミングが学べる /

目次

tableタグの基本的な使い方

tableタグの基本的な使い方は以下の通りです。1つづつ見ていきましょう。

tableタグ:テーブル全体を囲うタグ

まずはテーブル全体を囲う<table></table>タグを用意します。

<table>

</table>

trタグ:行を定義するタグ

tableの行を定義するには<tr></tr>タグを使用します。

3行のテーブルを作成したい場合はtrタグを3つ、4行のテーブルを作成したい場合はtrタグを4つ記載します。

<table>
  <tr></tr><!-- 1行目-->
  <tr></tr><!-- 2行目-->
  <tr></tr><!-- 3行目-->
</table>

tdタグ:セルを定義するタグ

セルを定義するには<td></td>タグを使用します。

同一行内に5つのセル(列)を追加したい場合はtrタグの中にtdタグを5つ記述します。

<table>
  <tr>
    <td></td>
    <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>
山田くんと鈴木さんの国語・算数・社会・理科のスコアテーブル

thタグ:見出しセルを定義するタグ

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

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

また、scope属性をthタグに記載することで、どの方向に対する見出しセルなのかを明確に示せます。

scope="col"とすると、thタグは下方向に対しての見出しであることを表せ、scope=”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>
山田くんと鈴木さんの国語・算数・社会・理科のスコアテーブル(教科 名と氏名をthタグで囲ったことで太文字となっている)

thタグで囲った箇所は見出しセルだと分かるよう、太文字で表示されるようになりました。

thead・tbody・tfoot:テーブルのヘッダー・ボディー・フッターを定義する

テーブルが一通りできたら、各行を<thead></thead>タグ・<tbody></tbody>タグ・<tfoot></tfoot>タグを用いてグループ化しましょう。

  • thead・・・テーブルのヘッダー部分を定義する
  • tbody・・・テーブルのメイン部分(ヘッダー、フッター以外)を定義する
  • 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>
山田くんと鈴木さんの国語・算数・社会・理科のスコアテーブル(thead・tbodyタグでグループ分けしているが見た目は変わらない)

上の例では、tfootを使用していませんが、テーブルの一番下に点数の平均点をまとめた行などを追加する場合にtfootが用いられます。

テーブルの基本的な使い方は以上です。

テーブルのスタイル設定

デフォルトの状態ではデザインが質素なので、CSSを用いてテーブルに装飾していきましょう。

枠線・セルの境界線をつける

テーブルに枠線・セルの境界線をつけるにはborderプロパティを使用します。

テーブルの外枠はtableタグ、セルの境界線はth・tdタグに対してborderを指定します。

<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,
th,
td {
  border: 1px solid #333;
}
テーブルに枠線とセルの境界線がついている

セルが境界線を共有するか分離するかを設定する

デフォルトでは、セルの境界線が分離されているため、各セルの間に隙間が空いています。

デフォルトではセルの間に隙間が空いている

この隙間をセルの境界線が共有されることでなくしたい場合は、border-collapseプロパティを使用します。

<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,
th,
td {
  border: 1px solid #333;
}

table {
  border-collapse: collapse;
}
border-collapse: collapse;を指定すると境界線が共有される
スクロールできます
border-collapseで指定できる値
collapseセルの境界線を共有する
separateセルの境界線を分離する
separateにしている場合は、border-spacingで境界同士の間隔を指定できる

横幅を指定する

テーブルの横幅を指定するには、tableタグに対してwidthを指定します。

<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,
th,
td {
  border: 1px solid #333;
}

table {
  width: 1000px;
  border-collapse: collapse;
}
横幅を1000pxに設定したテーブル

列毎に幅を指定したい場合はthあるいはtdに別途横幅を指定する必要があります。

<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,
th,
td {
  border: 1px solid #333;
}

table {
  width: 1000px;
  border-collapse: collapse;
}

th,td{
  width: 20%;
}
tdタグのみtext-align: centerで中央寄せにしている例

上のテーブルではth・tdタグに20%と指定して各セルの幅を均等にしています。

セル内の水平方向の配置を指定する

セル内の水平方向の配置を指定するには、text-alignプロパティを指定します。

thタグはデフォルトで中央寄せにされているので、tdタグのみtext-align: centerで中央寄せにします。

<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,
th,
td {
  border: 1px solid #333;
}

table {
  width: 1000px;
  border-collapse: collapse;
}

th,td{
  width: 20%;
}

td{
  text-align: center;
}
スクロールできます
text-alignの主要な値
left要素を左寄せにする
center要素を中央寄せにする
right要素を右寄せにする

垂直方向の配置はvertical-alignプロパティを使用します。

スクロールできます
vertical-alignの主要な値
top要素を上寄せにする
middle要素を中央寄せにする
bottom要素を下寄せにする

セルのテキスト・背景色を指定する

セルのテキスト・背景色を指定するには、それぞれcolorプロパティ、background-colorプロパティを指定します。

<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,
th,
td {
  border: 1px solid #333;
}

table {
  width: 1000px;
  border-collapse: collapse;
}

thead th {
  background-color: #555555;
  color: #ffffff;
}

tbody th {
  background-color: #dddddd;
}

th,
td {
  width: 20%;
}

td {
  text-align: center;
}
thタグにテキスト色、背景色を指定した例

tableタグのカスタマイズ方法

tableタグのより細かなカスタマイズ方法は以下の通りです。

セルを結合する

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

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,
th,
td {
  border: 1px solid #333;
}

table {
  width: 1000px;
  border-collapse: collapse;
}

thead th {
  background-color: #555555;
  color: #ffffff;
}

tbody th {
  background-color: #dddddd;
}

th,
td {
  width: 20%;
}

td {
  text-align: center;
}
colspanを使用して一部のセルが結合されている例

キャプションを付ける

<caption></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,
th,
td {
  border: 1px solid #333;
}

table {
  width: 1000px;
  border-collapse: collapse;
}

thead th {
  background-color: #555555;
  color: #ffffff;
}

tbody th {
  background-color: #dddddd;
}

th,
td {
  width: 20%;
}

td {
  text-align: center;
}

caption {
  font-size: 24px;
  text-align: left;
  border-left: 5px solid green;
  padding-left: 5px;
  margin-bottom: 5px;
}
テーブルにキャプションをつけている例

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

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

テーブルの列数が増えると、スマホ表示の際に文字が改行されて見にくくなります。

そこでスマホではテーブルを横スクロールさせることが可能です。具体的な方法は以下の記事で詳しく解説しているので、こちらもあわせてご覧下さい。

まとめ

今回はtableタグの使い方や装飾方法を詳しく解説しました。

tableタグは料金表や会社概要テーブル、カレンダーなどを実装する際によく使用されます。

この機会にしっかり覚えて、tableタグを使いこなせるようになりましょう。

今回は以上になります。最後までご覧頂き、ありがとうございました!

最短でデザインやコーディングスキルを学んでWebサイト制作を仕事にしたいと考えている方は、Webデザインスクールに通うのがおすすめです。

以下の記事では、Web制作者に必要なスキルが学べるおすすめスクールを紹介しているので、興味がある方はぜひご覧ください。

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!

【初心者歓迎】WordPressホームページ作成講座を始めました!

教えたいと学びたいをつなぐまなびのマーケット「ストアカ」にて、WordPressホームページ作成講座を開講しています。

初心者でもノーコード・ローコードで質の高いホームページを作る方法を0から学習!受講生1人ひとりに合わせたカリキュラムで初心者でも無理なく学べます。

ブログ・ホームページの自作に興味がある方は、ぜひ講座内容をチェックしてみて下さい。

著者情報

Ryoのアバター Ryo サイト運営者

Web系フリーランス4年目。

WordPressを使った企業サイト制作・改修やSEOを生業としています。

お仕事のご依頼はお問い合わせよりお願いします。(依頼可能業務については運営者情報ページに記載しております。)

目次