【HTML】tableタグで表を作成する方法！セルの結合についても解説

HTMLではtableタグを使って表を作成することができます。

tableタグはtrタグ、thタグ、tdタグなど複数のタグといっしょに使用します。tableタグが扱えるようになると、綺麗な表組みを作れるようになります。

この記事では、「tableタグを表の作成方法」について解説していきます。

この記事のゴールは「tableタグの使い方を理解し、簡単な表を作成できるようになること」です。

いっしょに学習していきましょう。

この記事で身につく内容

• HTMLのtableの基礎知識

HTMLにはtableタグだけではなく、imgタグやsectionタグなどさまざまなタグがあります。下記の記事で解説していますので、ご一読ください。

【HTML】画像を表示させるimgタグの使い方について解説

【HTML】コンテンツを区切るタグ、sectionとarticleの違いについて解説

プログラミング学習でこのような経験はありませんか？

1. 目標に向けて何を学べば良いかわからない
2. 調べても解決策が見つからない
3. 現場レベルのスキルが身につくのか不安

これらの悩みは、学習環境を整えることで全て解決することができます。

ZeroPlus Gateでは、30日間無料で最適な学習環境を提供しています。

1. なんでも相談できる専属メンター
2. いつでも技術相談ができるプロ講師
3. 元IT企業CTO監修のカリキュラム

条件なしでこのレベルの環境を無料で提供しているのはZeroPlus Gateだけです。
ただし、無料サービスの提供には参加者の数に制限があります。

少しでも興味がある方は、以下のリンクからサービスの詳細をご覧ください。

今すぐZeroPlus Gateの詳細を見る

HTMLのtableタグとは：表を作成するタグ

tableタグとは、trタグ、thタグ、tdタグなどと組み合わせて表を作成するためのタグです。

基本書式

<table>
  <tbody>
    <tr>
      <th></th>
      <td></td>
    </tr>
    <tr>
      <th></th>
      <td></td>
    </tr>
    <tr>
      <th></th>
      <td></td>
    </tr>
    <tr>
      <th></th>
      <td></td>
    </tr>
  </tbody>
</table>   

基本書式をコードに当てはめると、次のようになります。

<table>
  <tbody>
    <tr>
      <th>項目</th>
      <td>内容</td>
    </tr>
    <tr>
       <th>項目</th>
       <td>内容</td>
    </tr>
    <tr>
       <th>項目</th>
       <td>内容</td>
    </tr>
    <tr>
        <th>項目</th>
        <td>内容</td>
    </tr>
  </tbody>
</table>

table {
  border: 1px solid #000;
}

table th {
  border: 1px solid #000;
}

table td {
  border: 1px solid #000;
}

出力結果

See the Pen table by ZeroPlus (@zeroplus-programming) on CodePen.

tableタグで表が作成されました。

CSSで線のスタイルを適用しないと表のように表示されないので、スタイルを適用しましょう。

表の構造:table, tr, th, td

表の構造について画像でイメージしてみましょう。

まずは、HTMLで「表」を作成する際の基本構造を確認していきましょう。

• tableタグ：「表全体」を形作る構造
• trタグ：表の中の「行」を形作る構造（table row）
• thタグ：表の「見出し」を形作る構造（table head）
• tdタグ：表の「データ」を形作る構造（table data）

HTMLで「表」を作成する際には、以上の４つのタグを使います。

それぞれの役割を画像のように理解しておければ大丈夫です。

CSSで表にスタイルを当てる

次に、HTMLで作成した表に対してCSSでスタイルを当てていきましょう。

今回は、いくつかパターンに分けて紹介していきます。

borderプロパティで表に枠線をつける

See the Pen Untitled by ZeroPlus (@zeroplus-programming) on CodePen.

参考コードのように「borderプロパティ」を記述することで、表に枠線をつけることができます。

border-collapseプロパティ：隣り合うセルの枠線の間隔を設定する

See the Pen Untitled by ZeroPlus (@zeroplus-programming) on CodePen.

先ほどの例だと「tableタグ」「thタグ」「tdタグ」のそれぞれに対して「borderプロパティ」を適用していました。
なので、枠線が２重になって見えてしまっています。

この枠線を１本にしたい場合は「tableタグ」に対し、border-collapse: collapse;を記述してあげましょう。

border-collapseプロパティは、隣り合ったセルの間隔を指定するプロパティです。

border-collapseプロパティは、collapseとseparateの2つの値を指定することができます。

collapse

 隣り合うセルで境界線を共有します。上記コードのように指定した表示になります。

separate

隣り合うセルはそれぞれで境界線を持ちます。

<table class="sample-table">
  <tr>
    <th class="sample-th">見出しA</th>
    <td class="sample-td">データA</td>
  </tr>
  <tr>
    <th class="sample-th">見出しB</th>
    <td class="sample-td">データB</td>
  </tr>
  <tr>
    <th class="sample-th">見出しC</th>
    <td class="sample-td">データC</td>
  </tr>
