テーブルに関するタグ


テーブルの構造 ○ ○ ○ ○ #basis

<TABLE><TR><TD>
セルの内容
</TD></TR></TABLE>
終了タグ:<TABLE>は必須，その他は省略可能
セル1

【HTML】
<TABLE>
<TR>
<TD>セル1</TD>
</TR>
</TABLE>
色の薄い部分はTDタグによって描かれている(この1つ1つをセルという)．
試しにTDを4つ書いてみると，下のようになります．
セル1 セル2 セル3 セル4

【HTML】
<TABLE>
<TR>
<TD>セル1</TD>
<TD>セル2</TD>
<TD>セル3</TD>
<TD>セル4</TD>
</TR>
</TABLE>
一列にセルが4つ並びました．次の列に行くには2個目のTRタグを書き込むと，セルは次の行から始まります．上のセル2とセル3の間に</TR><TR>を入れてみると，
セル1 セル2
セル3 セル4

【HTML】
<TABLE>
<TR>
<TD>セル1</TD>
<TD>セル2</TD>
</TR>
<TR>
<TD>セル3</TD>
<TD>セル4</TD>
</TR>
</TABLE>
TABLE＝終了タグ：必須
テーブルであることを定義します．これが無いと当然テーブルは出来ません．ですが、これがあるだけでもテーブルは出来ません．
TR＝終了タグ：省略可
テーブルの中の行をこれが決めます．よってTR同士は入れ子になる事はありません．この中にTDを入れる事によってセルが作られます．
TD＝終了タグ：省略可
セルを決める．TRの中にいくつTDが続いても問題ありません．実際に画面上に表示する内容はTD内に入れます． 
┏━━━━Ｔ　Ａ　Ｂ　Ｌ　Ｅ━━━━━┓
┃┌──────Ｔ　　Ｒ──────┐┃
┃│┌──ＴＤ──┐┌──ＴＤ──┐│┃
┃││表示する内容││表示する内容││┃
┃│└──────┘└──────┘│┃
┃└────────────────┘┃
┃┌──────Ｔ　　Ｒ──────┐┃
┃│┌──ＴＤ──┐┌──ＴＤ──┐│┃
┃││表示する内容││表示する内容││┃
┃│└──────┘└──────┘│┃
┃└────────────────┘┃
┗━━━━━━━━━━━━━━━━━━┛
BACK △
テーブルの表示位置を指定する ○ ○ ○ ○ #align

<TABLE align="left｜center｜right">
終了タグ:必須
推奨しない．他のalignと一緒で表が他の文章に比べどこに表示されるかを決めます．leftは左に，centerは中央に，RIGHTは右に表示されます．
セル(デフォルト)

セル(center)

セル(right)


BACK △
セルの中のテキストの表示位置を指定する ○ ○ ○ ○ #align-cell

<TD align="left｜center｜right｜justify">
<TD valign=top｜middle｜bottom>
終了タグ:省略可
alignは横の，valignは縦の表示位置を指定する．

align・・・
leftはテキストの左揃えを指定する．デフォルト値である．
centerはテキストの中央揃えを指定する．表見出しのデフォルト値である．
rightはテキストの右揃えを指定する．
justifyはテキストの両端揃えを指定する．

valign・・・
topはテキストを，セル上端に寄せる．
middleはテキストを，セル内の垂直方向で中央に揃える．これがデフォルト値．
bottomはテキストを，セル下端に寄せる．
align→
↓valign		 left center right justify
top テキスト テキスト テキスト テキスト
middle テキスト テキスト テキスト テキスト
bottom テキスト テキスト テキスト テキスト
BACK △
セル，テーブル全体のサイズを指定する ○ ○ ○ ○ #size

<TABLE width="横幅(ピクセルまたは％)" height="高さ(ピクセルまたは％)">
<TD width="横幅(ピクセルまたは％)" height="高さ(ピクセルまたは％)">
終了タグ:TDは省略可
推奨しない．見たとおりです．ただし，高さはブラウザによっては正しく表示されない事があるようです．

スタイルシートでは以下のようにあらわせます．
<TD style="width:横幅;height:高さ">
セル1

【HTML】
<TABLE>
<TR>
<TD style="width:200px;height:300px;">セル1</TD>
</TR>
</TABLE>
セル1

【HTML】
<TABLE>
<TR>
<TD width="100" height="200">セル1</TD>
</TR>
</TABLE>
BACK △
テーブルにタイトルをつける ○ ○ ○ ○ #title

