HTMLのtableタグで表を作成する方法 │ 基本要素から徹底解説

HTMLのtableタグは、データを表形式で整理して表示する際にたいへん便利な要素です。

本記事では、tableタグを使った基本的な表の作成方法から、装飾やレイアウトの調整方法、文字の配置変更、ヘッダーやフッターの追加方法までを詳しく解説します。

初心者でも理解しやすい具体例を交えて説明しており、これからHTMLを学ぶ方に最適な内容となっていますので、ぜひ参考にしてください。

HTMLで表（table）を作成する際の基本

表を作成するためにHTMLで使用する要素には、tableタグ、trタグ、thタグ、tdタグなどがあります。それぞれの役割を正しく理解することで、情報を整理しやすく見やすい表を作成できます。また、単に表を作るだけでなく、装飾やレイアウトの調整を行うことで、より効果的なデザインが可能です。本章では、これらの要素の概要や使い方をわかりやすく解説します。

tableタグとは？

tableタグは、HTMLで表を作成する際の基盤となる要素です。

tableタグの中には

• tr（行）タグ
• th（ヘッダーセル）タグ
• td（データセル）タグ

が存在し、これらを組み合わせることで表を作ることができます。これらは次章で解説しますので、ご安心ください。

たとえば<table>で表全体を囲み、その中に<tr>で行を定義し、さらにその中に<th>や<td>でセルを追加します。具体的には、以下のようなコードになります。

<table border="1">
    <!-- 表のヘッダー行 -->
    <tr>
      <th>名前</th>
      <th>年齢</th>
      <th>職業</th>
    </tr>
    <!-- 表のデータ行 -->
    <tr>
      <td>田中太郎</td>
      <td>30</td>
      <td>エンジニア</td>
    </tr>
    <tr>
      <td>山田花子</td>
      <td>25</td>
      <td>デザイナー</td>
    </tr>
    <tr>
      <td>鈴木一郎</td>
      <td>40</td>
      <td>マネージャー</td>
    </tr>
  </table>

tr要素・th要素・td要素とは？

上記で登場したtr要素・th要素・td要素の概要については、簡潔にまとめると以下のようになります。

• tr要素…表の「行」を定義する
• th要素…表の「ヘッダーセル」を定義する
• td要素…表の「中身」を定義する

図にすると、以下のようになります。

trで囲んでいるものは横並び、中でもthで囲っているものはヘッダーのような装飾が自動で施されます。

そしてtdで囲っているものは、データの中身を指しています。

なお上記の説明で理解できなかったり、もっと詳しく知りたい方は、以下の記事も参考になるので、ぜひご一読ください。

【HTML・CSS】table要素で表を実装するには？コピペで使えるデザインサンプルも紹介

HTMLによる表のコーディング例

前章で掲載した図をそのままコードにすると、以下のようになります。

<table border="1">
  <tr>
    <th>名前</th>
    <th>年齢</th>
    <th>職業</th>
  </tr>
  <tr>
    <td>田中太郎</td>
    <td>30</td>
    <td>エンジニア</td>
  </tr>
  <tr>
    <td>山田花子</td>
    <td>25</td>
    <td>デザイナー</td>
  </tr>
</table>

上記のコードで、できあがる表は、以下のようになります。

HTMLで表を装飾する方法

この章では、HTMLで表を装飾する方法として、以下の3つの使い方をご紹介します。

• border属性
• bordercolor属性
• bgcolor属性

border属性の使い方

border属性は表に枠線を追加するための属性で、値として数字を指定し、枠線の太さを決定します。

<table border="2">
  <tr>
    <th>名前</th>
    <th>年齢</th>
  </tr>
  <tr>
    <td>田中太郎</td>
    <td>30</td>
  </tr>
</table>

ちなみに、このborder属性をつけ忘れると、以下のような線がない表ができてしまいます。

bordercolor属性の使い方

bordercolor属性は、表の枠線の色を指定するための属性です。

<table border="2" bordercolor="red">
  <tr>
    <th>名前</th>
    <th>年齢</th>
  </tr>
  <tr>
    <td>田中太郎</td>
    <td>30</td>
  </tr>
</table>

上記のコードを実行すると、以下のようになります。

bgcolor属性の使い方

bgcolor属性は、表やセルの背景色を指定するための属性です。

<table border="2" bgcolor="lightblue">
  <tr>
    <th>名前</th>
    <th>年齢</th>
  </tr>
  <tr>
    <td>田中太郎</td>
    <td>30</td>
  </tr>
</table>

たとえば、上記を実行すると、以下のようになります。

HTMLで表のセルのレイアウトを変える方法

Webページ上の表はCSSで大きさなどを調節するイメージがあると思いますが、HTMLだけでも変えることが可能です。

この章では、HTMLで表のセルのレイアウトを変える方法をご紹介します。

そもそもピクセルとパーセントの違いとは？

レイアウトを変える方法を解説する前に、まず前提知識として「ピクセル」と「パーセント」の違いを解説します。

