サイト内検索

...HTML・XHTMLタグ...

table

周りの余白

tableの周りに余白を作るには、
table要素にvspace属性・hspace属性を指定します。
[使い方]
<table vspace="3" hspace="5">
[メモ・・・W3Cの検証サービス・・・]
ブラウザ上では表示されますが、推奨されていません。
Validするには、スタイルシートを使用します。
floatプロパティ・marginプロパティを指定します。
.sample{float: left; margin: 40px;}
[fire foxの場合]
vspacehspaceに対応しています。
[table周りの余白]
属性 属性値 説明
vspace= "" 上下に空白を作るときに指定します。
整数の「ピクセル数(例・・"1")」を指定します。
hspace= "" 左右に空白を作るときに指定します。
整数の「ピクセル数(例・・"1")」を指定します。

サンプル

《vspaceを指定して上下に余白の指定》

[bodyの中]

<table border="1" align="left" vspace="10">
<tr>
<th>No</th>
<th>No</th>
</tr>
<tr>
<td>No</td>
<td>No</td>
</tr>
</table>

《hspaceを指定して左右に余白の指定》

[bodyの中]

<table border="1" align="left" hspace="10">
<tr>
<th>No</th>
<th>No</th>
</tr>
<tr>
<td>No</td>
<td>No</td>
</tr>
</table>

《vspace・hspaceを使って上下左右に余白の指定》

[bodyの中]

<table border="1" align="left" vspace="10" hspace="10">
<tr>
<th>No</th>
<th>No</th>
</tr>
<tr>
<td>No</td>
<td>No</td>
</tr>
</table>

float・marginを指定

《上下左右に余白の指定》

[bodyの中]

<table border="1" style="float:left; margin: 10px 30px;">
<tr>
<th>No</th>
<th>No</th>
</tr>
<tr>
<td>No</td>
<td>No</td>
</tr>
</table>
style="float:left; margin: 10px 30px;"
左右に余白を「30px」
上下に余白を「10px」
取っています。

[ブラウザ上]

NoNo
NoNo

style="float:left; margin: 10px 30px;"
左右に余白を「30px」
上下に余白を「10px」
取っています。

Copyright c 2007.10.01 luc All rights reserved.