ホーム＞コース別ガイド一覧＞セルどうしの間隔を指定しよう！
セルどうしの間隔を指定しよう！（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>１つ目の見出しセル</th>
<th>２つ目の見出しセル</th>
<th>３つ目の見出しセル</th>
</tr>
<tr>
<td>２行目、１つ目のセル</td>
<td>２行目、２つ目のセル</td>
<td>２行目、３つ目のセル</td>
</tr>
<tr>
<td>３行目、１つ目のセル</td>
<td>３行目、２つ目のセル</td>
<td>３行目、３つ目のセル</td>
</tr>
</table>
</body>
</html> |
|
使用例の表示
[cellspacing属性の値を10に指定する前の表示例]
| 一人暮らしの前向きな料理 |
| １つ目の見出しセル |
１つ目の見出しセル |
１つ目の見出しセル |
| ２行目、１つ目のセル |
２行目、２つ目のセル |
２行目、３つ目のセル |
| ３行目、１つ目のセル |
３行目、２つ目のセル |
３行目、３つ目のセル |
|
|
 |
[cellspacing属性の値を10に指定した後の表示例]
| 一人暮らしの前向きな料理 |
| １つ目の見出しセル |
１つ目の見出しセル |
１つ目の見出しセル |
| ２行目、１つ目のセル |
２行目、２つ目のセル |
２行目、３つ目のセル |
| ３行目、１つ目のセル |
３行目、２つ目のセル |
３行目、３つ目のセル |
|
|
このように、セルとセルの間に10pxの間隔を取り表示されます！あまり間隔を取りすぎても、見栄えが悪くなりますので、バランスを大事にしましょう！
cellspacing属性の値を「0」に指定してみよう！
[cellspacing属性の属性値を0に入力したブラウザでの表示例]
| 一人暮らしの前向きな料理 |
| １つ目の見出しセル |
１つ目の見出しセル |
１つ目の見出しセル |
| ２行目、１つ目のセル |
２行目、２つ目のセル |
２行目、３つ目のセル |
| ３行目、１つ目のセル |
３行目、２つ目のセル |
３行目、３つ目のセル |
|
このように、セルとセルの間隔をなくす（0px）ことができます。
関連情報ページ |
|
このタグによく使われるCSS |
|
|
|
|
その他 |
|
|
|
