Ugo

Webエンジニアのためのプログラミング情報サイト

  • HTMLテーブルで表をデザインする！セルの結合・枠線を付ける・レスポンシブ対応など。

HTMLテーブルで表をデザインする！セルの結合・枠線を付ける・レスポンシブ対応など。

HTMLテーブルで表をデザインする！セルの結合・枠線を付ける・レスポンシブ対応など。

この記事では、HTMLのテーブルについて基本的な使い方と簡単なカスタマイズの方法を紹介する。

テーブルはHTML内に表を表示したいときに使用される。表は情報を直感的に分かりやすくまとめることが出来るので便利で使用頻度も高い。

この記事は特に以下のような人たちを対象にしている。

  • HTMLの知識はあまり無いがHTMLファイルで表を使いたい。
  • 自身のブログで使用している表をカッコよくカスタマイズしたい。
  • 企業サイトで使用している表をレスポンシブ対応させたい。

ぜひ、使いこなせるようになってほしい。では、見ていこう！

目次

HTMLテーブルとは？

HTMLテーブルはHTML内で表を使用するためのコンポーネント。

テーブルはHTMLファイル内で<table>タグを用いることによって使用できる。

テーブルは複数の行と列から構成される。また、大きくヘッダー・データ・フッターの3つに分類することができる。ひとつひとつのデータを入力する欄をセルと呼ぶ。

おおよそエクセルの表を思い浮かべてもらえれば、想像しやすいかもしれない。

See the Pen CSS Table Example by Yoshiki Kuno (@yoshiki449) on CodePen.

HTMLテーブルの使い方

では、テーブルの使い方を確認していこう。

テーブルを使用する

テーブルを使用するにはHTMLにて<table>タグを使用する。

<table></table>

テーブルのレイアウト（th・td）

HTMLテーブルの行と列の指定方法はいくつか存在する。

テーブルのレイアウトにはおもに以下の3種類のHTMLタグを使用する。

  • tr – table row ➡ テーブルの行
  • th – table header ➡ 見出しセル（ヘッダーセル）
  • td – table data ➡ データセル

<tr>がテーブルの行を表すので<th>や<td>を囲い込むかたちで使用する。

以下の例は上の3種類のHTMLタグを使用してテーブルのレイアウトを指定している。

<table>
  <tr>
    <th>ヘッダー1</th><th>ヘッダー2</th><th>ヘッダー3</th>
  </tr>
  <tr>
    <td>データ1</td><td>データ2</td><td>データ3</td>
  </tr>
</table>

このままではテーブルが分かりづらいので、CSSで枠線とスペースを枠線を付ける。

table, th, td {
  border: solid 1px black; 
  padding: 10px;
}

以下のような感じに表が表示されるされるはずだ。

セルの結合（colspan・rowspan）

次にセルの結合をする方法を説明していこう。

セルの結合が必要になる場面は多岐に渡るが、ここでは左側にサイドヘッダーを使用する際のパターンを見ていこう。

まずは先ほどのテーブルを以下のように拡張する。

<table>
  <tr>
    <th></th><th></th><th>ヘッダー1</th><th>ヘッダー2</th><th>ヘッダー3</th>
  </tr>
  <tr>
    <th>サイド1</th><th>サイド2</th><td>データ1</td><td>データ2</td><td>データ3</td>
  </tr>
  <tr>
  <th>サイド3</th><th>サイド4</th><td>データ4</td><td>データ5</td><td>データ6</td>
  </tr>
</table>

以下のように表が表示されるので、緑の枠で囲った部分のセルを結合してみる。

セルの結合にはcolspanとrowspan属性を使用する。

  • colspan – セルの列数を指定する
  • rowspan – 行の列数を指定する

1行目の最初のthにcolspan=”2″を加え、1行目の2番目のthを削除する。

2行目の最初のthにrowspan=”2″を加え、3行目の最初のthを削除する。

<table>
  <tr>
    <th colspan="2"></th><th>ヘッダー1</th><th>ヘッダー2</th><th>ヘッダー3</th>
  </tr>
  <tr>
    <th rowspan="2">サイド1</th><th>サイド2</th><td>データ1</td><td>データ2</td><td>データ3</td>
  </tr>
  <tr>
    <th>サイド4</th><td>データ4</td><td>データ5</td><td>データ6</td>
  </tr>
</table>

