Toppagegalleryへ



テーブル

表示 タグ
ひと枠のテーブル
あいうえお
かきくけこ
<TABLE border="1">
<TBODY>
<TR>
<TD>
あいうえお<BR>
かきくけこ
</TD>
</TR>
</TBODY>
</TABLE>

<TD>〜</TD>の部分をセルと言います
枠線を消したい場合は border=0
border=* 数字を増やすと枠が太くなります
表を作る
01 02 03
04 05 06
07 08 09
<TABLE border="1">
<TBODY>
<TR>
<TD>01</TD>
<TD>02</TD>
<TD>03</TD>
</TR>
<TR>
<TD>04</TD>
<TD>05</TD>
<TD>06</TD>
</TR>
<TR>
<TD>07</TD>
<TD>08</TD>
<TD>09</TD>
</TR>
</TBODY>
</TABLE>

TRでセルをまとめることによって行が完結します
列幅を設定し
文字を中央寄せする
01 02 03
04 05 06
07 08 09
<TABLE border="1">
<TBODY>
<TR>
<TD width=30 align=center>01</TD>
<TD width=40 align=center>02</TD>
<TD width=50 align=center>03</TD>
</TR>
<TR>
<TD width=30 align=center>04</TD>
<TD width=40 align=center>05</TD>
<TD width=50 align=center>06</TD>
</TR>
<TR>
<TD width=30 align=center>07</TD>
<TD width=40 align=center>08</TD>
<TD width=50 align=center>09</TD>
</TR>
</TBODY>
</TABLE>

左寄せするときは align=left  右寄せは align=right
行の高さを設定し
文字を下に揃える
01 02 03
04 05 06
07 08 09
<TABLE border="1">
<TBODY>
<TR>
<TD height=30 valign=bottom>01</TD>
<TD height=30 valign=bottom>02</TD>
<TD height=30 valign=bottom>03</TD>
</TR>
<TR>
<TD height=40 valign=bottom>04</TD>
<TD height=40 valign=bottom>05</TD>
<TD height=40 valign=bottom>06</TD>
</TR>
<TR>
<TD height=50 valign=bottom>07</TD>
<TD height=50 valign=bottom>08</TD>
<TD height=50 valign=bottom>09</TD>
</TR>
</TBODY>
</TABLE>

上段にするときは valign=top  中段は valign=middle
表全体に色をつける
01 02 03
04 05 06
07 08 09

↓続く
<TABLE border="1" bgcolor="gray">
<TBODY>
<TR>
<TD>01</TD>
<TD>02</TD>
<TD>03</TD>
</TR>
<TR>
<TD>04</TD>
<TD>05</TD>
<TD>06</TD>
</TR>
<TR>
<TD>07</TD>
<TD>08</TD>
<TD>09</TD>
</TR>
</TBODY>
</TABLE>

TABLE border=* bgcolor=色
テーブルに背景色を設定しているだけです
セル全部に同じ色をつける
01 02 03
04 05 06
07 08 09

↓続く
<TABLE border="1" bgcolor="gray">
<TBODY bgcolor="yellow">
<TR>
<TD>01</TD>
<TD>02</TD>
<TD>03</TD>
</TR>
<TR>
<TD>04</TD>
<TD>05</TD>
<TD>06</TD>
</TR>
<TR>
<TD>07</TD>
<TD>08</TD>
<TD>09</TD>
</TR>
</TBODY>
</TABLE>

TBODYに背景色を指定
行に色をつける
01 02 03
04 05 06
07 08 09

↓続く
<TABLE border="1" bgcolor="gray">
<TBODY bgcolor="yellow">
<TR bgcolor="blue">
<TD>01</TD>
<TD>02</TD>
<TD>03</TD>
</TR>
<TR>
<TD>04</TD>
<TD>05</TD>
<TD>06</TD>
</TR>
<TR>
<TD>07</TD>
<TD>08</TD>
<TD>09</TD>
</TR>
</TBODY>
</TABLE>

TR(行)に背景色を指定
指定しないTR(行)には TBODYで指定した色が残ります
セルにも色をつける
01 02 03
04 05 06
07 08 09

↓続く
<TABLE border="1" bgcolor="gray">
<TBODY bgcolor="yellow">
<TR bgcolor="blue">
<TD>01</TD>
<TD>02</TD>
<TD>03</TD>
</TR>
<TR>
<TD bgcolor="pink">04</TD>
<TD bgcolor="green">05</TD>
<TD>06</TD>
</TR>
<TR>
<TD bgcolor="pink">07</TD>
<TD>08</TD>
<TD bgcolor="green">09</TD>
</TR>
</TBODY>
</TABLE>

ピンク(pink)と緑(green)の色をつけました
色をつけたいセルひとつひとつに背景色を指定します
指定しないセルは、元の指定が残ります
セルを結合する
123
47 05 06
08 09
<TABLE border="1" bgcolor="gray">
<TBODY bgcolor="yellow">
<TR bgcolor="blue">
<TD colspan="3">123</TD>
</TR>
<TR>
<TD bgcolor="pink" rowspan="2">47</TD>
<TD bgcolor="green">05</TD>
<TD>06</TD>
</TR>
<TR>
<TD>08</TD>
<TD bgcolor="green">09</TD>
</TR>
</TBODY>
</TABLE>

colspan=横に結合するセルの数
rowspan=縦に結合するセルの数