icon
icon

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

初心者向けにCSSのmarginとpaddingでtable内のセル間隔を指定する方法について解説しています。HTMLのtableタグによる余白の指定は現在は推奨されておらず、CSSで行うのが一般的です。ぜひ覚えておきましょう。

テックアカデミーマガジンは受講者数No.1のプログラミングスクール「テックアカデミー」が運営。初心者向けにプロが解説した記事を公開中。現役エンジニアの方はこちらをご覧ください。 ※ アンケートモニター提供元:GMOリサーチ株式会社 調査期間:2021年8月12日~8月16日  調査対象:2020年8月以降にプログラミングスクールを受講した18~80歳の男女1,000名  調査手法:インターネット調査

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

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

 

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

 

田島悠介

今回は、CSSに関する内容だね!

大石ゆかり

どういう内容でしょうか?

田島悠介

CSSのmarginとpaddingでtable内のセル間隔を指定する方法について詳しく説明していくね!

大石ゆかり

お願いします!

 

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サイトを公開できる、オンラインブートキャンプを開催しています。

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