基本のテーブルを作る方法 | 行の交互色分け・セル結合・タイトルと説明文の設定

無料ツール

テーブルを自由に作成

行数・列数・枠線・背景色・文字色・セル結合などを設定して、HTMLとCSSを自動生成できます。

テーブル作成ツールを使う

新しいタブで開きます

HTMLとCSSを使って、タイトルと説明文を備えた基本のテーブルを作る方法を紹介します。テーブルは4列で構成し、見出し行とデータ行を区別して表示します。データ行には白色と淡い青色を交互に設定し、行ごとの内容を見分けやすくしています。

通常のセルに加えて、複数のセルを横方向にまとめる列結合と、縦方向にまとめる行結合にも対応しています。さらに、横2列・縦2行を同時に結合することで、複数の行と列にまたがる大きなセルも作成できます。

デモでは、列結合したセルにGoogleマップ、行結合したセルに画像、行と列を同時に結合したセルにYouTube動画を表示しています。通常のセルと結合セルが同じテーブル内でどのように配置されるかを確認できます。

デモ

基本のテーブル

通常のセルと結合セルを組み合わせたテーブルです。行ごとの色分けや、画像・地図・動画の表示を確認できます。

見出し1	見出し2	見出し3	見出し4
タイトル1	説明1	内容1	項目1
タイトル2	説明2	内容2	項目2
タイトル3	説明3
	説明4		内容4
	説明5		内容5
タイトル6			内容6
タイトル7			内容7

タイトル付きの4列テーブルです。7行のデータを白色と淡い青色で交互に色分けしています。

1〜2行目は通常のセル、3行目は3・4列目を横方向に結合してGoogleマップを表示しています。

4〜5行目は1列目と3列目をそれぞれ縦方向に結合して画像を表示しています。

6〜7行目は2・3列目を横2列・縦2行で結合し、YouTube動画を表示しています。

※画像・Googleマップ・YouTube動画はデモ専用です。掲載するコードでは、セルの結合のみを使用します。

コードをコピーして使おう！

<!DOCTYPE html>
<html lang="ja">
<head>
  <!-- 文字コードの設定 -->
  <meta charset="UTF-8">
  <!-- スマートフォンなどの画面幅に対応 -->
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <!-- ページタイトル -->
  <title>基本のテーブル</title>
  <!-- テーブルのデザインを設定するCSSを読み込む -->
  <link rel="stylesheet" href="style.css">
</head>
<body>

  <!-- =========================================
       基本のテーブル
  ========================================= -->

  <div class="basic-table_wrap">

    <!-- テーブルのタイトル -->
    <div class="basic-table_title">
      基本のテーブル
    </div>

    <!-- テーブルの説明文 -->
    <p class="basic-table_description">
      通常のセルと結合セルを組み合わせたテーブルです。
      行ごとの色分けや、列結合・行結合の表示を確認できます。
    </p>

    <!-- 4列・7行のテーブル本体 -->
    <table class="basic-table_table">

      <!-- 4列の見出し -->
      <thead>
        <tr>
          <th scope="col">見出し1</th>
          <th scope="col">見出し2</th>
          <th scope="col">見出し3</th>
          <th scope="col">見出し4</th>
        </tr>
      </thead>

      <!-- テーブルのデータ行 -->
      <tbody>

        <!-- 1行目：すべて通常のセル -->
        <tr>
          <td>タイトル1</td>
          <td>説明1</td>
          <td>内容1</td>
          <td>項目1</td>
        </tr>

        <!-- 2行目：すべて通常のセル -->
        <tr>
          <td>タイトル2</td>
          <td>説明2</td>
          <td>内容2</td>
          <td>項目2</td>
        </tr>

        <!-- 3行目：3列目と4列目を横方向に結合 -->
        <tr>
          <td>タイトル3</td>
          <td>説明3</td>
          <!-- colspan="2"で横方向の2列を1つのセルにする -->
          <td colspan="2">列結合セル</td>
        </tr>

        <!-- 4行目：1列目と3列目を5行目まで縦方向に結合 -->
        <tr>
          <!-- rowspan="2"で縦方向の2行を1つのセルにする -->
          <td rowspan="2">行結合セル1</td>
          <td>説明4</td>
          <!-- 3列目も5行目まで縦方向に結合 -->
          <td rowspan="2">行結合セル2</td>
          <td>内容4</td>
        </tr>

        <!-- 5行目：1列目と3列目は4行目から結合されているため省略 -->
        <tr>
          <td>説明5</td>
          <td>内容5</td>
        </tr>

        <!-- 6行目：2・3列目を横2列・縦2行で結合 -->
        <tr>
          <td>タイトル6</td>
          <!-- colspan="2"とrowspan="2"を組み合わせて4セル分の領域を作る -->
          <td colspan="2" rowspan="2">行・列結合セル</td>
          <td>内容6</td>
        </tr>

        <!-- 7行目：2・3列目は6行目から結合されているため省略 -->
        <tr>
          <td>タイトル7</td>
          <td>内容7</td>
        </tr>

      </tbody>

    </table>

  </div>

