■ 幅と高さ width / height
テーブルの幅を指定します。セル単位で幅の指定も出来ます。
<table border="1" width="350">
<tr>
<td>幅はセルに入れたもの次第で自動的にサイズが<br>
変わりますが、サイズ指定をした方が良いです。<br>
サイズの指定は0〜100の%を使ってもできます。</td>
</tr>
</table>
幅はセルに入れたもの次第で自動的にサイズが
変わりますが、サイズ指定をした方が良いです。
サイズの指定は0〜100の%を使ってもできます。 |
テーブルの高さを指定します。セル単位で高さの指定も出来ます。
<table border="1" height="65">
<tr>
<td>高さはセルに入れたもの次第で自動的にサイズが<br>
変わりますが、サイズ指定をした方が良い場合が多いです。<br>
サイズの指定は0〜100の%を使ってもできます。</td>
</tr>
</table>
高さはセルに入れたもの次第で自動的にサイズが
変わりますが、サイズ指定をした方が場合があります。
|
■ 配置 align / valign
セル内の横の配置を 左・中央・右 で指定します。指定しないと左です。
<table border="1" width="350">
<tr>
<td align="left">左寄せ</td>
<td align="center">中央</td>
<td align="right">右寄せ</td>
</tr>
</table>
セル内の縦の配置を 上・中央・下 で指定します。指定しないと中央です。
<table border="1" height="50">
<tr>
<td valign="top">上</td>
<td valign="middle">中央</td>
<td valign="bottom">下</td>
</tr>
</table>
■ border / cellpadding / cellspacing
この3つの属性は、線の太さ・セル内の空白部分・枠線と枠線の距離です。
極端な例を下に用意しました。
border="0" cellpadding="0" cellspacing="0" の場合。
<table border="0" cellpadding="0" cellspacing="0">
<tr>
<td>border="0"</td>
<td>cellpadding="0"</td>
<td>cellspacing="0"</td>
</tr>
</table>
border="0" |
cellpadding="0" |
cellspacing="0" |
border="10" にした場合。
<table border="10" cellpadding="0" cellspacing="0">
<tr>
<td>border="10"</td>
<td>cellpadding="0"</td>
<td>cellspacing="0"</td>
</tr>
</table>
border="10" |
cellpadding="0" |
cellspacing="0" |
cellpadding="10" にした場合。
<table border="1" cellpadding="10" cellspacing="0">
<tr>
<td>border="1"</td>
<td>cellpadding="10"</td>
<td>cellspacing="0"</td>
</tr>
</table>
border="1" |
cellpadding="10" |
cellspacing="0" |
cellspacing="10" にした場合。
<table border="1" cellpadding="0" cellspacing="10">
<tr>
<td>border="1"</td>
<td>cellpadding="0"</td>
<td>cellspacing="10"</td>
</tr>
</table>
border="1" |
cellpadding="0" |
cellspacing="10" |
■ 背景 bgcolor / background
背景に色を付ける。
<table border="1" width="350" bgcolor="#ddddff">
<tr>
<td>bgcolor="#ddddff" (背景に色を付ける)</td>
</tr>
</table>
bgcolor="#ddddff" (背景に色を付ける) |
背景に画像を使う。
<table border="1" width="350" background=../image/u.gif>
<tr>
<td>background=image/u.gif (背景に画像を使用)</td>
</tr>
</table>
background=../image/u.gif (背景に画像を使用) |
今回は<table>タグに背景を付けましたが、各<td>にも付けられます。
■ ボーダーの表示指定 rules
セル全てのボーダーを表示 rules="all"
<table border="1" rules="all">
<tr>
<td>セル1</td><td>セル2</td>
</tr>
<tr>
<td>セル3</td><td>セル4</td>
</tr>
</table>
セル全てのボーダーを非表示 rules="none"
<table border="1" rules="none">
<tr>
<td>セル1</td><td>セル2</td>
</tr>
<tr>
<td>セル3</td><td>セル4</td>
</tr>
</table>
セル横のボーダーのみ表示 rules="rows"
<table border="1" rules="rows">
<tr>
<td>セル1</td><td>セル2</td>
</tr>
<tr>
<td>セル3</td><td>セル4</td>
</tr>
</table>
セル縦のボーダーのみ表示 rules="cols"
<table border="1" rules="cols">
<tr>
<td>セル1</td><td>セル2</td>
</tr>
<tr>
<td>セル3</td><td>セル4</td>
</tr>
</table>
<thead> <tfoot> <tbody> の境のボーダーのみ表示 rules="groups"
<table border="1" rules="groups">
<thead>
<tr>
<td>セル1</td><td>セル2</td>
</tr>
<tr>
<td>セル3</td><td>セル4</td>
</tr>
</thead>
<tfoot>
<tr>
<td>セル5</td><td>セル6</td>
</tr>
<tr>
<td>セル7</td><td>セル8</td>
</tr>
</tfoot>
<tbody>
<tr>
<td>セル9</td><td>セル10</td>
</tr>
<tr>
<td>セル11</td><td>セル12</td>
</tr>
</tbody>
</table>
セル1 | セル2 |
セル3 | セル4 |
セル5 | セル6 |
セル7 | セル8 |
セル9 | セル10 |
セル11 | セル12 |
■ ボーダーの表示指定 frame
全てのボーダーを表示 frame="border"
<table border="1" frame="border">
<tr>
<td>セル1</td><td>セル2</td>
</tr>
<tr>
<td>セル3</td><td>セル4</td>
</tr>
</table>
全てのボーダーを表示 frame="box"
<table border="1" frame="box">
<tr>
<td>セル1</td><td>セル2</td>
</tr>
<tr>
<td>セル3</td><td>セル4</td>
</tr>
</table>
左右のボーダーを非表示 frame="hsides"
<table border="1" frame="hsides">
<tr>
<td>セル1</td><td>セル2</td>
</tr>
<tr>
<td>セル3</td><td>セル4</td>
</tr>
</table>
上下のボーダーを非表示 frame="vsides"
<table border="1" frame="vsides">
<tr>
<td>セル1</td><td>セル2</td>
</tr>
<tr>
<td>セル3</td><td>セル4</td>
</tr>
</table>
左右と下のボーダーを非表示 frame="above"
<table border="1" frame="above">
<tr>
<td>セル1</td><td>セル2</td>
</tr>
<tr>
<td>セル3</td><td>セル4</td>
</tr>
</table>
左右と上のボーダーを非表示 frame="below"
<table border="1" frame="below">
<tr>
<td>セル1</td><td>セル2</td>
</tr>
<tr>
<td>セル3</td><td>セル4</td>
</tr>
</table>
上下と右のボーダーを非表示 frame="lhs"
<table border="1" frame="lhs">
<tr>
<td>セル1</td><td>セル2</td>
</tr>
<tr>
<td>セル3</td><td>セル4</td>
</tr>
</table>
上下と左のボーダーを非表示 frame="rhs"
<table border="1" frame="rhs">
<tr>
<td>セル1</td><td>セル2</td>
</tr>
<tr>
<td>セル3</td><td>セル4</td>
</tr>
</table>
回り全てのボーダーを非表示 frame="void"
<table border="1" frame="void">
<tr>
<td>セル1</td><td>セル2</td>
</tr>
<tr>
<td>セル3</td><td>セル4</td>
</tr>
</table>
|