ピクセル（px）は画面上の固定単位のことで、指定した数値で正確なサイズを設定できます。

一方、パーセントは親要素や画面サイズを基準とした相対的な単位のことを指します。

両者の違いですが、例えば

width="300px"

と書けば固定幅が指定されるので、画面サイズが変わっても変化せず30ピクセルのままです。

一方で、

width="50%"

と書けば、親要素の半分の幅に自動調整されます。

したがってピクセルは正確さが求められる場合、パーセントはレスポンシブデザインに適しています。

width属性でセル・表の幅を変える

width属性は、表全体やセルの幅を指定するために使うもので、単位はピクセル（px）とパーセント（%）どちらでも指定可能です。

たとえば、

<table width="80%">

と記述すれば、表の幅が画面幅の80%に自動調節されます。

また、セルごとに

<td width="100px">

と指定すると、セルの幅が固定されます。

この属性を使えば、データの可読性を向上させたり、レイアウトを整えられます。

実際の記述例としては、以下のようになります。

<table border="1" width="80%">
  <tr>
    <th width="50%">名前</th>
    <th width="50%">職業</th>
  </tr>
  <tr>
    <td>田中太郎</td>
    <td>エンジニア</td>
  </tr>
</table>

適応前

適応後

height属性でセル・表の高さを変える

前述のwidthが幅だったのに対し、height属性は高さを指定できます。

例えば、

<table height="200px">

と指定すれば、表全体の高さが固定されます。

また、セルごとに

<td height="50px">

と設定することで、特定のセルの高さを変更できます。

記述例としては、以下のようになります。

<table border="1" height="150px">
  <tr>
    <th height="50px">名前</th>
    <th height="50px">職業</th>
  </tr>
  <tr>
    <td>田中太郎</td>
    <td>エンジニア</td>
  </tr>
</table>

適応前

適応後

cellpadding属性でセルの余白を調整する

cellpadding属性は、セル内のコンテンツとセルの枠線との間の余白を指定します。

たとえば、

<table cellpadding="10">

と記述すれば、全てのセルの内側に10ピクセルの余白が追加されます。

表は適度な余白があれば格段に見やすくなるので、そういった調整の意味合いで使われます。

記述例は、以下のようになります。

<table border="1" cellpadding="10">
  <tr>
    <th>名前</th>
    <th>職業</th>
  </tr>
  <tr>
    <td>田中太郎</td>
    <td>エンジニア</td>
  </tr>
</table>

適応前

適応後

rowspan属性でセルを結合する（縦方向）

rowspan属性は、縦方向に隣接するセルを結合するために使用します。

たとえば、

<td rowspan="2">

と記述すると、そのセルが2行分の高さに結合されます。

こちらも主に見やすさ調整のために用いられるもので、使用例は以下のとおりです。

<table border="1">
  <tr>
    <th rowspan="2">名前</th>
    <th>職業</th>
  </tr>
  <tr>
    <td>エンジニア</td>
  </tr>
</table>

適応前

適応後

＞＞DMM WEBCAMP フロントエンドコースの詳細はこちら

colspan属性でセルを結合する（横方向）

colspan属性は、横方向に隣接するセルを結合するために使用します。

たとえば、

<td colspan="3">

と記述すると、そのセルが3列分の幅に結合されます。

使用例としては、以下のようになります。

<table border="1">
  <tr>
    <th colspan="2">社員情報</th>
  </tr>
  <tr>
    <th>名前</th>
    <th>職業</th>
  </tr>
  <tr>
    <td>田中太郎</td>
    <td>エンジニア</td>
  </tr>
</table>

なお、ここまでテーブルの結合方法について解説してきましたが、より詳しく知りたい方はぜひ以下をご覧ください。

【HTML・CSS】table要素で表を実装するには？コピペで使えるデザインサンプルも紹介

また、表の実装方法自体、もっと基礎から学び直したい方は、以下の記事も参考になります。

【HTML・CSS】table要素で表を実装するには？コピペで使えるデザインサンプルも紹介

HTMLで表の文字のレイアウトを変える方法

ここまで表示帯のレイアウトを変える方法を解説してきましたが、HTMLは表の中の文字の装飾を行うことも可能です。

この章では、表の文字のレイアウトを変える方法について解説します。

align属性とは？

align属性は、セル内の文字やデータの配置（左揃え、中央揃え、右揃え）を指定するためのHTML属性です。

alignの値にはleft（左寄せ）、center（中央揃え）、right（右寄せ）があり、それぞれのデザインに応じたレイアウトが可能です。

記述例は以下のとおりです。

<table border="1">
  <tr>
    <th align="center">名前</th>
    <th align="center">職業</th>
  </tr>
  <tr>
    <td align="left">田中太郎</td>
    <td align="left">エンジニア</td>
  </tr>
</table>

leftで文字を左寄せにする

align=”left”を指定すると、セル内の文字が左寄せされます。

ただデフォルトの配置でも左寄せになるため、指定が必要な場合に使います。

