6日でできる 新HTML入門｜tableタグで作るレイアウト
表のマス目をレイアウトに活かそう。文字や画像をきれいに整列させて、情報が見やすいページ構成を作る。
HTMLのtableタグは、本来、行と列で整理されたデータを表すために使うタグです。商品一覧、料金表、スケジュール表、比較表など、縦横に並べると分かりやすい情報を表示するときに役立ちます。
一方で、tableタグの行と列の仕組みを利用すると、文字や画像をきれいに整列させることもできます。たとえば、複数の文字列を3列にそろえて並べたり、写真をギャラリーのように格子状に配置したり、セルを結合して見出し・画像・本文を組み合わせた紹介ブロックを作ったりできます。
tableタグによるレイアウトは、現在の一般的なWeb制作では、ページ全体のレイアウトにはあまり使われません。ページ全体の配置には、CSSのflexboxやgridを使うことが多いからです。しかし、表の仕組みを使った配置は、固定幅の情報整理やメールテンプレート、簡単な教材用レイアウトを理解するうえで役立ちます。
ここでは、table、tr、tdを使って文字を整列させる方法、画像をグリッド状に並べる方法、そしてcolspanを使ってセルを結合したレイアウトを作る方法を、サンプルHTMLとともに確認していきます。
素材のダウンロード
以下のリンクから画像素材をダウンロードできます。
※ウイルス対策ソフト ESET でチェックしておりますが、ダウンロードは自己責任でお願いします。
| notebook.png | pen.png | eraser.png | marker.png | ruler.png | clip.png | aoba-park.png |
|---|---|---|---|---|---|---|
 |  |  |  |  |  |  |
