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

関連記事

画像を表示させるタグ

基本-画像を表示させるタグ <img src=”画像のアドレス”> 上記は画像を表示させる基本的なタグです。何も設定していない状態では、画像は左寄せに表示されます。 …

htmlで特定ページへ自動ジャンプさせる

html 特定ページへ自動ジャンプさせる <meta>タグを使って現在のhtmlページを特定のページへ自動ジャンプさせることができます。 サイト移転の時などに使いますね。××秒後にページを …

htmlで行間を変える方法

行間(行の高さ)を指定するプロパティです。 line-height: 小さい文字で、行間もくっついて読みにくいサイト様に出くわすことがあります。私はそれだけで、直帰! 行間は、ある程度の余裕を持たせた …

フォントをカスタマイズ

ブログやホームページのフォントを変更してイメージを変える タグで囲って個別にフォント変更はできますが、全体に適用させたい場合はcssスタイルシートのbodyに使用したいフォントを指定します。ユーザーの …

htmlで文字を太字にする

<strong> <b> タグの違いについて 文字を太字にするタグには <strong>タグ と <b>タグ があります。 このふたつのタグ <s …

スポンサーリンク

スポンサーリンク