</body>
</html>

/* =========================================
   テーブル全体
========================================= */

.basic-table_wrap,
.basic-table_wrap * {
  box-sizing: border-box; /* 横幅や高さに内側余白と枠線を含める */
}

.basic-table_wrap {
  width: 100%; /* 設置先の横幅に合わせて表示する */
  max-width: 700px; /* 最大横幅。大きくするとテーブル全体が横に広がる */
  margin: 40px auto; /* 上下40pxの余白。左右は自動調整して中央に配置する */
  padding: 36px; /* 内側余白。大きくすると内容と外枠の間隔が広がる */
  border: 1px solid #dbe5f1; /* 外枠。1pxを大きくすると線が太くなる */
  border-radius: 18px; /* 外枠の角丸。大きくすると丸みが強くなる */
  background: #f8fafc; /* テーブル全体の背景色 */
  color: #111827; /* 全体の基本文字色 */
  font-family: sans-serif; /* 全体のフォント */
}

/* =========================================
   テーブルのタイトル
========================================= */

.basic-table_title {
  margin: 0 0 12px; /* 上左右0・下12pxの余白。大きくすると説明文との間隔が広がる */
  color: #111827; /* タイトルの文字色 */
  font-size: 20px; /* タイトルの文字サイズ。大きくすると文字が大きくなる */
  font-weight: 700; /* タイトルの文字の太さ */
  text-align: center; /* タイトルを中央揃えにする */
}

/* =========================================
   テーブルの説明文
========================================= */

.basic-table_description {
  margin: 0 0 24px; /* 上左右0・下24pxの余白。大きくするとテーブルとの間隔が広がる */
  color: #475569; /* 説明文の文字色 */
  font-size: 14px; /* 説明文の文字サイズ */
  line-height: 1.8; /* 行の高さ。大きくすると複数行の間隔が広がる */
  text-align: center; /* 説明文を中央揃えにする */
}

/* =========================================
   テーブル本体
========================================= */

.basic-table_table {
  width: 100%; /* 親要素の横幅いっぱいにテーブルを表示する */
  table-layout: fixed; /* 4列の横幅を均等に割り当てる */
  border-collapse: collapse; /* 隣り合うセルの枠線を重ねて表示する */
  background: #ffffff; /* テーブル本体の背景色 */
  font-size: 14px; /* セル内の基本文字サイズ */
  line-height: 1.6; /* セル内の行の高さ */
}

/* =========================================
   見出しセル
========================================= */

.basic-table_table th {
  padding: 14px 8px; /* 上下14px・左右8pxの内側余白 */
  border: 1px solid #bfdbfe; /* 見出しセルの枠線。1pxを大きくすると太くなる */
  background: #2563eb; /* 見出しセルの背景色 */
  color: #ffffff; /* 見出し文字の色 */
  font-size: 14px; /* 見出し文字のサイズ */
  font-weight: 700; /* 見出し文字の太さ */
  text-align: center; /* 見出し文字を中央揃えにする */
  overflow-wrap: anywhere; /* 長い文字列をセル内で折り返す */
}

/* =========================================
   通常セル・結合セル
========================================= */

