HTMLではtableタグを使って表を作成でき、thタグやtrタグなどの要素を組み合わせることで、整った表の作成も可能です。
HTMLで表を作成する機会は多いため、tableタグの使い方を理解しておけばさまざまな場面で役立つでしょう。本記事では、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円 |
| ぶどう |
このコードでは、<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;プロパティは、セル間の境界線をまとめるために使用されます。
HTMLのtableタグは表の作成に便利なタグ
本記事では、tableタグの中身を構成するタグの意味や使い方について解説しました。HTMLにおいて、tableタグは使用頻度の高いタグのひとつです。
すでにHTMLを活用している場合はもちろんのこと、HTMLをこれから学習する方も優先的に学習することをおすすめします。
表作成だけでなくページデザインにも使用できるため、本記事をぜひtableタグの理解を深める際の参考にしてください。
