HTMLテーブルの基本的なタグは知っているけれど、実際にコーディングするとレイアウトが崩れてしまう、そんな経験はありませんか。
料金表やスペック表の作成にHTMLテーブルは便利ですが、思った通りに表示させるのは見た目以上に難しいですよね。
本記事では、テーブル崩れのよくある原因とその具体的な対策を初心者の方にも分かりやすく解説します。
Web制作の現場で自信を持ってテーブルを実装できるようになりたい方は、ぜひ参考にしてください。
HTMLテーブルの基本
HTMLテーブルの基本として、以下の項目について解説します。
- 基本タグの役割
- HTMLテーブルが崩れるよくある原因と対策
- HTMLテーブルのシンプルなコード例
それぞれ順番に見ていきましょう。
基本タグの役割
HTMLでテーブルを作成するために必要な主要タグの役割を以下の表にまとめました。
| タグ名 | 役割 |
| <table> | テーブル全体を囲む |
| <tr> | テーブルの行（横の並び）を表す |
| <th> | テーブルの見出しセルを表す |
| <td> | 実際のデータ（数値、テキストなど）が入るセル |
これらのタグを正しく組み合わせることで、崩れないテーブルを実装できます。
まずはこの基本的な構造をしっかりマスターしましょう。
HTMLテーブルが崩れるよくある原因と対策
テーブルが崩れる際のよくある原因と対策を、以下の表にまとめました。
| 原因 | 対策 |
| タグの閉じ忘れ | ・エディタの活用（自動補完、エラーチェック） ・インデント（字下げ）を徹底 |
| タグの数の不一致 | それぞれのタグの数を数え、全ての行で一致しているか確認 |
| タグの入れ子構造のミス | ・基本構造を意識 ・インデント（字下げ）を徹底 ・検証ツールでエラーがないか確認 |
これらの原因は単独で起こることもありますが、複合的に発生していることも少なくありません。
焦らずに、一つひとつの要素と適用されているスタイルを確認しながら原因を特定し、修正していきましょう。
HTMLテーブルのシンプルなコード例
コピー<table>
<tr>
<th>商品名</th>
<th>価格</th>
</tr>
<tr>
<td>りんご</td>
<td>100円</td>
</tr>
<tr>
<td>みかん</td>
<td>80円</td>
</tr>
</table>HTMLテーブルは、<table>で全体の枠組みを示し、その中で<tr>タグが横方向の行を表します。
1行目の<tr>には<th>タグを使うことで「商品名」と「価格」の見出しを定義し、内容がひと目で分かるようにしています。
2行目以降の<tr>には<td>タグを使い、それぞれ見出しに対応するデータとして「りんご」「100円」「みかん」「80円」を配置。
<th>は見出しセルとしてブラウザのデフォルトスタイルで太字や中央寄せになることが多く、<td>は通常のデータセルとして表示されます。
行と列の数を揃えないと表示が崩れるため、開閉タグを正しく対応させて表全体の構造を明確に保ちましょう。
HTMLテーブルをCSSで整える
ここでは、HTMLテーブルをCSSで整える主な方法を紹介します。
- 枠線（border）
- 幅（width）
- 高さ（height）
- 文字揃え（text-align）
- 余白（padding）
それぞれ調整したいポイントからチェックしてみてください。
▶HTMLテーブルをCSSで整えたサンプルコードを見たい方はこちら
枠線（border）
コピーtable {
border: 1px solid #333;/* テーブル全体に枠線 */
border-collapse: collapse; /* セル間の線を重ねて表示 */
}
th,
td {
border: 1px solid #333;/* 見出しセルとデータセルに枠線 */
}テーブルの枠線は、見た目を整えるだけでなく、情報を区切って見やすくする重要な要素です。
CSSのborderプロパティを使うと、テーブル全体、見出しセル（th）、データセル（td）に、それぞれ異なる枠線を設定できます。
上記では、border: 1px solid black; で「太さ1px、実線、カラーコード#333」の枠線を指定しています。
枠線の太さや種類、色を変えることで、さまざまな見た目の枠線の実装が可能です。
HTMLテーブルでborderを使用すると、デフォルトでは二重線で表示される場合があります。
二重線で表示されないように、ここではborder-collapse: collapse;を指定して線を重ねて、一本線に見えるように調整しています。
幅（width）
テーブルの幅は、widthプロパティで指定します。
たとえば、500pxのようにピクセルで以下のように固定すると、どの画面でも表全体が同じ幅になります。
コピーtable {
width: 500px; /* テーブルの幅を500ピクセルに固定 */
}ピクセルで固定すると、レイアウトは安定しますが、画面が狭いときにテーブルがはみ出る場合があります。
そこで、幅をパーセンテージで指定して親要素に合わせると、画面サイズに応じて自動調整されます。
コピーtable {
width: 100%; /* 親要素の幅に合わせてテーブルの幅を自動調整 */
}ただし、内容によっては広がりすぎたり狭くなりすぎたりする場合があります。
そこで、最大幅と最小幅を組み合わせて調整すると、どんな画面でも見やすいテーブルを実装できます。
コピーtable {
width: 100%;
max-width: 800px; /* 最大幅を制限 */
min-width: 300px; /* 最小幅を確保 */
}高さ（height）
テーブルのセルの高さはheightで調整できますが、幅と同様に内容に合わせて自動調整されるように実装します。
セルの高さを固定すると、テキストなどの内容がはみ出したり、逆に余白が大きくなりすぎたりして、レイアウトが崩れる可能性があるからです。
これは表全体の高さについても同じことがいえます。
たとえば、デザインカンプ通りの高さに厳密に合わせたいときは<table> を <div> で囲み、その <div> に対して高さを指定します。
コピー.table-container {
height: 400px; /* カンプで指定された高さ */
overflow-y: auto; /* 縦にはみ出たらスクロール */
}高さを固定してはみ出した部分をスクロールすると、デザイン通りの高さに固定できたり、ページ全体のレイアウトが崩れないといったメリットがあります。
最低限の高さが欲しいときは、囲んだ <div> にmin-height を指定します。
コピー.table-container {
min-height: 400px; /* 最低限この高さを確保 */
}min-heightで指定すると、テーブルの内容は隠れずに必要に応じてdivごと伸びて表示されます。
デザインカンプの意図に合わせて、コーディングするようにしましょう。
文字揃え（text-align）
セル内のテキストは、text-alignプロパティで水平方向に調整します。
たとえば、見出しのセルを中央に揃え、データセルを右揃えにする場合は以下のように指定します。
コピーth {
text-align: center; /* 見出しセルを中央揃え */
}
td {
text-align: right; /* データセルを右揃え */
}上記で指定した以外にも、left（左寄せ）の指定も可能です。
表内の数値データは、右揃えにすると桁が揃い、比較しやすくなります。
text-alignはセル内のテキストそのものの配置を決めるプロパティで、paddingで調整する余白とは異なるため、注意しましょう。
余白（padding）
セル内の余白は、paddingプロパティで調整しましょう。
余白を適切に設定することで、テーブル内の文字や要素間にゆとりが生まれ、読みやすさが向上します。
たとえば、セルの上下左右に10pxの余白を指定すると、以下のように見やすくなります。
コピーth, td {
padding: 10px; /* セルの上下左右に10pxの余白を設定 */
}以下のように、上下左右の余白を個別に設定することも可能です。
コピーth, td {
padding-top: 15px; /* 上側の余白を15pxに設定 */
padding-right: 20px; /* 右側の余白を20pxに設定 */
padding-bottom: 10px; /* 下側の余白を10pxに設定 */
padding-left: 5px; /* 左側の余白を5pxに設定 */
}padding-top、padding-right、padding-bottom、padding-leftを使って、個別に余白を設定できます。
paddingで指定する余白はセル内の余白であり、テキストの配置を決めるものではないため、ごちゃ混ぜにならないように気をつけましょう。
HTMLテーブルのセル結合
HTMLテーブルでは、複数のセルを結合して、1つの大きなセルとして表示できます。
ここでは横に結合する方法（colspan）と縦に結合する方法（rowspan）をそれぞれ紹介します。
横結合（colspan）
横方向にセルを結合するにはcolspan属性を使用します。
<th>か<td>タグに colspan=”結合したい列の数” を指定します。
コピー<table>
<tr>
<th colspan="2">商品情報</th>
</tr>
<tr>
<td>商品名</td>
<td>価格</td>
</tr>
<tr>
<td>りんご</td>
<td>100円</td>
</tr>
<tr>
<td>みかん</td>
<td>80円</td>
</tr>
</table>1行目の見出しセル<th>にcolspan=”2″ を指定しました。
セルを横に2つの列を結合して、その分のスペースを使うという意味になります。
指定すると「商品情報」セルは横幅が広がり、下の行の「商品名」列と「価格」列のちょうど真上にくるような、大きな見出しセルとして表示されます。
colspanを使うときは、結合した分のセルを同じ行<tr>の中から削除することが重要です。
今回はcolspan=”2″ で2列分の場所を使ったため、もし「商品情報」セルの隣に別の <th> が書かれていると、テーブルの列数が合わなくなり、レイアウトが崩れてしまいます。
セルを結合するときは、結合する数を間違えないようにしましょう。
縦結合（rowspan）
縦方向に結合するにはrowspan属性を使用します。
<th>か<td> タグにrowspan=”結合したい行の数” を指定します。
コピー<table>
<thead>
<tr>
<th>分類</th>
<th>商品名</th>
<th>価格</th>
</tr>
</thead>
<tbody>
<tr>
<td rowspan="2">果物</td>
<td>りんご</td>
<td>100円</td>
</tr>
<tr>
<td>みかん</td>
<td>80円</td>
</tr>
</tbody>
</table>「りんご」の行にある最初の<td>タグ（「果物」セル）にrowspan=”2″ を指定しました。
rowspanを指定することで、「果物」セルは下に伸びて、縦方向に 2行分の高さを持つように結合されます。
縦に結合した場合、結合によって場所がなくなった下の行（ここでは「みかん」の行）からは、対応する <td> タグ（今回は先頭のセル）を必ず削除してください。
削除を忘れると、列がずれて表が崩れる原因になります。
colspanと同様に、rowspanで指定する結合する行の数も間違えないように注意しましょう。
HTMLテーブルのセル結合の注意点
セル結合（colspan, rowspan）を使うと複雑な表レイアウトも可能になりますが、利用する際には以下の点に注意しましょう。
- HTML構造の複雑化
- レスポンシビリティの低下
- アクセシビリティの問題
上記のデメリットを考慮し、セル結合を使う前には、本当にその結合が必要か検討する必要があります。
単なる見た目の調整であれば、CSSの工夫で代替できないか考えます。
セル結合を使う場合でも、過度な使用は避け、必要最低限に留めることが重要です。
また、テーブル構造を明確にするために<thead>（見出し部分）、<tbody>（データ本体部分）、<tfoot>（フッター部分）タグで適切にグループ化することもおすすめです。
コードの可読性を高め、アクセシビリティの向上にもつながります。
セル結合は強力な機能ですが、リスクも伴います。
使用するときは慎重に判断し、本当に必要かどうか、テーブルの適切な構造化を心がけましょう。
まとめ：HTMLテーブルを構造化しよう
崩れないHTMLテーブルを作るには、基本タグの役割を理解し、タグの閉じ忘れや行ごとのセル数の不一致といった、よくあるミスへの対策が重要です。
CSSでの見栄え調整に加え、theadやtbody、tfootなどでの構造化を意識する必要があります。
特にセル結合はアクセシビリティへの影響も考慮し、その必要性を慎重に見極める視点が求められます。
基礎知識だけでなく、こうした実践的な判断力や応用力をしっかり学ぶには、充実したカリキュラムのデイトラWeb制作コースがおすすめです。
未経験からコーディングを学ぶならデイトラWeb制作コースがおすすめ！
デイトラWeb制作コースは、実務レベルの本格スキルを学び、Web制作を仕事にしたい方におすすめのコースです。
HTML/CSSやjavaScriptの言語の基本はもちろん、デザインカンプからのコーディング、WordPressのオリジナルテーマ作成までカリキュラムに含まれています。
さらに、中級・上級の最終課題はメンターによる課題レビューがあります。現場目線の品質チェックが受けられるため、大幅なスキルアップが期待できるでしょう。
Web制作のスキルを身につけたい方は、ぜひデイトラWeb制作コースをチェックしてみてください！
