★★★★★テーブル★★★★★テーブル★★★★★テーブル★★★★★テーブル★★★★★ | |||
●テーブル表示の基本 | |||
<table> | |||
<tr> | |||
<td>左上</td> | |||
<td>右上</td> | |||
</tr> | |||
<tr> | |||
<td>左下</td> | |||
<td>右下</td> | |||
</tr> | |||
</table> | |||
●テーブル外枠の表示 | |||
<table border="外枠の太さ(ピクセルで指定)"> | |||
●テーブル全体の横幅の指定 | |||
<table width="★%"> | |||
★=ページ全体に対するテーブルの幅(ピクセル数腕も指定できます) | |||
●テーブル全体の横幅の指定 & 各セルの横幅の指定 | |||
<table width="100" border="3"> | |||
<tr> | |||
<td width="70">幅70</td> | |||
<td>幅30</td> | |||
</tr> | |||
<tr> | |||
<td width="30">幅70</td> | |||
<td>幅30</td> | |||
</tr> | |||
</table> | |||
●テーブル全体の高さの指定 | |||
<table hight="★%"> | |||
★=ページ全体に対するテーブルの高さ(ピクセル数腕も指定できます) | |||
●テーブル全体の高さの指定 & 各セルの高さの指定 | |||
<table height="100" border="3"> | |||
<tr> | |||
<td height="70">高さ70</td> | |||
</tr> | |||
<tr> | |||
<td height="30">高さ30</td> | |||
</tr> | |||
</table> | |||
●各セルどうしの間を明ける | |||
<table height="100"> | |||
<tr> | |||
<td height="70" cellpadding="5">高さ70</td> | |||
</tr> | |||
<tr> | |||
<td height="30" cellpadding="0">高さ30</td> | |||
</tr> | |||
</table> | |||
●テーブル枠と文章の間隔を空ける | |||
<table cellpadding="5"> | |||
<tr> | |||
<td>テーブル枠と文章の間隔を空ける</td> | |||
</tr> | |||
</table> | |||
●セルとセルの間隔を変える | |||
<table cellspacing="5"> | |||
<tr> | |||
<td>セルとセルの間隔を変える</td> | |||
</tr> | |||
</table> | |||
●テーブルの背景に画像ファイルを表示する | |||
<table background="★"> | |||
★=表示する画像ファイル名 | |||
●テーブルの背景色の指定 | |||
<table bgcolor="★"> | |||
★=カラーコード又はカラーネームで指定 | |||
●テーブル内での見出しの指定 | |||
<th>★</th> | |||
★=見出しにする文字 | |||
●複数のセル結合 | |||
<td colspan="★">横にまたがるセル結合 | |||
<td rowspan="★">縦にまたがるセル結合 | |||
★=またがるセルの数 | |||
●セル内容と枠線の余白指定 | |||
<table cellpadding="★"> border="1"> | |||
★=セル内容と枠の間隔、ピクセル数で指定 | |||
●セル内文字の表示位置の指定 | |||
<td align="★">〜</td> | |||
★=横方向の位置 left(左寄せ),center(中央揃え),right(右寄せ) | |||
<td valign="★">〜</td> | |||
★=縦方向の位置 top(上に配置),middle(中央に配置),bottom(下に配置) | |||
●テーブル背景画像の指定 | |||
<table background="★"> | |||
★=画像ファイル | |||
●テーブル背景色の指定 | |||
<table bgcolor="#00ff00"> | |||
●テーブル枠線を実線で表示 | |||
<table border="1" cellspacing="0" bordercolor="#000000"> | |||
●テーブル外枠の表示形式の指定 | |||
<table border="外枠の太さ(ピクセルで指定)" frame="☆"> | |||
☆=キーワード | |||
hsides 外枠の上下だけを表示 | |||
vsides 外枠の左右だけを表示 | |||
above 外枠の上だけを表示 | |||
below 外枠の下だけを表示 | |||
lhs 外枠の左だけを表示 | |||
rhs 外枠の右だけを表示 | |||
●テーブルの外枠色の指定 | |||
<table bordercolorlight="★" bordercolordark="★"> | |||
●テーブル中枠の表示形式 | |||
<table rules="★"> | |||
★=表示形式 none 枠を無くす rows 横枠を無くす cols たて枠を無くす all 枠全て表示 | |||
●応用 | |||
<table align="center" border="0" width="400" bgcolor="#0000FF"> | |||
<tr> | |||
<td width="100%" align="center"> | |||
<b><font color="#FFFFFF">タイトルバーのようなレイアウト</font></b></td> | |||
</tr> | |||
<tr> | |||
<td width="100%" bgcolor="#FFFFFF"> | |||
これはいろんなサイトで使われる技法です。 | |||
</td> | |||
</tr> | |||
</table> | |||
<table align="center" border="0" width="400" bgcolor="#FF9999" cellspacing="7"> | |||
<tr> | |||
<td width="100%" bgcolor="#FFE1E1">テーブルには複数のセルを使用しなければならない規則はありません。 | |||
</tr> | |||
</table> | |||
<table
border="2"> <tr> <td>左上</td> <td>中上</td> <td rowspan="2">右上下</td> </tr> <tr> <td>左下</td> <td>中下</td> <tr> <td align="center" colspan="3">下</td> </tr> </table> |
|||