テーブルに関するHTML
■テーブル
■例
テーブル
■HTML
<TABLE BORDER><TD>テーブル内文字</TABLE>
■テーブル枠の太さ
■例：BORDER=10
テーブル
■HTML
<TABLE BORDER="枠の太さ"><TD>テーブル内文字</TABLE>
■テーブルを横に分ける
■例
テーブルテーブル
■HTML
<TABLE BORDER>
<TD>テーブル内文字</TD>
<TD>テーブル内文字</TD>
</TABLE>
■テーブルを縦に分ける
■例
テーブル
テーブル
■HTML
<TABLE BORDER>
<TR><TD>テーブル内文字</TD></TR>
<TR><TD>テーブル内文字</TD></TR>
</TABLE>
■表を作成する
■例
文字@文字A
文字B文字C
文字D文字E
■HTML
<TABLE BORDER>
<TR><TD>文字@</TD><TD>文字A</TD></TR>
<TR><TD>文字B</TD><TD>文字C</TD></TR>
<TR><TD>文字D</TD><TD>文字E</TD></TR>
</TABLE>
■表に見出しを付ける
■例
見出し@見出しA
見出し部分は太字になります
見出し部分はセンタリングされます
■HTML
<TABLE BORDER>
<TR><TH>見出し@</TH><TH>見出しA</TH></TR>
<TR><TD>文字B</TD><TD>文字C</TD></TR>
<TR><TD>文字D</TD><TD>文字E</TD></TR>
</TABLE>
■表の大きさを指定
■例：横幅=300 縦幅=150
文字文字文字
文字文字文字
文字文字文字
■HTML
<TABLE BORDER WIDTH="横幅" HEIGHT="縦幅">
<TR><TD>文字</TD><TD>文字</TD><TD>文字</TD></TR>
<TR><TD>文字</TD><TD>文字</TD><TD>文字</TD></TR>
<TR><TD>文字</TD><TD>文字</TD><TD>文字</TD></TR>
</TABLE>
■文字表示位置
■例
ALIGN="left"
VALIGN="top"		 ALIGN="center"
VALIGN="top"		 ALIGN="right"
VALIGN="top"
ALIGN="left"
VALIGN="middle"		 ALIGN="center"
VALIGN="middle"		 ALIGN="right"
VALIGN="middle"
ALIGN="left"
VALIGN="bottom"		 ALIGN="center"
VALIGN="bottom"		 ALIGN="right"
VALIGN="bottom"
■HTML
<TABLE BORDER>
<TR>
<TD ALIGN="横表示位置" VALIGN="縦表示位置">文字</TD>
</TR>
</TABLE>
■セルとセル内文字の間隔
■例：CELLSPACING=0 CELLPADDING=0
文字@文字A
文字B文字C
文字D文字E
■例：CELLSPACING="10" CELLPADDING="0"
文字@文字A
文字B文字C
文字D文字E
■例：CELLSPACING="0" CELLPADDING="10"
文字@文字A
文字B文字C
文字D文字E
■例：CELLSPACING="10" CELLPADDING="10"
文字@文字A
文字B文字C
文字D文字E
■HTML
<TABLE BORDER CELLSPACING="セルの間隔" CELLPADDING="セルと文字の間隔">
<TR><TD>文字@</TD><TD>文字A</TD></TR>
<TR><TD>文字B</TD><TD>文字C</TD></TR>
<TR><TD>文字D</TD><TD>文字E</TD></TR>
</TABLE>
■縦にまたがるセル
■例
文字@文字A文字B
文字C文字D
文字E文字F
■HTML
<TABLE BORDER>
<TR><TD ROWSPAN="またがる数">文字@</TD>
<TD>文字A</TD><TD>文字B</TD></TR>
<TR><TD>文字C</TD><TD>文字D</TD></TR>
<TR><TD>文字E</TD><TD>文字F</TD></TR>
</TABLE>
■横にまたがるセル
■例
文字@
文字A文字B文字C
文字D文字E文字F
■HTML
<TABLE BORDER>
<TR><TD COLSPAN="またがる数">文字@</TD></TR>
<TR><TD>文字A</TD><TD>文字B</TD><TD>文字C</TD></TR>
<TR><TD>文字D</TD><TD>文字E</TD><TD>文字F</TD></TR>
</TABLE>
■枠線の色(IEのみ)
■例：BORDER="1" BORDERCOLOR="red"
文字@文字A
文字B文字C
文字D文字E
■例：BORDER="10" BORDERCOLOR="blue"
文字@文字A
文字B文字C
文字D文字E
■HTML
<TABLE BORDER BORDERCOLOR="枠の色">
<TR><TD>文字@</TD><TD>文字A</TD></TR>
<TR><TD>文字B</TD><TD>文字C</TD></TR>
<TR><TD>文字D</TD><TD>文字E</TD></TR>
</TABLE>
■枠線の明暗色(IEのみ)
■例：BORDER="10" BORDERCOLORLIGHT="red" BORDERCOLORDARK="blue"
文字@文字A
文字B文字C
文字D文字E
■例：指定しない場合
文字@文字A
文字B文字C
文字D文字E
■HTML
<TABLE BORDER BORDERCOLORLIGHT="枠の明るい部分の色" BORDERCOLORDARK="枠の暗い部分の色">
<TR><TD>文字@</TD><TD>文字A</TD></TR>
<TR><TD>文字B</TD><TD>文字C</TD></TR>
<TR><TD>文字D</TD><TD>文字E</TD></TR>
</TABLE>
■外枠の表示方法(IEのみ)
■例：BORDER="5" BORDERCOLOR="green" FRAME="hsides"
文字@文字A
文字B文字C
文字D文字E
■例：BORDER="5" BORDERCOLOR="blue" FRAME="vsides"
文字@文字A
文字B文字C
文字D文字E
■HTML
<TABLE BORDER FRAME="キーワード">
<TR><TD>文字@</TD><TD>文字A</TD></TR>
<TR><TD>文字B</TD><TD>文字C</TD></TR>
<TR><TD>文字D</TD><TD>文字E</TD></TR>
</TABLE>
■キーワード
キーワード 表示方法
void 外枠なし
above 上のみ
below 下のみ
hsides 上下のみ
vsides 左右のみ
lhs 左側のみ
rhs 右側のみ
box 外枠すべて
border 四辺の縁取り
■内側罫線の表示方法(IEのみ)
■例：BORDER="5" BORDERCOLOR="green" RULES="rows"
文字@文字A
文字B文字C
文字D文字E
■例：BORDER="5" BORDERCOLOR="blue" RULES="cols"
文字@文字A
文字B文字C
文字D文字E
■HTML
<TABLE BORDER RULES="キーワード">
<TR><TD>文字@</TD><TD>文字A</TD></TR>
<TR><TD>文字B</TD><TD>文字C</TD></TR>
<TR><TD>文字D</TD><TD>文字E</TD></TR>
</TABLE>
■キーワード
キーワード 表示方法
none 罫線なし
rows 横列のみ
cols 縦列のみ
all 全て表示
■テーブルの背景色
■例：BGCOLOR="aqua"
文字@文字A
文字B文字C
文字D文字E
■HTML
<TABLE BGCOLOR="色">
<TR><TD>文字@</TD><TD>文字A</TD></TR>
<TR><TD>文字B</TD><TD>文字C</TD></TR>
<TR><TD>文字D</TD><TD>文字E</TD></TR>
</TABLE>
■横セル１列の背景色
■例：BGCOLOR="yellow"
文字@文字A
文字B文字C
文字D文字E
■HTML
<TABLE BGCOLOR="色">
<TR BGCOLOR="色"><TD>文字@</TD><TD>文字A</TD></TR>
<TR><TD>文字B</TD><TD>文字C</TD></TR>
<TR><TD>文字D</TD><TD>文字E</TD></TR>
</TABLE>
■セルの背景色
■例：BGCOLOR="lime"
文字@文字A
文字B文字C
文字D文字E
■HTML
<TABLE BGCOLOR="色">
<TR BGCOLOR="色"><TD>文字@</TD><TD>文字A</TD></TR>
<TR><TD BGCOLOR="色">文字B</TD><TD>文字C</TD></TR>
<TR><TD>文字D</TD><TD>文字E</TD></TR>
</TABLE>
■テーブルの背景画像
■例
文字@文字A
文字B文字C
文字D文字E
■HTML
<TABLE BACKGROUND="画像URL">
<TR><TD>文字@</TD><TD>文字A</TD></TR>
<TR><TD>文字B</TD><TD>文字C</TD></TR>
<TR><TD>文字D</TD><TD>文字E</TD></TR>
</TABLE>
■横セル１列の背景画像(IE非対応)
■例
文字@文字A
文字B文字C
文字D文字E
■HTML
<TABLE BACKGROUND="画像URL">
<TR BACKGROUND="画像URL"><TD>文字@</TD><TD>文字A</TD></TR>
<TR><TD>文字B</TD><TD>文字C</TD></TR>
<TR><TD>文字D</TD><TD>文字E</TD></TR>
</TABLE>
■セルの背景画像
■例
文字@文字A
文字B文字C
文字D文字E
■HTML
<TABLE BACKGROUND="画像URL">
<TR BACKGROUND="画像URL"><TD>文字@</TD><TD>文字A</TD></TR>
<TR><TD BACKGROUND="画像URL">文字B</TD><TD>文字C</TD></TR>
<TR><TD>文字D</TD><TD>文字E</TD></TR>
</TABLE>
Presented by
HTML辞典