CSSのmarginとpaddingでtable内のセル間隔を指定する方法を現役エンジニアが解説【初心者向け】

CSSのmarginとpaddingでtable内のセル間隔を指定する方法について、TechAcademyのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。

CSSについてそもそもよく分からないという方は、CSSの書き方について解説した記事をまずご覧ください。

 

なお本記事は、TechAcademyのオンラインブートキャンプ、Webデザイン講座のCSSカリキュラムをもとに執筆しています。

 

 

tableタグ内での余白の概念である、「cellspacing」と「cellspacing」

まずは、tableタグについておさらいしましょう。表組みができるtableには、線を引くことのできる属性や、余白を取ることのできる属性がありました。

ありました、という過去形になっているのは、現在では推奨されない＝使ってはいけない。というものであることだからです。

例えば、こんな感じです。（真似しないでくださいね^^;）

 

野菜	にんじん、かぼちゃ
肉	豚バラ、ロース
くだもの	いちご、メロン

これでは、文書構造であるHTMLに対して、余白・枠線といった修飾要素が入っていますね。文書構造と修飾要素とを分ける。ということが常識となった今では推奨されない手法です。

【参考資料】tableタグに付いて／mozilla.org（外部サイト）

実際に、入れたものをcodepenで再現してみました。それぞれの余白がどこにあるかが分かるように、背景色とちょっと大きめに余白を設定しています。

See the Pen
テーブルのcellspacingと、 cellpadding by Yuka Sato (@yuka-sato)
on CodePen.

 

現在推奨されている記述例で書いてみよう！

現在推奨されているのは、marginとpaddingです。tableタグ内の表の内側に余白をもたせたいのであれば、paddingを用いましょう。

HTMLには「cellspacing」と「cellspacing」、「border」は入れません。

 

野菜	にんじん、かぼちゃ
肉	豚バラ、ロース
くだもの	いちご、メロン

また、覚えておくと良いtableに関するCSSは以下です。セルごとの外側の余白を重ねるか離すか、ができます。

table{
  border-collapse: collapse; /*隣り合うセルのボーダーを重ねて表示*/
}

table{
  border-collapse: separate; /*隣り合うセルのボーダーを間隔をあけて表示*/
}

See the Pen
tableの正しい用法 by Yuka Sato (@yuka-sato)
on CodePen.

 

[PR] Webデザインで副業する学習方法を動画で公開中

tableで実装する場合の正しい用法まとめ

• tableのhtml上に、「cellspacing」と「cellspacing」は用いない。
• tableの余白や枠線は、CSSで指定する。

正しい用法で、tableの表現をいたしましょう！

 

監修してくれたメンター

ゆかちん先生 フリーランスのクリエイティブディレクター。 制作会社、インハウス、スタートアップ企業などで、グラフィックデザイン・ウェブデザイン・アプリデザイン、ウェブディレクションなどに携わってきました。TechAcademyではWeb Designコース・ウェブディレクションコース・WordPressコースを担当しています。

 

TechAcademyでは初心者でも、オリジナルWebサイトを公開できる、オンラインブートキャンプを開催しています。

また、現役エンジニアから学べる無料体験も実施しているので、ぜひ参加してみてください。