<table border="1">
  <tr>
    <th align="center">名前</th>
    <th align="center">職業</th>
  </tr>
  <tr>
    <td align="center">田中太郎</td>
    <td align="center">エンジニア</td>
  </tr>
</table>

centerで文字を中央揃えにする

align=”center”を指定すると、セル内の文字が中央揃えされます。

ヘッダー行などで見出しを目立たせるのに適しています。

<table border="1">
  <tr>
    <th align="center">名前</th>
    <th align="center">職業</th>
  </tr>
  <tr>
    <td align="center">田中太郎</td>
    <td align="center">エンジニア</td>
  </tr>
</table>

結果

rightで文字を右寄せにする

align=”right”を指定すると、セル内の文字が右寄せされます。数値データや特定の配置が必要な場合に役立ちます。

<table border="1">
  <tr>
    <th align="right">名前</th>
    <th align="right">職業</th>
  </tr>
  <tr>
    <td align="right">田中太郎</td>
    <td align="right">エンジニア</td>
  </tr>
</table>

HTMLで表にヘッダーやフッターを追加する方法

HTMLは、ヘッダーやフッターをつけることも可能です。

この章で、その方法を見ていきましょう。

theadでヘッダーを指定する

<thead>は、表のヘッダー部分を指定するためのタグです。

通常、表の最初の行に配置され、列の見出しや説明を定義します。

ヘッダーとしてまとめて定義することで、HTMLの構造がわかりやすくなるので、SEO対策としても有効です。

以下のように、<thead>内に<tr>と<th>を記述することで、表のヘッダーを定義します。

<table border="1">
  <thead>
    <tr>
      <th>名前</th>
      <th>年齢</th>
      <th>職業</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>田中太郎</td>
      <td>30</td>
      <td>エンジニア</td>
    </tr>
  </tbody>
</table>

tbodyでテーブルの内容になる部分を指定する

<tbody>は、表の主要なデータ部分を指定するためのタグで、ヘッダー（<thead>）やフッター（<tfoot>）と区別して内容をまとめるときに使われます。

以下のように、<tbody>で表の主要なデータ部分を定義します。

<table border="1">
  <thead>
    <tr>
      <th>名前</th>
      <th>年齢</th>
      <th>職業</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>田中太郎</td>
      <td>30</td>
      <td>エンジニア</td>
    </tr>
    <tr>
      <td>山田花子</td>
      <td>25</td>
      <td>デザイナー</td>
    </tr>
  </tbody>
</table>

tfootでフッターを指定する

<tfoot>は、表のフッター部分を指定するためのタグで、合計値や注釈などを記述する際に使用します。

表の一番下に表示されますが、HTMLのコード上では<thead>や<tbody>の前に記述します。

<tfoot>内にフッター行を記述し、合計や注釈をまとめます。

<table border="1">
  <thead>
    <tr>
      <th>名前</th>
      <th>年齢</th>
      <th>職業</th>
    </tr>
  </thead>
  <tfoot>
    <tr>
      <td colspan="3">合計: 2人</td>
    </tr>
  </tfoot>
  <tbody>
    <tr>
      <td>田中太郎</td>
      <td>30</td>
      <td>エンジニア</td>
    </tr>
    <tr>
      <td>山田花子</td>
      <td>25</td>
      <td>デザイナー</td>
    </tr>
  </tbody>
</table>

未経験からHTMLを習得するならDMM WEBCAMP

未経験からHTMLを習得したいと考えている方であれば、ぜひプログラミングスクール「DMM WEBCAMP」をご活用ください。

DMM WEBCAMPは、未経験からHTMLを習得したい方に最適なプログラミングスクールです。

同校のカリキュラムはプログラミング初心者向けに設計されているため、インターネットやプログラミングの基礎知識を実践を通して学習できます。

DMM WEBCAMPの特徴

DMM WEBCAMPは、未経験からITエンジニアを目指す方に最適なプログラミングスクールとして、転職成功率98.8％、輩出数3,000人以上の実績を誇ります。

またDMM WEBCAMPはリスキリングを通じたキャリアアップ支援事業を行っており、受講料が最大70％（56万円）キャッシュバックされます。

また、コースは大きく3つに分かれており、

• 就職両立コースは補助金活用で249,350円
• 専門技術コースは補助金活用で270,800円
• 短期集中コースは定価一括払いで690,800円

と、補助金活用で安価で受講することが可能となっています。

ぜひ実績豊富なDMM WEBCAMPをおトクに受講し、食いはぐれないスキルを手に入れましょう！

＞＞DMM WEBCAMP フロントエンドコースの詳細はこちら

まとめ

HTMLで作る表は、本記事で紹介した基本構造や装飾方法を実践することで、見やすくデザイン性の高いものになります。

配置やレイアウトをHTMLで作り、他の凝った装飾をCSSで行うことで、より洗練されたデザインを実現できるでしょう。

効率よくスキルを習得したい方は、DMM WEBCAMPのような学習サービスの利用もおすすめです！

＞＞DMM WEBCAMP フロントエンドコースの詳細はこちら