tableタグをレイアウトに使う基本
tableタグは、表全体を作るタグです。その中にtrタグで行を作り、tdタグでセルを作ります。セルはマス目のように並ぶため、文字や画像を規則正しく配置しやすい特徴があります。
tableレイアウトで使う主なタグ
| タグ | 役割 |
|---|---|
| table | 表全体を囲む |
| tr | 表の行を作る |
| td | 行の中にセルを作る |
| img | セルの中に画像を表示する |
tableでレイアウトを作るときは、セルの幅、高さ、余白、文字揃えをCSSで調整します。枠線を表示しなければ、表のマス目を見せずに、文字や画像だけを整列させることもできます。
tableレイアウトでよく使うCSS
| CSS | 役割 |
|---|---|
| border-collapse | セルの境界の扱いを指定する |
| width | 表やセルの横幅を指定する |
| height | セルの高さを指定する |
| padding | セル内の余白を指定する |
| text-align | 横方向の揃えを指定する |
| vertical-align | 縦方向の揃えを指定する |
| margin | 表の外側の余白や中央配置を指定する |
tableをレイアウトに使うと、縦横の位置をそろえやすくなります。特に、同じ幅のカラムを作りたい場合や、写真とキャプションを規則正しく並べたい場合に分かりやすい方法です。
図1：table、tr、tdで文字を整列させる
この図から分かること
table、tr、tdを使うと、文字を縦横にそろえて配置できます。枠線を表示しなくても、セルの幅や余白を指定することで、複数のカラムを整った形で並べられます。vertical-alignを使うと、セル内の内容を上揃え、中央揃え、下揃えに調整できます。
表を使って文字を整列させる
最初に、tableタグを使って文字を3列に並べる例を見ていきましょう。ここでは、Web制作の学習項目を3つのカラムに分けて配置します。
ファイル名： Lesson24-1.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>Web制作の学習リスト</title>
<style>
body {
font-family: sans-serif;
line-height: 1.7;
}
table {
border-collapse: collapse;
margin: 20px auto;
}
td {
width: 150px;
padding-left: 18px;
vertical-align: top;
line-height: 1.6;
}
</style>
</head>
<body>
<h1>Web制作の学習リスト</h1>
<table>
<tr>
<td>
HTMLの基本<br>
見出し<br>
段落<br>
リンク<br>
画像
</td>
<td>
CSSの基本<br>
文字色<br>
背景色<br>
余白<br>
枠線
</td>
<td>
表の作成<br>
セルの装飾<br>
画像配置<br>
セル結合<br>
レイアウト
</td>
</tr>
</table>
</body>
</html>ブラウザの表示例
このHTMLでは、1つのtrタグの中に3つのtdタグを入れています。つまり、1行3列の表です。それぞれのtdの中に、学習項目を改行しながら並べています。
tableにはborder-collapse: collapse;を指定していますが、tdにはborderを指定していません。そのため、表の枠線は表示されません。見た目としては、3つの文字カラムが横に並んでいるように見えます。
tdにはwidth: 150px;を指定しているため、各カラムの幅がそろいます。padding-left: 18px;は、各セルの左側に余白を作る指定です。文字がカラムの端に近づきすぎず、読みやすくなります。
vertical-align: top;は、セル内の内容を上揃えにする指定です。もし各セルの中の行数が違っても、先頭位置がそろって見えるため、リストとして読みやすくなります。
このように、tableタグを使うと、複雑なCSSを使わなくても、文字をカラム状に整列させることができます。
枠線なしの表を使うときの考え方
tableタグを使うと、セルの中身を縦横にそろえやすくなります。ただし、枠線を表示しない場合でも、HTMLとしては表です。そのため、内容が本当に表形式の情報なのかを考えて使うことが大切です。
たとえば、3列の学習リストやメニュー一覧のように、情報を列に分けて整理する目的ならtableを使っても理解しやすい場合があります。一方、ページ全体のヘッダー、本文、サイドバー、フッターのような大きなレイアウトは、現在ではCSSレイアウトを使うほうが自然です。
枠線なしtableが向いている例
| 用途 | 理由 |
|---|---|
| 簡単な3列リスト | セル幅をそろえやすい |
| メール本文の固定レイアウト | 表による配置が安定しやすい |
| 写真と説明の簡単な整列 | 画像と文字を行列で整理できる |
| 学習用の配置練習 | 行と列の考え方を理解しやすい |
tableタグは便利ですが、すべてのレイアウトをtableで作る必要はありません。表として整理したい情報や、固定的に縦横をそろえたい場面で使うと分かりやすくなります。
表を使って写真を整列させる
写真をギャラリーのように並べたいときにも、tableタグを使えます。セルの幅と高さをそろえ、text-alignやvertical-alignを指定すると、画像の配置を整えやすくなります。
次の例では、3列×2段の文房具ギャラリーを作ります。画像を並べる行と、キャプションを表示する行を分けています。
ファイル名： Lesson24-2.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>文房具写真ギャラリー</title>
<style>
body {
font-family: sans-serif;
background-color: #F2F2F2;
color: #333333;
}
h1 {
text-align: center;
}
table {
border-collapse: collapse;
margin: 24px auto;
}
td.image-cell {
width: 210px;
height: 190px;
text-align: center;
vertical-align: bottom;
background-color: #FFFFFF;
padding: 10px;
}
td.caption-cell {
text-align: center;
background-color: #FFFFFF;
padding: 0 10px 22px;
font-weight: bold;
}
img.stationery {
width: 170px;
height: auto;
border-radius: 8px;
}
</style>
</head>
<body>
<h1>文房具写真ギャラリー</h1>
<table>
<tr>
<td class="image-cell"><img src="notebook.png" alt="ノート" class="stationery"></td>
<td class="image-cell"><img src="pen.png" alt="ペン" class="stationery"></td>
<td class="image-cell"><img src="eraser.png" alt="消しゴム" class="stationery"></td>
</tr>
<tr>
<td class="caption-cell">ノート</td>
<td class="caption-cell">ペン</td>
<td class="caption-cell">消しゴム</td>
</tr>
<tr>
<td class="image-cell"><img src="marker.png" alt="マーカー" class="stationery"></td>
<td class="image-cell"><img src="ruler.png" alt="定規" class="stationery"></td>
<td class="image-cell"><img src="clip.png" alt="クリップ" class="stationery"></td>
</tr>
<tr>
<td class="caption-cell">マーカー</td>
<td class="caption-cell">定規</td>
<td class="caption-cell">クリップ</td>
</tr>
</table>
</body>
</html>ブラウザの表示例
このHTMLでは、画像を入れるセルにimage-cell、キャプションを入れるセルにcaption-cellというclassを付けています。画像用セルと文字用セルを分けることで、それぞれに合ったCSSを指定できます。
td.image-cellには、widthとheightを指定しています。セルの大きさをそろえることで、画像の並びが整って見えます。text-align: center;で画像を横方向の中央に配置し、vertical-align: bottom;で画像をセルの下側に寄せています。
td.caption-cellには、text-align: center;とfont-weight: bold;を指定しています。画像の下にキャプションが中央揃えで表示されるため、ギャラリーとして見やすくなります。
img.stationeryにはwidthを指定し、画像サイズをそろえています。画像が大きすぎるとセルが広がり、レイアウトが崩れやすくなるため、表の中に画像を入れるときは画像サイズをCSSで整えることが大切です。
図2：tableで画像ギャラリーを格子状に並べる
この図から分かること
tableタグを使うと、画像を格子状にそろえて配置できます。セルに幅と高さを指定し、text-alignやvertical-alignで画像の位置を調整すると、写真ギャラリーのような見た目を作れます。画像セルとキャプションセルを分けると、それぞれに合ったデザインを指定しやすくなります。
写真ギャラリーで意識したいCSS
画像を表に並べるときは、セルと画像の両方を調整することが大切です。セルの大きさだけをそろえても、画像サイズがばらばらだと見た目が整いません。反対に、画像サイズだけをそろえても、セル内の余白や位置がばらつくと落ち着かない印象になります。
画像整列で使いやすいCSS
| CSS | 役割 |
|---|---|
| width | セルや画像の横幅をそろえる |
| height | セルの高さをそろえる |
| text-align | 画像やキャプションを横方向に揃える |
| vertical-align | セル内の内容を縦方向に揃える |
| padding | セル内の余白を作る |
| background-color | セルの背景色を指定する |
写真ギャラリーでは、画像の下にキャプションを置くことがよくあります。今回のように、画像行とキャプション行を分けると、画像と文字の位置をそれぞれ調整できます。
また、画像のalt属性も忘れずに指定します。画像が表示されない場合や、音声読み上げを使う環境でも内容が伝わりやすくなります。
セル結合で紹介ブロックを作る
tableタグでは、セルを結合して複雑な配置を作ることもできます。横方向にセルを結合するにはcolspanを使います。縦方向にセルを結合するにはrowspanを使います。
ここでは、colspanを使って見出しセルを横に広げた紹介ブロックを作ります。観光スポットの名前、カテゴリ、画像、説明文を1つの表の中に配置します。
セル結合で使う主な属性
| 属性 | 役割 |
|---|---|
| colspan | 横方向に複数のセルを結合する |
| rowspan | 縦方向に複数のセルを結合する |
colspanを使うと、複数列にまたがる大きな見出しを作れます。rowspanを使うと、複数行にまたがるカテゴリ欄やサイド欄を作れます。
tableで観光スポット紹介レイアウトを作る
次の例では、2行3列の表を使って、観光スポット紹介のレイアウトを作ります。上段ではスポット名のセルを2列分結合し、右側にカテゴリを表示します。下段では、画像、本文、タグ情報を並べています。
ファイル名： Lesson24-3.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>観光スポット紹介</title>
<style>
body {
font-family: sans-serif;
background-color: #FAFAFA;
line-height: 1.7;
}
h1 {
text-align: center;
}
table.spot-layout {
border-collapse: collapse;
width: 640px;
margin: 24px auto;
}
td.header {
background-color: #2F5D50;
color: #FFFFFF;
padding: 12px 16px;
font-size: 24px;
font-weight: bold;
}
td.category {
background-color: #2F5D50;
color: #FFFFFF;
padding: 12px 16px;
width: 90px;
text-align: right;
font-weight: bold;
}
td.image {
background-color: #EEF2D8;
padding: 12px;
vertical-align: top;
width: 220px;
}
td.text {
background-color: #EEF2D8;
padding: 12px;
width: 300px;
vertical-align: top;
font-size: 14px;
}
td.tag {
background-color: #DCE8C8;
color: #2F5D50;
padding: 12px;
width: 90px;
text-align: center;
vertical-align: top;
font-weight: bold;
}
img.spot-photo {
width: 210px;
height: auto;
border-radius: 8px;
}
</style>
</head>
<body>
<h1>観光スポット紹介</h1>
<table class="spot-layout">
<tr>
<td colspan="2" class="header">青葉の丘公園</td>
<td class="category">公園</td>
</tr>
<tr>
<td class="image">
<img src="aoba-park.png" alt="青葉の丘公園の風景" class="spot-photo">
</td>
<td class="text">
青葉の丘公園は、ゆるやかな坂道と広い芝生広場がある自然豊かな公園です。春には花壇の花が咲き、夏には木陰で休憩しながら散策を楽しめます。<br>
所在地：神奈川県青葉市みどり町<br>
アクセス：青葉駅から徒歩約12分
</td>
<td class="tag">散策<br>家族向け</td>
</tr>
</table>
</body>
</html>ブラウザの表示例
このHTMLでは、tableにspot-layoutというclassを付けています。通常のデータ表ではなく、観光スポット紹介用のレイアウトとして使っています。
1行目では、td colspan="2" class="header"を指定しています。このセルは横方向に2列分広がり、スポット名を大きく表示します。右側のtd.categoryには、スポットの種類である公園を表示しています。
2行目では、左に画像、中央に本文、右にタグ情報を配置しています。それぞれのtdにimage、text、tagというclassを付けて、背景色、余白、幅、縦揃えを指定しています。
td.imageには画像を入れています。img.spot-photoにwidthとborder-radiusを指定し、画像のサイズと角丸を調整しています。td.textには説明文を入れ、td.tagには短いキーワードを入れています。
このように、tableタグとcolspanを組み合わせると、見出しが横に広がるカード型のレイアウトを作れます。
図3：colspanを使って紹介ブロックを作る
ブラウザの表示例
この図から分かること
colspanを使うと、複数のセルを横方向に結合できます。見出しを広く表示したり、画像、本文、カテゴリを組み合わせた紹介ブロックを作ったりできます。セルごとにclassを付けると、背景色や余白、文字揃えを細かく調整できます。
tableレイアウトの便利な点
tableタグを使ったレイアウトには、縦横の位置をそろえやすいという特徴があります。セルの幅や高さを指定すれば、複数の要素を規則的に配置できます。
tableレイアウトで便利なこと
| できること | 説明 |
|---|---|
| 文字を列ごとに並べる | 複数のリストを均等な幅で配置できる |
| 画像を格子状に並べる | 写真ギャラリーのような見た目を作れる |
| セルを結合できる | colspanやrowspanで複雑な配置を作れる |
| セルごとにclassを付けられる | 背景色や余白を個別に調整できる |
| 縦方向の揃えを指定しやすい | vertical-alignで上揃えや中央揃えができる |
特に、表の中で画像と文章をそろえたい場合や、固定幅の情報ブロックを作りたい場合は、tableの仕組みが分かりやすく感じられることがあります。
tableレイアウトを使うときの注意点
tableタグは、もともと表形式のデータを表すためのタグです。そのため、Webページ全体のレイアウトをtableだけで作る方法は、現在のWeb制作ではあまり推奨されません。
ページ全体のレイアウトを作る場合は、div、section、header、main、footerなどのタグと、CSSのflexboxやgridを使うほうが意味構造を保ちやすく、レスポンシブ対応もしやすくなります。
ただし、tableによるレイアウトを理解しておくことには意味があります。古いWebページやHTMLメールでは、tableを使った配置が残っていることがあります。また、表のセル幅や結合の考え方を学ぶことで、HTMLテーブルへの理解も深まります。
使い分けの目安
| 場面 | 適した方法 |
|---|---|
| 料金表や比較表 | table |
| スケジュール表 | table |
| 写真を固定幅で格子状に並べる簡単な例 | tableでも可能 |
| ページ全体のレイアウト | CSSのflexboxやgrid |
| レスポンシブなカード一覧 | CSSのflexboxやgrid |
| HTMLメールの固定レイアウト | tableが使われることがある |
tableタグは、情報が行と列で整理できるときに使うのが基本です。レイアウト目的で使う場合も、学習用や固定的な配置に向いていると理解しておくとよいでしょう。
使用タグとCSSの整理
この学習で登場した主なタグとCSSを整理します。
| 種類 | 名前 | 用途 |
|---|---|---|
| タグ | table | 表全体を作る |
| タグ | tr | 表の行を作る |
| タグ | td | 表のセルを作る |
| タグ | img | セルの中に画像を表示する |
| 属性 | colspan | セルを横方向に結合する |
| CSS | border-collapse | セルの境界の扱いを指定する |
| CSS | width | 表、セル、画像の横幅を指定する |
| CSS | height | セルの高さを指定する |
| CSS | padding | セル内の余白を指定する |
| CSS | text-align | セル内の横方向の位置を指定する |
| CSS | vertical-align | セル内の縦方向の位置を指定する |
| CSS | background-color | セルの背景色を指定する |
| CSS | margin | 表の外側の余白や中央配置を指定する |
tableは全体、trは行、tdはセルを作るために使います。tdの中には、文字だけでなくimgタグも入れられます。colspanを使うと、横方向にセルを結合できます。
CSSでは、セルの幅や高さ、余白、揃え、背景色を指定することで、表をレイアウト用の枠組みとして使いやすくできます。特にtext-alignとvertical-alignは、セル内の内容の位置を整えるときに役立ちます。
tableタグでレイアウトを作るときに意識したいこと
tableタグを使うと、文字や画像を縦横にきれいに整列できます。枠線を表示しなければ、表らしさを見せずにカラム状の配置を作ることもできます。画像ギャラリーのように、同じサイズのセルを並べる表現にも向いています。
セル結合を使えば、単純な行列だけでなく、見出しを広く取った紹介ブロックのような配置も作れます。セルごとにclassを付けることで、見出し、画像、本文、カテゴリなどを個別に装飾できます。
一方で、tableタグは本来データ表のためのタグです。ページ全体のレイアウトや、画面幅に応じて柔軟に変化するデザインには、flexboxやgridを使うほうが適しています。tableレイアウトは、表の仕組みを活かした固定的な整列や、HTMLメール、学習用の配置例として理解すると扱いやすくなります。
tableタグをただのデータ表示だけでなく、配置の考え方として学ぶことで、行、列、セル、結合、余白、揃えの関係がより分かりやすくなります。