HTMLのテーブルは、データを整理して見やすく表示するために欠かせない要素です。
テーブルの枠線は、tableタグのborder属性に1を指定すると表示、0を指定すると非表示になり、簡単に表示の切り替えができます。
本記事では、基本設定に加えて、枠線をさらにカスタマイズする方法や注意点も丁寧に解説します。
基本的なHTMLテーブルの枠線の設定方法
まずは、HTMLでテーブルを作成するコードを確認しましょう。
コピー<table>
<thead>
<tr>
<th>商品名</th>
<th>価格</th>
<th>在庫数</th>
</tr>
</thead>
<tbody>
<tr>
<td>リンゴ</td>
<td>100円</td>
<td>50個</td>
</tr>
<tr>
<td>バナナ</td>
<td>80円</td>
<td>30個</td>
</tr>
<tr>
<td>オレンジ</td>
<td>120円</td>
<td>20個</td>
</tr>
</tbody>
</table>テーブルの枠線は、ブラウザによってデフォルトで表示される場合があります。
テーブルのコーディングは、全体をtableタグで囲み、行をtrタグ、見出しをthタグ、セルをtdタグで記述します。
テーブル作成に使用する主なタグを以下の表にまとめました。
| table | テーブル全体を囲むタグ。 |
| tr | Table Rowの略。行全体を囲むタグ。 |
| td | Table Dataの略。セルを定義するタグ。 |
| th | Table Headerの略。見出しセルを定義するタグ。 |
| tbody | テーブルをグループ化するタグ（省略可） |
| thead | テーブルのヘッダー部分をグループ化するタグ |
HTMLテーブルの枠線をカスタマイズする方法
HTMLテーブルの枠線をカスタマイズする方法として、以下の3つを紹介します。
- 枠線の表示と非表示
- 枠線を二本線から一本線に変更
- 枠線の色変更
それぞれ順番にみてみましょう。
枠線の表示と非表示
コピー
<table border="1">
<thead>
<tr>
<th>商品名</th>
<th>価格</th>
<th>在庫数</th>
</tr>
</thead>
<tbody>
<tr>
<td>リンゴ</td>
<td>100円</td>
<td>50個</td>
</tr>
<tr>
<td>バナナ</td>
<td>80円</td>
<td>30個</td>
</tr>
<tr>
<td>オレンジ</td>
<td>120円</td>
<td>20個</td>
</tr>
</tbody>
</table>
枠線を表示するには、tableタグのborder属性に1、非表示の場合は0を指定します。
上記では、border属性に1を設定して枠線を表示させています。
border属性はtableに枠線を付けるためのタグで、1以上を指定すると枠線の太さ指定が可能です。
枠線を二本線から一本線に変更
コピー
<table border="1" style="border-collapse: collapse">
<thead>
<tr>
<th>商品名</th>
<th>価格</th>
<th>在庫数</th>
</tr>
</thead>
<tbody>
<tr>
<td>リンゴ</td>
<td>100円</td>
<td>50個</td>
</tr>
<tr>
<td>バナナ</td>
<td>80円</td>
<td>30個</td>
</tr>
<tr>
<td>オレンジ</td>
<td>120円</td>
<td>20個</td>
</tr>
</tbody>
</table>
二重線を一本線にするには、style属性でborder-collapse: collapseを指定します。
border属性に1を指定すると、テーブルのそれぞれのセルに枠線が描写されて二重線として表示されます。
一本線にしたいときは、style属性を使用するとよいでしょう。
セルの間隔をゼロにして隙間をなくし、枠線を一本線に見せるためにborder-collapseプロパティでcollapseを指定すると解決します。
枠線の色変更
コピー<table border="1" style="border-collapse: collapse; border-color: red">
<thead>
<tr>
<th>商品名</th>
<th>価格</th>
<th>在庫数</th>
</tr>
</thead>
<tbody>
<tr>
<td>リンゴ</td>
<td>100円</td>
<td>50個</td>
</tr>
<tr>
<td>バナナ</td>
<td>80円</td>
<td>30個</td>
</tr>
<tr>
<td>オレンジ</td>
<td>120円</td>
<td>20個</td>
</tr>
</tbody>
</table>枠線の色を変更するには、style属性でborder-colorプロパティを指定します。
ここでは、redを指定して赤枠に変更しています。
HTMLテーブルの枠線が表示されない原因と対策
HTMLテーブルの枠線が表示されない原因を3つ紹介します。
- border属性の指定ミス
- border-collapseの指定ミス
- HTMLの構造ミス
それぞれ順番に解説します。
border属性の指定ミス
tableタグ全体にborder属性を指定していない場合、テーブルの枠線が表示されない原因となります。
次の2つを見てください。
◯ <table border=”1″>
✕ <thead border=”1″>
たとえばtableタグではなく、他のタグにborder属性を間違えて指定してしまうと正しく表示されません。
上手く表示されないときは、tableタグにborder属性を指定しているか確認しましょう。
border-collapseの指定ミス
border-collapseの指定が不適切なとき、枠線が見えにくくなります。
たとえば、tableタグの枠線を二重線から一本線にするときにstyle属性でborder-collapseを使用したとします。
このときborder-collapse: collapse;ではなく、border-collapse: separate;が設定されていると期待通りに表示されません。
セルの間にスペースができてしまい、枠線が見えにくくなるからです。
枠線を確実に表示するには、border-collapse: collapse;を設定し、枠線を明示的に指定することが重要です。
HTMLの構造ミス
tableの構造が守られていないとき、正しくテーブルが表示されません。
たとえば、次のようなコードでテーブルを作成したと過程します。
一見、正しくコードが書けているように見えますが、trタグとthタグ、trタグとtrタグの入れ子構造が逆になっています。
HTMLの構造ミスは入れ子だけでなく、thとtdのタグの混在やセルの過不足などが原因の場合もあります。
これらは初心者によく起こるミスです。テーブルが正しく表示されないときは、HTMLの構造に間違いはないか、チェックしてみてください。
まとめ：HTMLテーブルの枠線をマスターしよう
HTMLテーブルの枠線は、初心者でも簡単に実装できます。
たとえばtableタグでborder属性に1を指定すると、テーブルに枠線を表示できます。
ただし、HTMLだけでは細かいデザインの実現が難しいため、複雑な装飾を加えたい場合はCSSの活用がおすすめです。
デザイン性が高いコーディングをしたい人や実務で役立つスキルが身につけたい人は、デイトラWeb制作コースで学ぶのがおすすめです。
現役コーダーから添削課題を受けられ、アップデートされ続けるカリキュラムで最先端のコーディングテクニックが習得できる環境が整っています。
未経験からコーディングを学ぶならデイトラWeb制作コースがおすすめ！
デイトラWeb制作コースは、実務レベルの本格スキルを学び、Web制作を仕事にしたい方におすすめのコースです。
HTML/CSSやjavaScriptの言語の基本はもちろん、デザインカンプからのコーディング、WordPressのオリジナルテーマ作成までカリキュラムに含まれています。
さらに、中級・上級の最終課題はメンターによる課題レビューがあります。現場目線の品質チェックが受けられるため、大幅なスキルアップが期待できるでしょう。
Web制作のスキルを身につけたい方は、ぜひデイトラWeb制作コースをチェックしてみてください！
