[PR]当たる!無料占いで運命鑑定:プロの占い師による本格運命鑑定が無料で

<TABLE>

とほほのWWW入門 > HTMLリファレンス > <TABLE>

【概要】

形式<TABLE>〜</TABLE>
サポートH3〜H4(S)〜 / e2〜 / N2〜
タグの省略開始タグ:必須、終了タグ:必須
包含可能要素CAPTION / COL / COLGROUP / THEAD / TBODY / TFOOT
(直接 TR を記述した場合は、<TBODY>タグが省略されていると見なす。)

【説明】

<TR><TH><TD>と組み合わせてテーブル(表)を作成します。

【属性】

【ボーダー関連属性】
属性意味
BORDER=nH3-H4(S)/e2/N2。枠線の太さを指定します。この属性を記述しない、または、0を指定すると枠線を表示しません。
BORDERCOLOR=colore2/N4。枠線の色を指定します。
BORDERCOLORDARK=colore2。立体的な枠線の暗い部分の色を指定します。
BORDERCOLORLIGHT=colore2。立体的な枠線の明るい部分の色を指定します。
FRAME=frameH4(S)/e3。各セルの上下左右の枠線について、表示する/しないを制御します。
void - 表示しない。(既定値)
above - 上側のみ。
below - 下側のみ。
hsides - 上下のみ。
vsides - 左右のみ。
lhs - 左側(Left Hand Side)のみ。
rhs - 右側(Right Hand Side)のみ。
box - 上下左右。
border - 上下左右。
RULES=rulesH4(S)/e3。テーブルの内側の枠線を表示するルールを指定します。
none - 表示しない。
groups - <THEAD>, <TBODY>, <TFOOT> で指定したグループの境界のみ。
rows - 横方向のみ。
cols - 縦方向のみ。
all - すべて。(規定値)

【背景関連属性】
属性意味
BACKGROUND=urle3/N4。背景画像を指定します。
BGCOLOR=colorH4(T)/e2/N3。背景色を指定します。

【配置関連属性】
属性意味
ALIGN=alignH3-H4(T)/e2/N2。テーブルの表示位置を指定します。
center - 中央表示(H3/e2/N4)
left - 左端表示(H2/e2/N2) (既定値)
right - 右端表示(H2/e2/N2)
CELLPADDING=nH3-H4(S)/e2/N2。枠線とセルの内容の間の隙間をピクセル単位で指定します。
CELLSPACING=nH3-H4(S)/e2/N2。内枠の太さを指定します。0を指定すると、立体感の無い枠線を表示することができます。
HEIGHT=ne2/N2。テーブルの高さをピクセルまたはパーセンテージで指定します。
HSPACE=nN2。テーブルの周りの横方向の余白をピクセル単位で指定します。
VSPACE=nN2。テーブルの周りの縦方向の余白をピクセル単位で指定します。
WIDTH=nH3-H4(S)/e2/N2。テーブルの横幅をピクセルまたはパーセンテージで指定します。

【その他属性】
属性意味
COLS=ne3/N4。列数を指定します。この属性を指定することにより、テーブルの表示速度が若干速くなる場合がある。
DATAPAGESIZE=sizee4。データバインド機能を用いる際の、レコード数を指定します。
DATASRC=datasrce4。データバインド機能を用いる際の、データソースのIDを指定します。
SUMMARY=summaryH4(S)。音声読み上げブラウザなどのために、この表の目的や構成の説明を記述します。

【一般属性】
属性意味
CLASS=classH4(S)/e3/N4。クラスを指定します。
DIR=dirH4(S)/e5。文字の表示方向を指定します。
ID=idH4(S)/e3/N4。IDを指定します。
LANG=langH4(S)/e4。言語を指定します。
LANGUAGE=languagee4。スクリプト言語を指定します。
STYLE=styleH4(S)/e3/N4。スタイルシートを指定します。
TITLE=titleH4(S)/e4。タイトルを指定します。

【使用例】

HTMLソース
<TABLE BORDER=4 WIDTH=250 ALIGN=center>
 <CAPTION>【テーブルの例】</CAPTION>
 <TR BGCOLOR="#CCCCCC">
  <TH><BR></TH>
  <TH>列-A</TH>
  <TH>列-B</TH>
  <TH>列-C</TH>
 </TR>
 <TR ALIGN=center>
  <TD>行-1</TD>
  <TD>A1</TD>
  <TD>B1</TD>
  <TD ROWSPAN=2>C1-C2</TD>
 </TR>
 <TR ALIGN=center>
  <TD>行-2</TD>
  <TD>A2</TD>
  <TD>B2</TD>
 </TR>
 <TR ALIGN=center>
  <TD>行-3</TD>
  <TD>A3</TD>
  <TD COLSPAN=2>A3-B3</TD>
 </TR>
</TABLE>

ブラウザ表示例
【テーブルの例】

列-A 列-B 列-C
行-1 A1 B1 C1-C2
行-2 A2 B2
行-3 A3 A3-B3

【補足】

テーブルのそれぞれの桝目のことを「セル」と呼びます。

セルは、<TH>や<TD>タグのCOLSPAN属性やROWSPAN属性を用いて、横方向、縦方向に連結することができます。

中身が何も無いセルを <TD></TD> のように書いてしまうと、セルのへこみが無くなり少々不細工になってしまいます(左図)。この場合、<TD><BR></TD> のようにすると回避できるようです(右図)。

ああああああ
あああ
ああああああ
あああ

テーブルを横に並べて書きたい時は、枠線無しのテーブルのセルとして、並べたいテーブルを記述する方法があります。

<TABLE>
 <TR>
  <TD><TABLE BORDER=1>〜</TABLE></TD>
  <TD><TABLE BORDER=1>〜</TABLE></TD>
 </TR>
</TABLE>

テーブルのセルとセルの間の隙間を無くすには、<TABLE>タグに BORDER=0 CELLSPACING=0 CELLPADDING=0 を指定し、かつ、<TD>〜</TD>の間に一度も空白や改行を入れないようにしてください。これを怠ると、Netscape Navigatorで空白が開いてしまうことがあります。

【関連項目】

<CAPTION><TR><TH><TD><THEAD><TBODY><TFOOT><COL><COLGROUP>

Copyright (C) 1996-2001 とほほ
初版:2000年10月9日 最終更新:2001年4月1日
http://tohoho.wakusei.ne.jp/html/table.htm
[PR]≪占い奇跡の恋愛術≫初回無料:幸せな結婚へ導きます。本格結婚鑑定