HTML cellpadding テーブルのセル内の余白を指定する

HTMLのcellpadding属性で、テーブルのセル内の余白を指定するサンプルです。

目次

仕様 cellpadding属性
サンプル cellpaddingに10pxを指定する
  cellpaddingに0pxを指定する
  cellpaddingに0pxを指定し、cellspacingに0pxを指定する

cellpadding属性

< table cellpadding="ピクセル"または%" >
  • テーブルのセル内の余白を指定します。
  • セル内の余白とは、セルの枠から文字までの距離です。
  • cellpadding属性は、HTML5で廃止されました。非推奨となっています。
  • 代わりとして、 CSSの使用が推奨されています。
    (table要素にCSSのborder-collapseプロパティの値をcollapseにして、
    td要素にCSSのpaddingプロパティを使用する)
  • paddingは、詰め物という意味です。
  • CSS border-collapse テーブルの枠線を重ねる/離す
  • CSS padding 要素の内側の余白を指定する

cellpaddingに10pxを指定する

cellpaddingに10pxを指定しています。

文字とテーブルの間の余白が広がった状態です。
テーブルを囲む線に幅があります

コード

上記サンプルのコードです。

<table border="1" cellpadding="10">
	<tr><td>赤 red</td></tr>
	<tr><td>黄 yellow</td></tr>
	<tr><td>青 blue</td></tr>
</table>

1行目は、cellpaddingを指定しています。

cellpaddingに0pxを指定する

cellpaddingに0pxを指定しています。

文字とテーブルの間の余白がつまった状態です。
テーブルを囲む線に幅があります。

コード

上記サンプルのコードです。

<table border="1" cellpadding="0">
	<tr><td>赤 red</td></tr>
	<tr><td>黄 yellow</td></tr>
	<tr><td>青 blue</td></tr>
</table>

1行目は、cellpaddingを指定しています。

cellpaddingに0pxを指定し、cellspacingに0pxを指定する

cellpaddingに0pxを指定し、cellspacingに0pxを指定しています。

文字とテーブルの間の余白がつまった状態です。
cellspacingを指定したのでテーブルを囲む線の幅がなくなりました。

コード

上記サンプルのコードです。

<table border="1" cellpadding="0" cellspacing="0">
	<tr><td>赤 red</td></tr>
	<tr><td>黄 yellow</td></tr>
	<tr><td>青 blue</td></tr>
</table>

1行目は、cellpaddingとcellspacingを指定しています。

以下はMDNのtableのリンクです。
https://developer.mozilla.org/ja/docs/Web/HTML/Element/table

関連の記事

HTML rowspan テーブルのセルを縦につなげる
HTML colspan テーブルのセルを横につなげる
HTML cellspacing テーブルのセルの間隔を指定する
HTML テーブルの幅を指定するサンプル(width)
HTML リストを作成するサンプル(ul/li/ol)

△上に戻る