HTML テーブルのセル内の余白を指定するサンプル(cellpadding)

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

cellpadding 属性

< table cellpadding="ピクセル"または%" >

テーブルのセル内の余白を指定します。
セル内の余白とは、セルの枠から文字までの距離です。
cellpadding属性は、HTML5で廃止されました。非推奨となっています。
代わりとして、 CSSの使用が推奨されています。(table要素にCSSのborder-collapseプロパティの値をcollapseにして、td要素にCSSのpaddingプロパティを使用する)

サンプル

1つ目のテーブルは、cellpaddingが0pxです。
2つ目のテーブルは、cellpaddingは10pxです。
3つ目のテーブルは、cellpaddingが0pxで、cellspacingが0pxです。表とセルの間がなくなっています。

コード

上記サンプルのコードです。
8,14行目は、cellpaddingを指定しています。
20行目は、cellpaddingとcellspacingを指定しています。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>テーブルのサンプル</title>
</head>
<body >
<table border="1" cellpadding="0">
	<tr><td>赤 red</td></tr>
	<tr><td>黄 yellow</td></tr>
	<tr><td>青 blue</td></tr>
</table>
　
<table border="1" cellpadding="10">
	<tr><td>赤 red</td></tr>
	<tr><td>黄 yellow</td></tr>
	<tr><td>青 blue</td></tr>
</table>
　
<table border="1" cellpadding="0" cellspacing="0">
	<tr><td>赤 red</td></tr>
	<tr><td>黄 yellow</td></tr>
	<tr><td>青 blue</td></tr>
</table>
</body>
</html>

以下はMDNのtableのリンクです。
https://developer.mozilla.org/ja/docs/Web/HTML/Element/table
CSSのborder-collapseプロパティについては以下を御覧ください。
CSS テーブルの枠線を重ねる/離すサンプル(border-collapse)
CSSのpaddingプロパティについては以下を御覧ください。
CSS 要素の枠内の余白を指定するサンプル(padding)