SHU BLOG

BLOG NEWS ブログ

  • ARTICLE
    2020.08.09
  • CATEGORY
TITLE

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

SHU[シュウ]

1991年生まれ九州の宮崎県育ち
高校卒業後、愛知県で自動車関係の
お仕事に5年間勤め、WEB業界に
転職致しました。
趣味:サッカー観戦、ゲーム、映画、漫画
基本インドアです!笑

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

こんな方に読んでほしい

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

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

border-spacingについて

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でレイアウトを整えよう!
セル間のボーダーや背景色、マウスが重なった行の背景色になど、レイアウトについて解説しております。

まとめ

今回はこれで以上です。

POINT
  • border-spacingとは、
    テーブルのボーダーの間隔を指定します。
  • tableタグに対して、border-spacingを指定しましょう。
  • border-collapse: collapseの場合は、border-spacingが効かないので注意しましょう。
スポンサーリンク

SHU

1991年生まれ九州の宮崎県育ち高校卒業後、愛知県で自動車関係のお仕事に5年間勤め、WEB業界に転職致しました。
趣味:サッカー観戦、ゲーム、映画、漫画基本インドアです!笑
つくる、しあわせをテーマとして主にWEBに関する様々な情報を発信しています。

関連記事

オススメ記事

月別アーカイブ

Portfolio

page_top