| テーブル |
|
●テーブル（表） <TABLE></TABLE>
|
| 単にテーブル（表）として使うだけでなく、ページのレイアウトに大変役立ちます。テーブルタグを上手に使いこなせることはホームページを自在に作ることができると言えます。ホームページ作成にはテーブルタグは不可欠といってもよいかもしれません。 |
|
 表全体 |
<TABLE>〜</TABLE>
|
| 見出し行 |
<TH>〜<TH>
|
| 列 |
<TR>〜<TR>>
|
| セル |
<TD></TD>
|
基本形
| 見出し1 |
見出し2 |
見出し3 |
| データ1 |
データ2 |
データ3 |
| データ4 |
データ5 |
データ6 |
|
<TABLE>
<TR>
<TH>見出し1</TH><TH>見出し2</TH><TH>見出し3</TH>
</TR>
<TR>
<TD>データ1</TD><TD>データ2</TD><TD>データ3</TD>
</TR>
<TR>
<TD>データ4</TD><TD>データ5</TD><TD>データ6</TD>
</TR>
</TABLE>
※セルの指定は<TH>〜<TH>の見出し行が必要ない場合、
すべて<TD>〜<TD>でかまいません
|
表にタイトルをつける
| 見出し1 |
見出し2 |
見出し3 |
| データ1 |
データ2 |
データ3 |
| データ4 |
データ5 |
データ6 |
タイトル
|
<TABLE>
<CAPTION>タイトル</CAPTION>
<TR>
<TH>見出し1</TH><TH>見出し2</TH><TH>見出し3</TH>
</TR>
<TR>
<TD>データ1</TD><TD>データ2</TD><TD>データ3</TD>
</TR>
<TR>
<TD>データ4</TD><TD>データ5</TD><TD>データ6</TD>
</TR>
</TABLE>
|
| レイアウト |
|
●テーブル（表）のレイアウト
|
| 表の大きさを指定 |
<TABLE width="表の横幅" height="表の高さ">〜</TABLE>
※幅・高さともに「ピクセル数」または「%」で指定します
|
| セルの大きさを指定 |
<TABLE>
<TR>
<TD width="セルの横幅" height="セルの高さ">データ</TD>
</TR>
</TABLE>
※幅・高さともに「ピクセル数」または「%」で指定します
|
セルの連結（横方向）
|
<TD colspan="3">横方向の連結数3</TD>
|
セルの連結（縦方向）
|
<TD rowspan="3">縦方向の連結数3</TD>
|
| 表の枠の太さを指定 |
<TABLE border="外枠線の太さ">〜</TABLE>
|
セルとセルの
間隔の指定 |
<TABLE cellspacing="間隔の大きさ">〜</TABLE>
|
セル内の行揃えと
縦方向の位置指定 |
<TD align="行揃え位置" valign="縦揃え位置">位置</TD>
|
align="left" |
align="senter" |
align="right" |
| valign="top" |
位置 |
位置 |
位置 |
| valign="middle" |
位置 |
位置 |
位置 |
| valign="bottom" |
位置 |
位置 |
位置 |
|
| 背景 |
|
●テーブル（表）の背景
|
| 表の背景色指定 |
<TABLE bgcolor="色の指定">〜</TABLE>
|
| 見出し行の背景色指定 |
<TH bgcolor="色の指定">〜</TH>
|
指定した行全体の
背景色指定 |
<TR bgcolor="色の指定">〜</TR>
|
| セルの背景色指定 |
<TD bgcolor="色の指定">〜</TD>
|
| 表の背景画像指定 |
<TABLE background="背景画像名またはURL"></TABLE>
|
| 見出し行の背景画像指定 |
<TH background="背景画像名またはURL"></TH>
|
指定した行全体の
背景画像指定 |
<TR background="背景画像名またはURL"></TR>
|
| セルの背景画像指定 |
<TD background="背景画像名またはURL"></TD>
|
| 外枠 |
|
●テーブル（表）の外枠の表示形式
|
なしの場合
frame="void"
|
<TABLE border="4" frame="void">〜</TABLE>
| 見出し1 |
見出し2 |
見出し3 |
| データ1 |
データ2 |
データ3 |
|
上のみの場合
frame="above" |
<TABLE border="4" frame="above">〜</TABLE>
| 見出し1 |
見出し2 |
見出し3 |
| データ1 |
データ2 |
データ3 |
|
下のみの場合
frame="below" |
<TABLE border="4" frame="below">〜</TABLE>
| 見出し1 |
見出し2 |
見出し3 |
| データ1 |
データ2 |
データ3 |
|
右のみの場合
frame="rhs" |
<TABLE border="4" frame="rhs">〜</TABLE>
| 見出し1 |
見出し2 |
見出し3 |
| データ1 |
データ2 |
データ3 |
|
左のみの場合
frame="lhs" |
<TABLE border="4" frame="lhs">〜</TABLE>
| 見出し1 |
見出し2 |
見出し3 |
| データ1 |
データ2 |
データ3 |
|
上下左右の場合
frame="border" |
<TABLE border="4" frame="border">〜</TABLE>
| 見出し1 |
見出し2 |
見出し3 |
| データ1 |
データ2 |
データ3 |
|
上下のみの場合
frame="hsides" |
<TABLE border="4" frame="hsides">〜</TABLE>
| 見出し1 |
見出し2 |
見出し3 |
| データ1 |
データ2 |
データ3 |
|
左右のみの場合
frame="vsides" |
<TABLE border="4" frame="vsides">〜</TABLE>
| 見出し1 |
見出し2 |
見出し3 |
| データ1 |
データ2 |
データ3 |
|
| 枠線 |
|
●テーブル（表）内の枠線の表示形式
|
なしの場合
rules="none" |
<TABLE border="4" rules="none">〜</TABLE>
| 見出し1 |
見出し2 |
見出し3 |
| データ1 |
データ2 |
データ3 |
|
横の境界のみの場合
rules="rows" |
<TABLE border="4" rules="rows">〜</TABLE>
| 見出し1 |
見出し2 |
見出し3 |
| データ1 |
データ2 |
データ3 |
|
縦の境界のみの場合
rules="cols" |
<TABLE border="4" rules="cols">〜</TABLE>
| 見出し1 |
見出し2 |
見出し3 |
| データ1 |
データ2 |
データ3 |
|
全ての境界の場合
rules="all" |
<TABLE border="4" rules="all">〜</TABLE>
| 見出し1 |
見出し2 |
見出し3 |
| データ1 |
データ2 |
データ3 |
|