.basic-table_table td {
  padding: 14px 8px; /* 上下14px・左右8pxの内側余白 */
  border: 1px solid #dbe5f1; /* データセルの枠線。1pxを大きくすると太くなる */
  background: #ffffff; /* 通常行の背景色 */
  color: #334155; /* セル内の文字色 */
  text-align: center; /* セル内の文字を中央揃えにする */
  vertical-align: middle; /* セル内の内容を縦方向の中央に配置する */
  overflow-wrap: anywhere; /* 長い文字列をセル内で折り返す */
}

/* =========================================
   データ行の背景色を交互に変更
========================================= */

.basic-table_table tbody tr:nth-child(even) td {
  background: #eff6ff; /* 偶数行の背景色を淡い青色にする */
}

/* =========================================
   スマートフォン対応
========================================= */

@media (max-width: 640px) {

  /* 画面幅640px以下では外枠の内側余白を小さくする */
  .basic-table_wrap {
    padding: 24px 12px; /* 上下24px・左右12pxの内側余白 */
  }

  /* スマートフォンでタイトルの文字サイズを調整 */
  .basic-table_title {
    font-size: 18px; /* タイトルの文字サイズ */
  }

  /* スマートフォンで説明文の文字サイズを調整 */
  .basic-table_description {
    font-size: 13px; /* 説明文の文字サイズ */
  }

  /* スマートフォンでテーブル内の文字サイズを調整 */
  .basic-table_table {
    font-size: 12px; /* セル内の基本文字サイズ */
  }

  /* スマートフォンで見出しセルの余白と文字サイズを調整 */
  .basic-table_table th {
    padding: 10px 4px; /* 上下10px・左右4pxの内側余白 */
    font-size: 12px; /* 見出し文字のサイズ */
  }

  /* スマートフォンでデータセルの余白を調整 */
  .basic-table_table td {
    padding: 10px 4px; /* 上下10px・左右4pxの内側余白 */
  }

}

コードについて 本記事のコードはサンプルコードです。ご利用前に必ず動作確認を行ってください。 免責事項 本コードの利用により発生した損害について、当サイトは一切の責任を負いません。

コードをコピーする場合 使用するコードのタブを選び、「このタブをコピー」をクリックすると、現在表示中のコードをコピーできます。 サンプル一式を取得する場合 HTML・CSSなどすべてのファイルが必要な場合は、「サンプル一式をダウンロード」をクリックしてください。

Q ダウンロードしたけど、これをネット上で動かすにはどうするの？

Googleアカウントがあれば、InfinityFreeで無料サーバーを作成して、ダウンロードしたサンプルをネット上で動かせます。

InfinityFreeを初めて利用する場合は①から、すでにサーバーを作成している場合は②へ進んでください。

ファイル構成と設置方法

無料のテーブル作成ツールを使う
HTMLやCSSを直接編集せずにテーブルを作成したい場合は、無料のテーブル作成ツールをご利用ください。テーブルのデザインや構成を自由に調整できます。
テーブルを自由に作成

今回のテーブルは、HTMLとCSSの2つのファイルで構成されています。 HTMLではタイトル・説明文・見出し行・データ行を配置し、セルを横方向や縦方向に結合しています。 CSSでは、テーブルの横幅・枠線・背景色・文字サイズを設定し、データ行の背景色を交互に切り替えています。 JavaScriptを使用せずに表示できる構成です。

sample/
  ├── index.html
  └── style.css

各ファイルの役割
index.htmlには、テーブルのタイトルと説明文、4列の見出し行、7行のデータ行を記述しています。 colspan属性とrowspan属性を使用し、セルの結合範囲を指定しています。
style.cssでは、テーブル全体の外枠、見出しセルの青色背景、データセルの枠線、偶数行の背景色、スマートフォンでの表示を設定しています。

設置方法・使い方
「サンプル一式をダウンロード」をクリックしてZIPファイルを保存し、展開してください。 sampleフォルダ内のindex.htmlとstyle.cssを同じ階層に配置します。
index.htmlをブラウザで開くと、タイトルと説明文の下に4列のテーブルが表示されます。表示する文字を変更する場合は、index.htmlの見出しセルやデータセルに記述された文字列を書き換えてください。

テーブルの基本構造
テーブル本体はtable要素で作成しています。 theadには見出し行、tbodyにはデータ行を配置しています。
1つの行はtr要素で表し、見出しセルにはth、通常のデータセルにはtdを使用します。今回の見出し行は次の構成です。

