表示 |
タグ |
ひと枠のテーブル
|
<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)の色をつけました
色をつけたいセルひとつひとつに背景色を指定します
指定しないセルは、元の指定が残ります |
セルを結合する
|
<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=縦に結合するセルの数 |