以下の写真のようにセルが結合されるはずだ。

テーブルのグループ化

次にテーブルの列や行をグループ化する方法を解説する。

テーブルをグループ化することによって、より効率的にテーブルを作成・管理することができる。

列のグループ化（colgroup）

テーブルの列をグループ化するには<colgroup>タグを使用する。

ここでは先ほどのテーブルを2つのグループに分け色を付けてみよう。

グループの分け方は<colgroup>タグ内にセルの数と同じ<col>タグを挟むことによって表現する。

<table>
  <colgroup><col><col></colgroup>
  <colgroup><col><col><col></colgroup>
  <tr>
  ...
</table>
colgroup:nth-of-type(1) { background: lightgreen; } 
colgroup:nth-of-type(2) { background: lightblue; }

以下の写真のようにテーブルが色分けされる。

<colgroup>として指定する列の数はspan属性を使って指定することもできる。

<colgroup><col><col></colgroup>は以下のように2通りに記述できる。

<colgroup><col span="2"></colgroup>
<colgroup span="2"></colgroup>

行のグループ化（thead・tbody・tfoot）

テーブルの行は<thead><tbody><tfoot>の3つのタグを使い、ヘッダー・データ・フッターに分類できる。

ここでは最初の行をヘッダーに2・3行目がデータとなるようにHTMLとCSSを変更する。

<table>
  <thead>
    <tr><th colspan="2"></th><th>ヘッダー1</th><th>ヘッダー2</th><th>ヘッダー3</th></tr>
  </thead>
  <tbody>
  　<tr><th rowspan="2">サイド1</th><th>サイド2</th><td>データ1</td><td>データ2</td><td>データ3</td></tr>
　　<tr><th>サイド4</th><td>データ4</td><td>データ5</td><td>データ6</td></tr>
  </tbody>
</table>
thead { background: orange; } 
tbody { background: yellow; }

偶数行だけ背景色を変える

次にテーブルの偶数行だけ背景色を変える方法を説明したい。

テーブルの偶数行のみスタイルを変えるのはとても簡単でCSSファイル上でtr:nth-child(even)を指定すればいい。

<table>
  <thead>
  <tr><th>ヘッダー1</th><th>ヘッダー2</th><th>ヘッダー3</th><th>ヘッダー4</th><th>ヘッダー5</th></tr>
  </thead>
  </tbody>
    <tr><td>A</td><td>B</td><td>C</td><td>D</td><td>E</td></tr>
    <tr><td>F</td><td>G</td><td>H</td><td>I</td><td>J</td></tr>
    <tr><td>K</td><td>L</td><td>M</td><td>N</td><td>O</td></tr>
    <tr><td>P</td><td>Q</td><td>R</td><td>S</td><td>T</td></tr>
  </tbody>
</table>
table {
  border-spacing: 0;
}

th, td {
  padding: 10px 30px;
  border: solid 0.5px black;
  text-align: center;
}

thead {
  color: white;
  background-color: black;
}

tr:nth-child(even) {
  background-color: #ededed;　//ここで偶数行のスタイルを変更している。
}

HTMLテーブルのカスタマイズ

ここからテーブルのカスタマイズ方法について見ていきたい。

テーブルのレスポンシブ対応

表はブログなどでもよく使用されるので、携帯やタブレットに合わせてスタイルを変化させたいという要望も多いだろう。

ここではテーブルのレスポンシブ対応について2つの実装パターンを紹介する。

表を横にスクロールする

レスポンシブ対応で一番簡単なのは横方向のスクロールを設置するパターン。

一定以下の横幅にてスクロールを表示させたいときは、以下のようにtableにoverflow-xとmin-widthプロパティを追加する。

table {
  overflow-x: auto;
  min-width: 600px;
}

表を縦並びに変更する

次は一定の横幅が無い場合に表を縦並びに変えるパターンを紹介する。

コードは少し複雑になるが、基本的にfloat: leftとdisplay: blockを使用して表を縦並びに変形している。

@media screen and (max-width: 640px) {
 
  table tr {
    display: block;
    float: left;
  }
  
  table tr td, 
  table tr th {
    display: block;
    height: 50px;
  }
  
  table thead {
    display: block;
    float: left;
  }
 
  table tbody {
    display: block;
    float: left;
  }
  
  table tbody tr {
    width: 25%;
  }
}
MENU