Homepage Zero ガイド
logo

ゼロから始めよう!わかりやすい!ホームページ作成ガイド

初めての方へ|総合案内|お問い合わせ|当サイトについて

ホームページ初心者ガイド| HTML| CSS| ホームページお役立ち情報| ホームページレベルアップ情報| その他

ホームコース別ガイド一覧>セルどうしの間隔を指定しよう!

セルどうしの間隔を指定しよう!(table要素のcellspacing属性)

じっくりコースアイコンの説明 じっくりコースアイコンの説明

使用タグ <table cellspacing="間隔">〜</table>

HTML一覧タグ辞典 … <table> タグ

<table> タグcellspacing 属性を使えば、セルとセルの間の間隔を指定できます。値にはピクセル数を表す数値やパーセンテージを指定します。
cellspacing 属性を省略すると、代表的なWebブラウザでのセルどうしの間隔は2pxで表示されます。

使用例

では実際に cellspacing 属性の属性値を「"10"」に指定してみましょう!

記述例
<html>
<head>
<title>一人暮らしの前向き料理</title>
</head>
<body>

<table border="1" cellspacing="10">
<tr>
<th>1つ目の見出しセル</th>
<th>2つ目の見出しセル</th>
<th>3つ目の見出しセル</th>
</tr>
<tr>
<td>2行目、1つ目のセル</td>
<td>2行目、2つ目のセル</td>
<td>2行目、3つ目のセル</td>
</tr>
<tr>
<td>3行目、1つ目のセル</td>
<td>3行目、2つ目のセル</td>
<td>3行目、3つ目のセル</td>
</tr>
</table>

</body>
</html>

使用例の表示

[cellspacing属性の値を10に指定する前の表示例]
一人暮らしの前向きな料理
1つ目の見出しセル 1つ目の見出しセル 1つ目の見出しセル
2行目、1つ目のセル 2行目、2つ目のセル 2行目、3つ目のセル
3行目、1つ目のセル 3行目、2つ目のセル 3行目、3つ目のセル
↓
[cellspacing属性の値を10に指定した後の表示例]
一人暮らしの前向きな料理
1つ目の見出しセル 1つ目の見出しセル 1つ目の見出しセル
2行目、1つ目のセル 2行目、2つ目のセル 2行目、3つ目のセル
3行目、1つ目のセル 3行目、2つ目のセル 3行目、3つ目のセル

このように、セルとセルの間に10pxの間隔を取り表示されます!あまり間隔を取りすぎても、見栄えが悪くなりますので、バランスを大事にしましょう!

cellspacing属性の値を「0」に指定してみよう!

[cellspacing属性の属性値を0に入力したブラウザでの表示例]
一人暮らしの前向きな料理
1つ目の見出しセル 1つ目の見出しセル 1つ目の見出しセル
2行目、1つ目のセル 2行目、2つ目のセル 2行目、3つ目のセル
3行目、1つ目のセル 3行目、2つ目のセル 3行目、3つ目のセル

このように、セルとセルの間隔をなくす(0px)ことができます。

関連情報ページ

このタグによく使われるCSS

その他

ロゴ
ゼロから始めよう!わかりやすい!ホームページ作成ガイド

|初めての方へ|総合案内|お問い合わせ|当サイトについて|

copyright (C) TOMIY All Right Reserved
inserted by FC2 system