ホームへ

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

2021年08月17日

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>

CSSやhtmlの基本をしっかり理解すると、この記事の内容もより理解できるようになりますよ。

↓CSSやhtmlを楽しく学べるようにマンガを描きましたのでゼヒご覧ください↓

↑「副業してもう少し稼ぎたい!」というかたのために副業の方法も解説しています。

【結論】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)を指定する方法でした。

「この記事の内容がよくわからなかった…」「なんかうまくいかなかった…」というかたは下記記事↓でhtmlとCSSの基本を学びましょう。
わからないまま突き進むより基本を学ぶのが結局近道です。

CSSやhtmlをマンガで学ぶ