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.
tableで実装する場合の正しい用法まとめ
- tableのhtml上に、「cellspacing」と「cellspacing」は用いない。
- tableの余白や枠線は、CSSで指定する。
正しい用法で、tableの表現をいたしましょう！
監修してくれたメンター
| ゆかちん先生
フリーランスのクリエイティブディレクター。 |
内容分かりやすくて良かったです！
ゆかりちゃんも分からないことがあったら質問してね！
分かりました。ありがとうございます！
TechAcademyでは初心者でも、オリジナルWebサイトを公開できる、オンラインブートキャンプを開催しています。
また、現役エンジニアから学べる無料体験も実施しているので、ぜひ参加してみてください。
