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>

関連の記事

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



△上に戻る