CSSでテーブル(table)の枠線(border)を消す方法【全体+特定の枠線】

HTMLでテーブルを作成する場合、重要になるのは中身だけではなく、枠線などの外見も大事!今回はHTMLでのテーブル作成時、CSSによる枠線の表示・非表示について解説していきます。

HTMLで作成したテーブルの枠線を自由に設定したい!

CSSを使用して自由自在にテーブルの枠線を設定できるようになりましょう!

【前置き】HTMLでテーブルを作成する方法

テーブル作成サンプルコード

実行例①:枠線なしのテーブル

まずは基本的なテーブルの作成方法を見ていきましょう。実はテーブルを作成した時点では枠線は表示されていません。別途CSSや属性で指定する必要があるのです。

よってここでは、後々枠線を表示するCSSを書き込むため、headタグ内にCSSを書き込むためのstyleタグを設置してあります。

実行例②:完成表示例

上記のCSSでは、tabletrthtdそれぞれに対してborderプロパティで枠線を設定しました。この状態では枠線間の余白が生まれてしまうためtableタグに対してborder-collapseプロパティを適用します。

MEMO
border-collapseプロパティ:隣接する要素の枠線を共有するか(重ねるか)を設定する。

テーブル作成解説

テーブルは作りが少しややこしくなっています。例として示したのは一番シンプルな表ですが、それでも4つのタグを使用しなければなりません。

・table:テーブル全体を示す
・tr:(table row)テーブルの行を囲む
・th:(table header)列の先頭に付けるタイトル部分
・td:(table data)テーブルの内容

イメージとして以上の図を頭の中に入れておきましょう。
列と行を混同しやすいので注意!列は縦、行は横です。

テーブル内で特定の枠線のみを消す方法

【手順1】テーブルの全ての枠線を表示する

まずはテーブルを作成し、全ての枠線を表示させます。ここでは枠線を見やすく表示させるため、枠線を重ねて表示するように設定しました。HTMLとCSSは以下の通りです。

完成例①

【手順2】消したい枠線にCSSのプロパティを適用する

続いて消去したい枠線を別途指定していきます。指定方法はいくつかありますが、今回はその中から2つの方法をご紹介します。以下のコードは、全て先ほど作成したコードのstyleタグ内最後尾に記載してください。

線ごとに指定する

ここではborder-topborder-bottomプロパティを指定し、値をnoneに指定しています。

注意
border-collapseで枠線の重なりをONにしているため、重なり合うthの下線、tdの上線、trの上線も指定しなければなりません。

完成例②


クラス名を指定する

続いて枠線ごとにクラス名を付けて、特定の枠線を消す方法です。CSSを変更する前に、HTML内のタグにクラス名を付けなければなりません。

使い分け方としては、ページ内に複数のテーブルが存在しており、特定のテーブルだけ枠線を非表示にしたい際にはこの方法が有効です。

非表示にしたい部分に『erase』というクラス名を付け、CSSでborder: none;を設定しました。全ての線が消えてしまうため、右枠線を付け加えています。

完成例③

テーブル枠線設定:応用編

枠線の種類を変更する

今回は特定の枠線を消す方法をご紹介しましたが、実は枠線の種類を変更することもできます。先ほど紹介したコードのstyleタグ内を以下のように書き換えます。

枠線の種類には、点線(dotted)破線(dashed)二重線(double)などがあり、CSSで自由に指定することができます。

完成例④

まとめ

今回はHTMLで作成するテーブルの枠線についての解説を行いました。少しややこしいので以下の要点を改めてチェックしておきましょう。

・テーブル作成時は枠線の無い状態で表示される
・テーブルに枠線を表示するにはCSSのborderプロパティを使用する
・枠線の重なりはborder-collapseプロパティで設定する

参考文献:
CSSでテーブルの枠線を消す方法と注意点
[ HTML ] テーブルの特定のセルのみ枠線を消す ( border-style )
【CSS】table(テーブル) のborder(枠線)を消す方法