<!-- 4列の見出し -->
<thead>
  <tr>
    <th scope="col">見出し1</th>
    <th scope="col">見出し2</th>
    <th scope="col">見出し3</th>
    <th scope="col">見出し4</th>
  </tr>
</thead>

scope="col"は、その見出しが列に対応していることを示す属性です。見出しの数や文字を変更する場合は、th要素を編集してください。
データ行を追加する場合は、tbody内にtr要素を追加し、必要な数のtd要素を配置します。セルを結合しない通常の行では、4つのtd要素を使用します。

テーブルのタイトルと説明文
テーブルの上部には、タイトルを表示するbasic-table_titleと、説明文を表示するbasic-table_descriptionを配置しています。どちらもtable要素の外側にあるため、見出し行やデータ行とは独立して表示されます。

<!-- テーブルのタイトル -->
<div class="basic-table_title">
  基本のテーブル
</div>

<!-- テーブルの説明文 -->
<p class="basic-table_description">
  通常のセルと結合セルを組み合わせたテーブルです。
  行ごとの色分けや、列結合・行結合の表示を確認できます。
</p>

タイトルと説明文の内容は、それぞれの要素内の文字列を変更してください。
タイトルの文字サイズは.basic-table_titleのfont-size: 20px;で設定しています。説明文は.basic-table_descriptionのfont-size: 14px;で文字サイズを指定し、margin: 0 0 24px;でテーブルとの間隔を確保しています。

横方向にセルを結合する方法
3行目では、3列目と4列目を横方向に結合しています。横方向の結合にはcolspan属性を使用し、結合する列数を指定します。

<!-- 3行目：3列目と4列目を横方向に結合 -->
<tr>
  <td>タイトル3</td>
  <td>説明3</td>
  <!-- colspan="2"で横方向の2列を1つのセルにする -->
  <td colspan="2">列結合セル</td>
</tr>

colspan="2"は、1つのセルを横方向の2列分に広げる指定です。今回は4列のテーブルなので、最初の2列を通常のセルとし、残りの2列を1つのセルにまとめています。
横方向に3列を結合する場合はcolspan="3"に変更します。その場合、同じ行に配置するほかのセルの数も調整し、結合後の合計が4列分になるようにしてください。

縦方向にセルを結合する方法
4行目と5行目では、1列目と3列目をそれぞれ縦方向に結合しています。縦方向の結合にはrowspan属性を使用します。

<!-- 4行目：1列目と3列目を5行目まで縦方向に結合 -->
<tr>
  <!-- rowspan="2"で縦方向の2行を1つのセルにする -->
  <td rowspan="2">行結合セル1</td>
  <td>説明4</td>
  <!-- 3列目も5行目まで縦方向に結合 -->
  <td rowspan="2">行結合セル2</td>
  <td>内容4</td>
</tr>

<!-- 5行目：1列目と3列目は4行目から結合されているため省略 -->
<tr>
  <td>説明5</td>
  <td>内容5</td>
</tr>

rowspan="2"は、現在の行から次の行まで、縦方向の2行を結合する指定です。結合されたセルは4行目に記述するため、5行目には同じ位置のtd要素を追加しません。
縦方向に3行を結合する場合はrowspan="3"に変更し、結合範囲に含まれる後続の行からも、対応するセルを省略してください。

横方向と縦方向を同時に結合する方法
6行目と7行目では、2列目と3列目を横方向に結合し、さらに縦方向にも2行分を結合しています。 1つのtd要素にcolspanとrowspanを同時に指定します。

<!-- 6行目：2・3列目を横2列・縦2行で結合 -->
<tr>
  <td>タイトル6</td>
  <!-- colspan="2"とrowspan="2"を組み合わせて4セル分の領域を作る -->
  <td colspan="2" rowspan="2">行・列結合セル</td>
  <td>内容6</td>
</tr>

<!-- 7行目：2・3列目は6行目から結合されているため省略 -->
<tr>
  <td>タイトル7</td>
  <td>内容7</td>
</tr>

