b-essence

気になること★いろいろなジャンルで更新していきます。

css・html

cellpadding と cellspacing

2015-04-05

cellpadding と cellspacingtmlの違い

「cellspacing」「cellpadding」は、テーブル内のスペースを設定するタグです。
紛らわしいですが、簡単ですからしっかり覚えましょう。

テーブルタグは、大きな枠(table)の中にセル(td)が入る形になります。
サンプルでは解りやすいようにテーブル枠に色をつけてます。
セルの外側の余白が「cellspacing」
セルの内側の余白が「cellpadding」(実際に文字を入れたり画像を挿入する場所です)
75
<table cellspacing=”0″ cellpadding=”0″>
で、テーブルの余白はなくなります。

????????

スタイルシートでテーブルの余白をなくす設定

border-collapseプロパティを使用します。
属性はcollapse ( 隣接するセルのボーダーを重ねて表示)
ちなみに発音(読み方)は「コラプス」です。
このサンプルでは表のスペースなし、枠線なしです。
スタイルシートは下記のように記述します。クラス名は 「t1」とします。
css ↓

table.t1 {
border-collapse: collapse;
border: 0px;
}

table.t1 td {
padding: 0px;}

html  ↓

<table class="t1">
<tr>
<td>ここに文章</td>
</tr>
</table>

枠線をつけたい時は border を下記のように記述します。
下記のサンプルでは、線の太さが1px 薄いグレーの実践が引けます。
css ↓

table.t1 {
border-collapse: collapse;
border: 1px solid #cccccc;
}

table.t1 td {
padding: 0px;}

76

????????


 

-css・html

関連記事

HTMLタグの基本構造・head要素

HTMLタグの構造 htmlの構造は以下のようになっています。 ホームページの基本的な構造です。 htmlファイルは大きく分けるとヘッダ<head>部分とボディ<body>部分 …

スタイルシートを使って画像(img)の位置を設定する方法

cssで画像の位置を設定するには、ブロック要素で下記のようにクラス(クラス名は任意です)を設定し、html の imgタグに埋め込みます。 displayは、ブロックレベル・インライン等の要素の表示形 …

<p> <div> <span>の使い方

htmlで文章を書く際に<p><div><span>を使い分けられたら、htmlの半分以上を制したと言えるでしょうネ。 頻繁に使うこの3個のタグ<p>& …

htmlでソースを非表示にするタグ

<!– –> ・・・・・上記のタグの中に入れた文字が非表示になります。 非表示にするタグ htmlソースの中にメモを入れられたら便利ですよネ ソース中にコメント・メモを入れることができ …

htmlで色を設定する方法

htmlで文字色や背景色を指定する場合、以前はhtmlに直接<font>タグを使って記述することもありましたが、<font>タグは「非推奨要素」となっています。またHTML5で …

スポンサーリンク

スポンサーリンク