<TABLE>
<CAPTION align="top｜bottom｜left｜right">タイトル</CAPTION>
</TABLE>
終了タグ:必須
属性[align]は推奨しない．topはタイトルをテーブルの上部に持ってくる．bottomはタイトルをテーブル の下部に持ってくる．leftはタイトルをテーブルの左側に持ってくる．rightはタイトルをテーブルの右側に持ってくる．

スタイルシートでは以下のようにあらわせます．
<CAPTION style="align:上の4種類のいずれか">
CAPTION
top
CAPTION
left
CAPTION
bottom
CAPTION
right
BACK △
ボーダーの色，太さを指定する ○ ○ ○ ○ #border

<TABLE border="太さ(ピクセル)" bordercolor="色指定(16進数，またはカラーネーム)">
終了タグ:必須
16進数，カラーネームに関しては【Webセーフカラー＆カラーネーム】を参照のこと．
BACK △
セル，テーブル全体の背景色，背景画像を指定 ○ ○ ○ ○ #bgcolor

<TABLE bgcolor="色指定(16進数，またはカラーネーム)" background="背景画像のURL">
終了タグ:TABLEは必須
推奨しない．16進数，カラーネームに関しては【Webセーフカラー＆カラーネーム】を参照のこと．対応している要素はTABLE，TR，TD．
スタイルシートでは以下のようにあらわせます．
<TABLE style="bgcolor:色指定;background-image:url(背景画像のURL)">
セル1

【HTML】
<TABLE style="background-color:rgb(51,255,0);" cellspacing="5">
<TBODY>
<TR>
<TD style="background-color:rgb(204,255,153);">セル1</TD>
</TR>
</TBODY>
</TABLE>
BACK △
複数の行，列にまたがるセルを作る ○ ○ ○ ○ #span

<TD colspan="またがる列数">
<TD rowspan="またがる行数">
終了タグ:TABLEは必須
┏━━━━━━ＴＡＢＬＥ━━━━━━━┓
┃┌──────Ｔ　　Ｒ──────┐┃
┃│┌──ＴＤ──┐┌──ＴＤ──┐│┃
┃││表示する内容││表示する内容││┃
┃│└──────┘│　　２　　　││┃
┃└────────│　　　　　　│┘┃
┃┌───ＴＲ───│　　　　　　│┐┃
┃│┌──ＴＤ──┐│　　　　　　││┃
┃││表示する．．││　　　　　　││┃
┃│└──────┘└──────┘│┃
┃└────────────────┘┃
┗━━━━━━━━━━━━━━━━━━┛
セル1 セル2
セル3

【HTML】
<TABLE><TD>表示する内容</TD>
■ここで縦にまたがるセル■
<TD rowspan="2">表示する内容２</TD></TR><TR><TD>表示する．． </TD>
■次のセルは一列目ですでに描かれるので書かない■
</TR></TABLE>

┏━━━━━━━━━━ＴＡＢＬＥ━━━━━━━━━━━┓
┃┌──────────Ｔ　　Ｒ──────────┐┃
┃│┌──ＴＤ──┐┌──ＴＤ──────────┐│┃
┃││表示する．１││表示する．２　　　　　　　　││┃
┃│└──────┘└──────────────┘│┃
┃└────────────────────────┘┃
┃┌──────────Ｔ　　Ｒ──────────┐┃
┃│┌──ＴＤ──┐┌──ＴＤ──┐┌──ＴＤ──┐│┃
┃││表示する．３││表示する．４││表示する．５││┃
┃│└──────┘└──────┘└──────┘│┃
┃└────────────────────────┘┃
┗━━━━━━━━━━━━━━━━━━━━━━━━━━┛
セル1 セル2
セル3 セル4 セル5

【HTML】
このようなテーブルを作るとする．左上から，右下へなので
<TABLE><TD>表示する．１</TD>
■ここで横にまたがるセル■
<TD colspan="2">表示する．２</TD></TR><TR><TD>表示する． ３</TD><TD>表示する．４</TD>
■上では2つのセルを1つにしているので2列目は1つセルが多くなる■
<TD>表示する．５</TD></TR></TABLE>
BACK △
自動改行を禁止する ○ ○ ○ ○ #nowrap

<TD nowrap>
終了タグ:省略可
推奨しない．改行しないため，不用意に用いると長いセルを作る事になる．
長くなっても改行されず引き伸ばされてしまいます．
これは許可しています．上のセルに続いて長さが変えられていますが，右端にくると折り返されます．
BACK △