colspan="2" rowspan="2"によって、横2列・縦2行にまたがるセルを作成しています。 7行目では中央の2列が結合済みのため、1列目と4列目のセルだけを記述しています。
結合範囲を変更するときは、結合後の列数と、後続の行に残すセルの位置を合わせて調整してください。

行の背景色を交互に変更する方法
データ行の背景色は、CSSのnth-child(even)を使用して切り替えています。偶数番目のtr要素に含まれるtd要素へ、淡い青色の背景を設定しています。

/* =========================================
   データ行の背景色を交互に変更
========================================= */

.basic-table_table tbody tr:nth-child(even) td {
  background: #eff6ff; /* 偶数行の背景色を淡い青色にする */
}

evenは偶数行を表します。奇数行の背景色を変更したい場合はevenをoddに書き換えてください。
背景色を変更する場合は#eff6ffを希望する色に変更します。なお、rowspanで縦方向に結合したセルは1つのセルとして扱われるため、複数行にまたがっていても、背景色はそのセルを記述した行の設定に従います。下側の行と同じ背景色にしたい場合は、CSSで結合セルの背景色を個別に指定することで変更できます。

テーブルの横幅・枠線・セルの余白を調整する方法
テーブル全体の最大横幅は.basic-table_wrapのmax-width: 700px;で指定しています。この数値を大きくするとテーブル全体が横に広がり、小さくするとコンパクトになります。

/* =========================================
   通常セル・結合セル
========================================= */

.basic-table_table td {
  padding: 14px 8px; /* 上下14px・左右8pxの内側余白 */
  border: 1px solid #dbe5f1; /* データセルの枠線。1pxを大きくすると太くなる */
  background: #ffffff; /* 通常行の背景色 */
  color: #334155; /* セル内の文字色 */
  text-align: center; /* セル内の文字を中央揃えにする */
  vertical-align: middle; /* セル内の内容を縦方向の中央に配置する */
  overflow-wrap: anywhere; /* 長い文字列をセル内で折り返す */
}

padding: 14px 8px;は、セルの上下に14px、左右に8pxの余白を設定しています。上下の数値を大きくすると行の高さが広がり、左右の数値を大きくすると文字と枠線の間隔が広がります。
border: 1px solid #dbe5f1;では枠線の太さと色を設定しています。 text-align: center;をleftに変更すると文字を左揃えにでき、vertical-align: middle;をtopに変更すると、縦方向に結合したセルの内容を上寄せにできます。

レスポンシブ対応
テーブル全体にはwidth: 100%;とmax-width: 700px;を指定しているため、設置先の横幅に合わせて縮小します。
また、画面幅が640px以下になると、外枠の内側余白、タイトルと説明文の文字サイズ、セルの余白を小さくしています。

/* =========================================
   スマートフォン対応
========================================= */

@media (max-width: 640px) {

  /* 画面幅640px以下では外枠の内側余白を小さくする */
  .basic-table_wrap {
    padding: 24px 12px; /* 上下24px・左右12pxの内側余白 */
  }

  /* スマートフォンでタイトルの文字サイズを調整 */
  .basic-table_title {
    font-size: 18px; /* タイトルの文字サイズ */
  }

  /* スマートフォンで説明文の文字サイズを調整 */
  .basic-table_description {
    font-size: 13px; /* 説明文の文字サイズ */
  }

  /* スマートフォンでテーブル内の文字サイズを調整 */
  .basic-table_table {
    font-size: 12px; /* セル内の基本文字サイズ */
  }

  /* スマートフォンで見出しセルの余白と文字サイズを調整 */
  .basic-table_table th {
    padding: 10px 4px; /* 上下10px・左右4pxの内側余白 */
    font-size: 12px; /* 見出し文字のサイズ */
  }

  /* スマートフォンでデータセルの余白を調整 */
  .basic-table_table td {
    padding: 10px 4px; /* 上下10px・左右4pxの内側余白 */
  }

}

max-width: 640pxは、スマートフォン向けの設定を適用する画面幅の条件です。この数値を変更すると、文字サイズや余白が切り替わる画面幅を調整できます。
今回は4列の構成を維持するため、スマートフォンでも列数は変更していません。セル内の文字が長くなる場合は、実際の表示幅を確認しながら文字サイズや余白を調整してください。