Table
<TABLE>タグに、関係するタグや属性のページです。
IEでは、<TABLE>タグ関係に拡張されたタグや属性があります。
IEの場合、属性でCELLSPACING="0"を指定しないとセルとセルの間に隙間が出ます。
枠線色の指定
<TABLE>の枠線の色を付けたり、枠線の明るい線と暗い線の色を指定できます。スタイルシートのBORDER-COLORとBORDER-STYLEプロパティーに相当します。
<table bordercolor="#rrggbb | color name">
<table bordercolorlight="#rrggbb | color name" bordercolorldark="#rrggbb | color name">
<table bordercolor="#ff3300" border="6">
<table bordercolorlight="#0066ff" bordercolorldark="#000080" border="6">
枠線の表示方法
<TABLE>の枠線の表示を指定します。
属性は、9つのキーワードがあります。スタイルシートのBORDER-TOP・BOTTOM・LEFT・RIGHTプロパティに相当します。
<table frame="void | above | below | hsides | vsides | lhs | rhs | box | border">
<table frame="void" bordercolor="#ff3300" border="4">
<table frame="above" bordercolor="#ff3300" border="4">
<table frame="below" bordercolor="#ff3300" border="4">
<table frame="hsides" bordercolor="#ff3300" border="4">
<table frame="vsides" bordercolor="#ff3300" border="4">
<table frame="lhs" bordercolor="#ff3300" border="4">
<table frame="rhs" bordercolor="#ff3300" border="4">
<table frame="box" bordercolor="#ff3300" border="4">
<table frame="border" bordercolor="#ff3300" border="4">
内側罫線の表示方法
<TABLE>の内側枠線の表示を指定します。
属性は5つのキーワードで指定します。
<tablerules="none | groups | rows | cols | all">
<table rules="none" bordercolor="#ff3300" border="4">
| 左上の枠 | 右上の枠 |
| 左下の枠 | 右下の枠 |
<table rules="groups" bordercolor="#ff3300" border="4">
| 左上の枠 | 右上の枠 |
| 左下の枠 | 右下の枠 |
<table rules="rows" bordercolor="#ff3300" border="4">
| 左上の枠 | 右上の枠 |
| 左下の枠 | 右下の枠 |
<table rules="cols" bordercolor="#ff3300" border="4">
| 左上の枠 | 右上の枠 |
| 左下の枠 | 右下の枠 |
<table rules="all" bordercolor="#ff3300" border="4">
| 左上の枠 | 右上の枠 |
| 左下の枠 | 右下の枠 |
表ヘッダ・フッタ・本体
<THEAD><TBODY><TFOOT>タグを、スタイルシートに使用するとセルごとの指定が簡単になります。Internet Explorerでは、このタグにBORDERやOVERFLOEプロパティが使用できません。
<table>
<thead style="background-color: rgb(255,204,204)">
<tr><td>thead</td><td>thead</td></tr>
</thead>
<tfoot style="background-color: rgb(204,204,204)">
<tr><td>tfoot</td><td>tfoot</td></tr>
</tfoot>
<tbody style="background-color: rgb(204,230,255)">
<tr><td>tbody</td><td>tbody</td></tr>
<tr><td>tbody</td><td>tbody</td></tr>
<tr><td>tbody</td><td>tbody</td></tr>
</tbody>
</table>
| thead | thead |
| tfoot | tfoot |
| tbody | tbody |
| tbody | tbody |
| tbody | tbody |
縦列のグループ化
<COLGROUPE>タグを使用すると縦列をグループ化し、異なるスタイルを設定できます。SPAN属性でグループ化する列数を指定します。設定した場合、上から順番に1グループ列目、2グループ列目・・・となります。
サンプルをご覧になれば、規則が理解できると思います。
<colgroup span="group column">
<table>
<colgroup span="1" style="background-color: rgb(204,255,204)"></colgroup>
<colgroup span="1" style="background-color: rgb(204,230,255)"></colgroup>
<colgroup span="1" style="background-color: rgb(230,230,230)"></colgroup>
<thead style="background-color: rgb(255,204,204)">
<tr><td>thead</td><td>thead</td><td>thead</td><td>thead</td></tr>
</thead>
<tr><td>td</td><td>td</td><td>td</td><td>td</td></tr>
<tr><td>td</td><td>td</td><td>td</td><td>td</td></tr>
<tr><td>td</td><td>td</td><td>td</td><td>td</td></tr>
</table>
| thead | thead | thead | thead |
| td | td | td | td |
| td | td | td | td |
| td | td | td | td |
<table>
<colgroup span="1" style="background-color: rgb(204,255,204)"></colgroup>
<colgroup span="2" style="background-color: rgb(204,230,255)"></colgroup>
<colgroup span="1" style="background-color: rgb(230,230,230)"></colgroup>
<thead style="background-color: rgb(255,204,204)">
<tr><td>thead</td><td>thead</td><td>thead</td><td>thead</td></tr>
</thead>
<tr><td>td</td><td>td</td><td>td</td><td>td</td></tr>
<tr><td>td</td><td>td</td><td>td</td><td>td</td></tr>
<tr><td>td</td><td>td</td><td>td</td><td>td</td></tr>
</table>
| thead | thead | thead | thead |
| td | td | td | td |
| td | td | td | td |
| td | td | td | td |
縦列のスタイルをまとめて指定
<COL>タグで縦列のスタイルを、まとめて指定できます。
<COLGROUP>タグ内に、指定します。規則は、<COLGROUP>と同様です。
<style type="text/css">
<!--
#col1 { background-color: rgb(204,255,204); }
#col2 { background-color: rgb(204,230,255); }
-->
<table>
<colgroup>
<col id="col1"><col id="col2"><col id="col1"><col
id="col2">
</colgroup>
<thead style="background-color: rgb(255,204,204)">
<tr><td>thead</td><td>thead</td><td>thead</td><td>thead</td></tr>
</thead>
<tr><td>td</td><td>td</td><td>td</td><td>td</td></tr>
<tr><td>td</td><td>td</td><td>td</td><td>td</td></tr>
<tr><td>td</td><td>td</td><td>td</td><td>td</td></tr>
</table>
| thead | thead | thead | thead |
| td | td | td | td |
| td | td | td | td |
| td | td | td | td |
背景画像の指定
<TABLE>や<TD>に背景画像を指定します。
NNでも可能になっていますが、うまく表示できません。スタイルシートと組み合わせれば、表示の仕方を細かく指定できます。
2つ目のサンプルは、360px×240pxの<TABLE>に240px×180pxの画像をスタイルシートでセンターに配置し、左上の<TD>に160px×120pxの画像を配置した場合です。
<table background="url">
<td background="url">
<table width="320" height="240" background="img_jeens.jpg"
cellspacing="0">
<tr><td width="160" height="120" background="img_tabasco.jpg"></td><td
width="160" height="120" ></td></tr>
<tr><td width="160" height="120" ></td><td width="160" height="120" ></td>
</tr>
</table>
<style>
<!--
table.image { width: 320px; height: 240px;
background-image: url("img_jeens.jpg");
background-repeat: no-repeat;
background-position: center; }
table.image td { width: 160px; height: 120px; }
td.image { background-image: url("img_tabasco.jpg");
background-repeat: no-repeat;
background-position: center; }
-->
</style>
<table class="image" cellspacing="0">
<tr><td class="image"></td><td></td></tr>
<tr><td></td><td></td></tr>
</table>
 |
 |
|---|
