コードカキタイ
コーディング
HTML
HTMLのtableタグはどう使う？表作成からレイアウトの方法を解説

HTML

最終更新日: 2024.01.30 (公開: 2024.01.30)

HTMLのtableタグはどう使う？表作成からレイアウトの方法を解説

HTMLではtableタグを使って表を作成でき、thタグやtrタグなどの要素を組み合わせることで、整った表の作成も可能です。

HTMLで表を作成する機会は多いため、tableタグの使い方を理解しておけばさまざまな場面で役立つでしょう。本記事では、tableタグの中身を構成するタグの意味や使い方について解説します。

HTMLのtableタグとは？
HTMLのtableタグで枠線を作る方法
HTMLのtableタグで枠線内の色を変える方法
HTMLのtableタグで表の幅と高さ、余白を調整する方法
HTMLのtableタグで表を結合・幅を調整する方法
HTMLのtableタグは表の作成に便利なタグ

HTMLのtableタグとは？

HTMLのtableタグは、表を作る際に使用するものです。表は、th・tr・tdの3つの要素を組み合わせて作成できます。

ここからは、3つのタグの意味について詳しく解説します。

thタグの意味
trタグの意味
tdタグの意味

thタグの意味

thタグは、表に見出しをつける際に使用します。tableタグの下層で使用することと、表の項目ごとにタイトルの設定が可能です。

たとえば以下の表の場合、見出しとなるth要素は「名前」と「値段」です。

名前	値段
りんご	200円
ぶどう	300円

th要素は、初期設定で中央寄せになっています。
上記の表の具体的なHTMLのコードは、以下のとおりです。

<table>
  <tr>
    <th>名前</th>
    <th>値段</th>
  </tr>
  <tr>
    <td>りんご</td>
    <td>200円</td>
  </tr>
  <tr>
    <td>ぶどう</td>
    <td>300円</td>
  </tr>
</table>

trタグの意味

trタグは、表の行を定義するためのタグです。行ごとに設定するので、tableタグの全体にわたって使用します。

たとえば以下の表の場合、「りんご200円」「ぶどう300円」がtr要素です。

名前	値段
りんご	200円
ぶどう	300円

tdタグの意味

tdタグは、表にデータを入れるためのタグで、データの中身を入れる際に使用します。

たとえば以下の表の場合、「りんご」「ぶどう」「200円」「300円」のそれぞれがtd要素です。

名前	値段
りんご	200円
ぶどう	300円

HTMLのtableタグで枠線を作る方法

HTMLでは、tableタグで枠線を作れます。作成手順は以下のとおりです。

テーブルを使って表を作成しよう
borderタグを使って表を装飾しよう
trタグを操作して表を中央（center）寄せにしよう
border-collapseを使って枠線を一重にしよう

ここからは、それぞれ詳しく解説します。

テーブルを使って表を作成しよう

まずは、テーブルを使って表を作成しましょう。tableタグの中にthタグを用意し、tr・tdタグを配置していきます。

先述した表を作成する際のコードは、以下のとおりです。

<table>
    <tr>
        <th>名前</th>
        <th>値段</th>
    </tr>
    <tr>
        <td>りんご</td>
        <td>200円</td>
    </tr>
    <tr>
        <td>ぶどう</td>
        <td>300円</td>
    </tr>
</table>

<table>から</table>の間にtrタグで行を指定し、その中にthタグやtdタグでデータを入れるイメージです。なおこのコードでは、後述するborderタグが指定されていないため、以下の表のように枠線が表示されません。

名前	値段
りんご	200円
ぶどう	300円

borderタグを使って表を装飾しよう

borderタグを使うことで、表を装飾できます。表に枠線を表示させたい場合は、<table border>を指定しましょう。

border属性に設定した数値が、表の枠線の幅になります。border属性を指定しなければ枠線が消えてしまうため、必ず指定してください。borderタグを使ったコード例は、以下のとおりです。

<table border="1">
    <tr>
        <th>名前</th>
        <th>値段</th>
    </tr>
    <tr>
        <td>りんご</td>
        <td>200円</td>
    </tr>
    <tr>
        <td>ぶどう</td>
        <td>300円</td>
    </tr>
</table>

名前	値段
りんご	200円
ぶどう	300円

bordercolor属性を使うと枠線に色をつけられ、色は色名または16進数で指定可能です。

青色を指定する場合は「blue」または「#0000FF」と指定します。枠線を青色に指定した場合のコード例は以下のとおりです。

<table border="1" bordercolor="blue">
    <tr>
        <th>名前</th>
        <th>値段</th>
    </tr>
    <tr>
        <td>りんご</td>
        <td>200円</td>
    </tr>
    <tr>
        <td>ぶどう</td>
        <td>300円</td>
    </tr>
