【CSS】border-spacingでtable(表)の間隔を指定しよう！

シュウ

今回は【CSS】border-spacingでtable(表)の間隔を指定しよう！
の解説になります！

こんな方に読んでほしい

CSSを学び始めた方へ
table関連のデザインについて学びたい方へ
今回はtable(表)の間隔についての記事になります

上の図のように、table(表)の間隔を指定する際には、CSSを適用させなければなりません。
間隔を指定する際には、marginやpaddingは適用されません。
指定方法もとても簡単ですので、最後まで読んで理解度を高めましょう。

[記事の内容]

border-spacingについて

border-spacingとは、テーブルのボーダーの間隔を指定します。
書き方は以下のようになります。

/*spacingの指定*/
table { 
	border-spacing: 値;
	border-collapse:separate;
}

指定できる値

数値と単位
「10px」のように数値と単位で間隔を指定できます。
また、1つ目の値が左右、2つ目の値が上下で指定が可能になります。

border-spacingについて

border-spacingとは、テーブルのボーダーの間隔を指定します。
tableタグに対して、border-spacingを「上下10px、左右10px」の指定しています。
border-collapse: collapseの場合は、border-spacingが効かないので注意しましょう。

セルの幅について

見出し1	見出し2	見出し3
クマくん	リンゴ	1個120円(税込)
サルくん	バナナ	1本140円(税込)

<table class="table01">
	<tbody>
   <tr>
　　　<td>クマくん</td>
　　　<td>リンゴ</td>
　　　<td class="price">1個120円(税込)</td>
　　</tr>
	</tbody>
</table>

/*--table01--*/
table.table01 {
	border-collapse:separate;
	border-spacing: 10px 10px;
	table-layout: fixed;
	width: 100%;
	text-align: center; /*--全体をセンター寄せに指定--*/
	background-color: #f1f1f1; /*--全体の背景色を指定--*/
	color: #333;　/*--全体の文字色を指定--*/
}

table.table01 th {
	background-color: #fd6158; /*--thの背景色を指定--*/
	color: #fff; /*--thの文字色を指定--*/
}

/*--右寄せに指定--*/
table.table01 td, 
table.table01 th {
	border: solid 1px #333;
	padding: 8px 16px; /*--paddingを指定--*/
}

th.top {
	width: 100px;
}

border-spacingが
効かない原因
border-spacingが効かない原因は、tableタグにborder-collapse: collapseが指定されている場合があります。
collapseでは、効かないので、border-collapse:separateに指定を変更しましょう。

tableに関する関連記事まとめ

【HTML】表を作成からレイアウトの変更までを解説
tableの基本的な作成についての記事になります。tableに関してはセルの結合などがあります。
【HTML】複雑な表(テーブル)をコピペで簡単に作る方法
【Table Tag Generator】についてのご説明です。HTMLの表を簡単に作成について解説しています。
【CSS】table-layoutの使い方、列幅のサイズについて
table(表)の列幅のサイズについての記事になります。
【CSS】tableデザインとはCSSでレイアウトを整えよう！
セル間のボーダーや背景色、マウスが重なった行の背景色になど、レイアウトについて解説しております。