テーブル
| 表示 | タグ | |||||||||
ひと枠のテーブル
|
<TABLE border="1"> <TBODY> <TR> <TD> あいうえお<BR> かきくけこ </TD> </TR> </TBODY> </TABLE> <TD>〜</TD>の部分をセルと言います 枠線を消したい場合は border=0 border=* 数字を増やすと枠が太くなります |
|||||||||
表を作る
|
<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でセルをまとめることによって行が完結します |
|||||||||
| 列幅を設定し 文字を中央寄せする
|
<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 |
|||||||||
| 行の高さを設定し 文字を下に揃える
|
<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 |
|||||||||
表全体に色をつける
↓続く |
<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=色 テーブルに背景色を設定しているだけです |
|||||||||
セル全部に同じ色をつける
↓続く |
<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に背景色を指定 |
|||||||||
行に色をつける
↓続く |
<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で指定した色が残ります |
|||||||||
セルにも色をつける
↓続く |
<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=縦に結合するセルの数 |
|||||||||