</table>

名前	値段
りんご	200円
ぶどう	300円

trタグを操作して表を中央(center)寄せにしよう

tr要素の初期値は左寄せで、中央寄せにする場合はtr要素に「align="center"」というコードを追加します。

<table border="1">
    <tr>
        <th>名前</th>
        <th>値段</th>
    </tr>
    <tr align="center">
        <td>りんご</td>
        <td>200円</td>
    </tr>
    <tr align="center">
        <td>ぶどう</td>
        <td>300円</td>
    </tr>
</table>

名前	値段
りんご	200円
ぶどう	300円

th要素は初期設定で中央寄せのため、「align="center"」を記述する必要はありません。

border-collapseを使って枠線を一重にしよう

枠線は初期設定で二重線になっているため、一重にします。

枠線を一重にするには、CSSファイルに「border-collapse:collapse;」を指定する必要があります。しかし、単に「border-collapse」プロパティを指定しただけでは、枠線自体は表示されません。

枠線を表示させるためには、table・th・tdタグに対してborderプロパティも設定する必要があります。下記のコードは、枠線が一重で枠線が表示されるように設定した例です。

table, th, td {
    border: 1px solid black;
    border-collapse: collapse;
}

HTMLのtableタグで枠線内の色を変える方法

HTMLのtableタグで枠線内の色を変える方法は、以下のとおりです。

表の全体の背景色を変更しよう
表の行の背景色を変更しよう
表のセルの背景色を変更しよう

こちらも枠線に色をつける場合と同様に色名または16進数で指定可能です。ここからは、それぞれ詳しく解説します。

表の全体の背景色を変更しよう

表全体の背景色を変える場合は、CSSでtableタグにCSSのスタイルを適用し、背景色を設定します。表の背景色を赤色にするコードの例は、以下のとおりです。

<style>
  table {
    border: 1px solid black;
    background-color: red;
  }
</style>

<table>
  <tr>
    <th>名前</th>
    <th>値段</th>
  </tr>
  <tr>
    <td>りんご</td>
    <td>200円</td>
  </tr>
  <tr>
    <td>ぶどう</td>
    <td>300円</td>
  </tr>
</table>

名前	値段
りんご	200円
ぶどう	300円

このコードの場合、bgcolorでredを指定しているため背景色が赤色になります。HTML5では、スタイルを直接HTMLタグに記述するのではなく、CSSを使用することが一般的です。

このコードでは、styleタグ内にCSSルールを定義しています。tableセレクタを使用して、表全体に対して背景色（background-color: red;）と、境界線（border: 1px solid black;）を適用します。

表の行の背景色を変更しよう

表の行の背景色を変更する場合は、CSSクラスまたは直接のスタイルをtrタグに適用して背景色を設定します。CSSを使用して特定の行の背景色を変更したコードの例は、以下のとおりです。

<style>
  .red-background {
    background-color: red;
  }
  .blue-background {
    background-color: blue;
  }
</style>

<table border="1">
  <tr>
    <th>名前</th>
    <th>値段</th>
  </tr>
  <tr class="red-background">
    <td>りんご</td>
    <td>200円</td>
  </tr>
  <tr class="blue-background">
    <td>ぶどう</td>
    <td>300円</td>
  </tr>
</table>

名前	値段
りんご	200円
ぶどう	300円

このコードの場合、2行目にredで3行目にblueを指定しているため、りんごの行が赤色でぶどうの行が青色になります。

このコードでは、styleタグ内に.red-backgroundと、blue-backgroundという2つのCSSクラスを定義し、それぞれのクラスに対して背景色を設定しています。trタグに2つのCSSクラスを適用することで、各行の背景色を赤色や青色に変更することが可能です。

表のセルの背景色を調整しよう

表のセルの背景色を変更する場合は、CSSクラスまたは直接のスタイルを使用します。特定のセルに背景色を適用するコードの例は、以下のとおりです。

<style>
  .green-background {
    background-color: green;
  }
  .red-background {
    background-color: red;
  }
</style>

<table border="1">
  <tr>
    <th class="green-background">名前</th>
    <th>値段</th>
  </tr>
  <tr>
    <td class="red-background">りんご</td>
    <td>200円</td>
  </tr>
  <tr>
    <td>ぶどう</td>
    <td>300円</td>
  </tr>
</table>

名前	値段
りんご	200円
ぶどう	300円

このコードの場合、「名前」をgreenで「りんご」をredに指定しているため、「名前」は緑色で「りんご」は赤色になります。

このコードでは、styleタグ内で.green-backgroundと.red-backgroundというCSSクラスを定義し、それぞれのクラスに背景色を設定しています。その後、これらのクラスを適切なthまたはtd要素に適用することで、セルの背景色を緑色や赤色に変更することが可能です。