</table>

.sample-table {
  border-collapse: separate;
  border: 1px solid #000;
}

.sample-th {
  border: 1px solid #000;
}

.sample-td {
  border: 1px solid #000;
}

出力結果

See the Pen table-separate by ZeroPlus (@zeroplus-programming) on CodePen.

paddingで表の余白を整える

See the Pen Untitled by ZeroPlus (@zeroplus-programming) on CodePen.

表のセルの中の余白を整えたい場合は、「paddingプロパティ」を使用します。

rowspan属性：表を縦方向に結合する

See the Pen Untitled by ZeroPlus (@zeroplus-programming) on CodePen.

表の項目を統合して表示したい場合は、「縦方向」か「横方向」に統合するかによって記述の方法が異なります。

こちらの例では「tdタグ」を「縦方向」に統合したいので、「rowspan属性」を記述しました。 ３つの項目を統合するので、値は「３」を記述します。

統合する箇所の「tdタグ」は記述しないことに注意しましょう。

colspan属性：表を横方向に統合する

See the Pen Untitled by ZeroPlus (@zeroplus-programming) on CodePen.

こちらの例では「tdタグ」を「横方向」に統合したいので、「colspan属性」を記述しました。 今回も3つの項目を統合するので、値は「3」を記述します。

表の横幅を調節する

See the Pen Untitled by ZeroPlus (@zeroplus-programming) on CodePen.

表の横幅を調節する際は、tableタグ（表全体）に対して横幅を指定してあげましょう。

thタグやtdタグなどの横幅は、tableタグの大きさによって自動で計算されます。そのためthタグやtdタグなどの横幅は、特に必要がない場合は指定しないでおきましょう。

表をデザインしてみよう

tableタグを使って、表を作成してみましょう。

次のような表を作成するにはどのように記述すればいいでしょうか？

ポイントは上から一行ずつ、丁寧に確認しながら書いていくことです。それぞれのセルがどれだけの縦幅・横幅をもつか考えて指定してみましょう。

以下は作成例になります。

<table>
  <tr>
    <th>○○</th>
    <th colspan="2">○○</th>
    <td rowspan="4">■■</td>
  </tr>
  <tr>
    <th>✕✕</th>
    <td rowspan="2">△△</td>
    <td rowspan="2">〇〇</td>
  </tr>
  <tr>
    <th>✕✕</th>
  </tr>
</table>

table {
  border-collapse: collapse;
  border: 1px solid #000;
}

table th {
  border: 1px solid #000;
}

table td {
  border: 1px solid #000;
}

出力結果

See the Pen table-デザイン by ZeroPlus (@zeroplus-programming) on CodePen.

制作の現場では、デザインカンプを見ながら考えて表を作成しなければなりません。手を動かして、どんな表でも作れるようになっておきましょう。

まとめ

tableタグを使った表の作成方法について解説しました。tableタグは表組みを作成するのに便利なので活用していきましょう。divタグで表を作るのとtableタグで表を作るのでは、tableタグを使ったほうが楽に感じられるはずです。

プログラミング学習でこのような経験はありませんか？

1. 目標に向けて何を学べば良いかわからない
2. 調べても解決策が見つからない
3. 現場レベルのスキルが身につくのか不安

これらの悩みは、学習環境を整えることで全て解決することができます。

ZeroPlus Gateでは、30日間無料で最適な学習環境を提供しています。

1. なんでも相談できる専属メンター
2. いつでも技術相談ができるプロ講師
3. 元IT企業CTO監修のカリキュラム

条件なしでこのレベルの環境を無料で提供しているのはZeroPlus Gateだけです。
ただし、無料サービスの提供には参加者の数に制限があります。

少しでも興味がある方は、以下のリンクからサービスの詳細をご覧ください。

今すぐZeroPlus Gateの詳細を見る

HTMLには様々なタグや属性の種類があり、タグ一つでも覚えることがたくさんあります。少しずつ学習を進めていきましょう。

Web制作は、その他にも学ぶべき知識が数多くあります。

Web制作初学者がWeb制作を学習するにあたって、押さえておくべき知識・技術は「Web制作学習ロードマップ」の記事にまとめています。どこまで勉強すればいいか分からない、次はどんなスキルを勉強すればいいか分からない、という方はぜひ参考にしてみてください！

初学者が最速でWeb制作者になるために必要なスキルと学習ロードマップ

表を作成するtableタグまとめ

• tableタグは、trタグ、thタグ、tdタグを組み合わせて表を作ることができる
• 表の結合をすることができる

\ 学んだことをSNSでシェアしよう /

facebook

X

LINE

ハテブ

Pocket

URL
copy

コピー