【CSS/html】tableの枠線を指定する方法

tableにはborder属性で線をつけることができます。

しかし、その状態では二重線になっていてすっきりしないデザインの表になってしまいます。

CSSでtableの枠線(border)を指定する方法を解説します。

【htmlだけ】border="1"

CSSを指定せずに「border="1"」を指定すると下記のような線の表になります。

<table border="1">
    <tr>
        <td>左上</td><td>右上</td>
    </tr>
    <tr>
        <td>左下</td><td>右下</td>
    </tr>
</table>

【結論】tdの上と左に線、tableの下と右に線を引く

左上	右上
左下	右下

<style>
table[border="1"]{
	border-spacing:0;
	border: none;
	border-bottom: 1px solid #999;
	border-right: 1px solid #999;
}
table[border="1"] td,table[border="1"] th{
	padding:5px 8px;
	background:#FFF;
	border: none;
	border-top: 1px solid #999;
	border-left: 1px solid #999;
}
table[border="1"] th{
	background:#f9f9f9;
}
</style>
<table border="1">
    <tr>
        <td>左上</td><td>右上</td>
    </tr>
    <tr>
        <td>左下</td><td>右下</td>
    </tr>
</table>

線を引くCSSは「border」です。tableだけにborderを指定しても内側のマスに線がありません。よってtdとthにもborderが必要です。

それだけでは隙間の空いた表になるため「border-spacing:0」で隙間をなくします。

隙間はなくなりましたが、1pxと1pxの線がくっつき2pxの線に見えます。

ということでtdとthには上と左にだけ線が表示されるようにします。

そうなると表全体の下と右に線がないためtableには下と右に線を引きます。

表において線はサブであり、その中身･内容がメインです。よって表の線は目立つ必要がありません。色は#999程度で無彩色の薄めでよいでしょう。

これで表に線を引くことができます。あとはpaddingやmarginで調整しましょう。

セレクタについて「table[border="1"]」と指定しています。

これは「border="1"」があるtableに対して効くCSSとなります。border="2"やborderの記述がないtableには効きません。

html5からはtableにおけるborderは線の有無を示すためのものとなっています。

「border="1"」だったら線をつける、というCSSにしておきましょう。

wordpressの場合

wordpressの場合「border="1"」をつけることができません。

そのかわり「wp-block-table」というクラスがtableの親につきます。

これを利用して「.wp-block-table table」のようにセレクタを指定するといいでしょう。

【まとめ】CSSでtableの枠線(border)を指定する方法

tdの上と左に線、tableの下と右に線を引く

以上、CSSでtableの枠線(border)を指定する方法でした。