HTMLのtableタグで表の幅と高さ、余白を調整する方法

HTMLのtableタグで表の幅と高さ、余白を調整する方法は以下のとおりです。

widthで幅を変更しよう
hightで高さを変更しよう
表の余白を整えよう

それぞれ、詳しく解説します。

widthで幅を変更しよう

tableの幅を変更する際は、width属性を使いピクセルまたはパーセントで指定します。

<table border="1">
    <tr>
        <th width="40%">名前</th>
        <th width="60%">値段</th>
    </tr>
    <tr>
        <td>りんご</td>
        <td>200円</td>
    </tr>
    <tr>
        <td>ぶどう</td>
        <td>300円</td>
    </tr>
</table>

名前	値段
りんご	200円
ぶどう	300円

このコードの場合、「名前」列の幅が表全体の40％に「値段」列の幅が表全体の60％に調整されます。

またtableの幅やセルの幅を変更する際は、CSSでも設定できます。CSSを用いてセルの幅を設定するCSSコードの例は、以下のとおりです。

<style>
  table {
    width: 100%; /* 表の幅を画面幅いっぱいに設定 */
    border-collapse: collapse;
  }
  th, td {
    border: 1px solid black;
  }
  th.name {
    width: 40%; /* '名前' 列の幅を40％に設定 */
  }
  th.price {
    width: 60%; /* '値段' 列の幅を60％に設定 */
  }
</style>

<table>
  <tr>
    <th class="name">名前</th>
    <th class="price">値段</th>
  </tr>
  <tr>
    <td>りんご</td>
    <td>200円</td>
  </tr>
  <tr>
    <td>ぶどう</td>
    <td>300円</td>
  </tr>
</table>

このコードでは、styleタグ内でセルの幅をパーセンテージで指定しています。th.nameと th.priceクラスは、それぞれ「名前」と「値段」の列に適用され、指定された幅に応じて列の幅が設定されます。

また、tableタグにwidth:100%;を設定することで、表の親要素を幅いっぱいに広げることが可能です。

heightで高さを変更しよう

height属性を使うと表の高さを変更でき、こちらもwidthのようにピクセルまたはパーセントで指定できます。

<table border="1" height="100">
    <tr>
        <th>名前</th>
        <th>値段</th>
    </tr>
    <tr>
        <td>りんご</td>
        <td>200円</td>
    </tr>
    <tr>
        <td>ぶどう</td>
        <td>300円</td>
    </tr>
</table>

名前	値段
りんご	200円
ぶどう	300円

このコードの場合、表全体の高さが100ピクセルになります。また、セルごとに高さを変更することも可能です。

<table border="1" height="100">
    <tr height="50%">
        <th>名前</th>
        <th>値段</th>
    </tr>
    <tr height="25%">
        <td>りんご</td>
        <td>200円</td>
    </tr>
    <tr height="25%">
        <td>ぶどう</td>
        <td>300円</td>
    </tr>
</table>

名前	値段
りんご	200円
ぶどう	300円

このコードでは、セルごとの高さを50％・25％・25％に指定したため、「名前」行の高さが50ピクセルで「りんご」行と「ぶどう」行の高さが25ピクセルになります。

また、CSSで表やセルの高さを変更することも可能です。table・tr・th・tdタグに直接 height属性を記述する代わりに、CSSスタイルを使用します。

CSSを使用して表全体および個々の行の高さを設定するコードの例は、以下のとおりです。

<style>
  table {
    border-collapse: collapse;
    width: 100%;
    height: 100px; /* 表全体の高さを100ピクセルに設定 */
  }
  th, td {
    border: 1px solid black;
  }
  tr:first-child {
    height: 50px; /* 最初の行の高さを50ピクセルに設定 */
  }
  tr:not(:first-child) {
    height: 25px; /* 最初の行以外の高さを25ピクセルに設定 */
  }
</style>

<table>
  <tr>
    <th>名前</th>
    <th>値段</th>
  </tr>
  <tr>
    <td>りんご</td>
    <td>200円</td>
  </tr>
  <tr>
    <td>ぶどう</td>
    <td>300円</td>
  </tr>
</table>

このコードでは、styleタグ内で表全体と個々の行の高さを設定しています。heightプロパティを使用して、表の高さと最初の行（ヘッダ行）およびそれ以外の行の高さを指定することが可能です。これにより、表全体の高さが100ピクセルで最初の行が50ピクセル、他の行が25ピクセルの高さになります。

表の余白を整えよう

表の余白を整えるには、パディング要素を使って余白を調整します。実際のコードは以下のとおりです。

<table border="1" padding="10">
    <tr>
        <th>名前</th>
        <th>値段</th>
    </tr>
    <tr>
        <td>りんご</td>
        <td>200円</td>
    </tr>
    <tr>
        <td>ぶどう</td>
        <td>300円</td>
    </tr>
</table>

名前	値段
りんご	200円
ぶどう	300円

このコードの場合、各セルに10ピクセルの余白ができます。

CSSを使用して表のセルの余白を整えることも可能です。CSSを使用して各セルにパディングを適用するコードの例は、以下のとおりです。

<style>
  table {
    border-collapse: collapse;
    width: 100%;
  }
  th, td {
    border: 1px solid black;
    padding: 10px; /* 各セルに10ピクセルのパディングを設定 */
  }
</style>

<table>
  <tr>
    <th>名前</th>
    <th>値段</th>
  </tr>
  <tr>
    <td>りんご</td>
    <td>200円</td>
  </tr>
  <tr>
    <td>ぶどう</td>
    <td>300円</td>
  </tr>
</table>

このコードでは、styleタグ内でパディングプロパティを用いて、thおよびtd要素にパディングを設定しています。border-collapse: collapse;は、セル間の境界線をまとめるために使用されます。この方法により、各セルに10ピクセルの余白を適用することが可能です。

HTMLのtableタグで表を結合・幅を調整する方法

HTMLのtableタグで表を結合・幅を調整する方法は、以下のとおりです。

表を縦方向に結合しよう
表を横方向に結合しよう
表の横幅を調整しよう

それぞれ詳しく解説します。

表を縦方向に結合しよう

表を縦方向に結合する場合は、rowspan属性を指定します。実際のコードは以下のとおりです。

<table border="1">
    <tr>
        <th>名前</th>
        <th>値段</th>
    </tr>
    <tr>
        <td>りんご</td>
        <td rowspan="2">200円</td><!-- このセルは2行にわたって結合 -->
    </tr>
    <tr>
        <td>ぶどう</td>
        <!-- ここは値段に関するtd要素は不要です -->
    </tr>
</table>

名前	値段
りんご	200円
ぶどう	200円

このコードでは、<td rowspan="2">200円</td>と指定することで、「200円」のセルが2行にわたって結合されています。そのため、trタグで次の行を作成する際、値段に関するtd要素は必要ありません。この方法により、りんごとぶどうの両方に対して「200円」という値段が適用されます。

rowspanの値に「2」を指定した場合、指定したセルは2つの行にまたがって表示されます。結合されるセルの下の行（この場合、ぶどうの行）において、結合されたセルに対応するtd要素は省略されるため、記述する必要はありません。

表を横方向に結合しよう

表を横方向に結合する場合は、colspan属性を指定します。実際のコードは以下のとおりです。

<table border="1">
    <tr>
        <th>名前</th>
        <th>りんご</th>
    　 <th>ぶどう</th>
    </tr>
    <tr>
        <td>値段</td>
        <td colspan="2">300円</td><!-- このセルは2列にわたって結合 -->
    </tr>
</table>

名前	りんご	ぶどう
値段	300円

rowspanの場合と同様に「2」を指定したため、2つのセルが結合されています。これにより、trタグで次の行を作成する際に、「りんご」や「ぶどう」の値段とそれに関連する情報を個別のセルに配置することが可能です。

結合されたセルの下にある行では、結合された列に対応する追加のtd要素を配置して、追加情報を表示できます。

表の横幅を調整しよう

表の横幅を調整する場合は、表全体の横幅をwidth属性で指定しましょう。thタグやtdタグの横幅は表全体の横幅に応じて自動で計算されるため、表全体の横幅のみを調整したい場合は指定する必要はありません。

実際のコードは以下のとおりです。

<table border="1" width="100">
    <tr>
        <th>名前</th>
        <th>値段</th>
    </tr>
    <tr>
        <td>りんご</td>
        <td>200円</td>
    </tr>
    <tr>
        <td>ぶどう</td>
        <td>300円</td>
    </tr>
</table>

名前	値段
りんご	200円
ぶどう	300円

このコードの場合、表全体の横幅が100ピクセルになります。

CSSを用いて、表の横幅を調整することもできます。CSSを使用して表全体の横幅を設定するコードの例は、以下のとおりです。

<style>
  table {
    border-collapse: collapse;
    width: 100px; /* 表全体の横幅を100ピクセルに設定 */
  }
  th, td {
    border: 1px solid black;
  }
</style>

<table>
  <tr>
    <th>名前</th>
    <th>値段</th>
  </tr>
  <tr>
    <td>りんご</td>
    <td>200円</td>
  </tr>
  <tr>
    <td>ぶどう</td>
    <td>300円</td>
  </tr>
</table>

このコードでは、styleタグ内でtableセレクタにwidthプロパティを使用して、表全体の横幅を指定しています。border-collapse: collapse;プロパティは、セル間の境界線をまとめるために使用されます。