■テーブルを作る

テーブルを起動するにはまず<table>という記述を入れます。
そして、縦・横の表の数にあわせて他を設定します。


縦１行・横２列の場合（ｔｒ、ｔｄ、ｔｄ）

この場合、タグは

<table>
<tr><td>あ</td><td>い</td></tr>
</table>

となります。
ＴＲで一行目、という合図をし、ＴＤを二つ作って横に二段出来たわけです。



縦２行・横２列の場合（tr,td,td,tr,td,td）

この場合、タグは

<table>
<tr><td>あ</td><td>い</td></tr>
<tr><td>う</td><td>え</td></tr>
</table>

となります。
もう一段増えた分、<tr>の記述を増やしていけばよいのです。


二段ずつの表のタグ <table><tr><td>文字</td><td>文字</td></tr><tr><td>文字</td><td>文字</td></table>

■見出しをつける

<th>文字</th>で見出しをつける（文字を太くする）ことができます。

この場合、あといを見出しにしました。
この場合のタグは、

<table>
<tr><th>あ</th><th>い</th></tr>
<tr><td>う</td><td>え</td></tr>
<table>

となります。<td>が<th>に変わるだけです。


<th>文字</th>

■枠線の太さ

<table border="数字">でテーブルのボーダー（枠線）を変えることができます。


ボーダーが０の場合（透明）

枠がなくなります。
この場合のタグは、

<table border="0">
<tr><td>あ</td><td>い</td></tr>
<tr><td>う</td><td>え</td></tr>
</table>

となります。


また、ボーダーを５などに設定してみると、

のようになります。


<table border="数字"></table>

■枠線に色をつける

<table bordercolor="色">で、枠線に色をつけることができます。

ボーダー３、枠線を黒にした場合↓

となります。
この場合のタグは、

<table border="3" bodercolor="black">
<tr><td>あ</td><td>い</td></tr>
<tr><td>う</td><td>え</td></tr>
</table>

となります。

<table bordercolor="色"></table>

■背景に色をつける

方法としては数種類あり、最初に背景色を統一するか、細かく指定していくかがあります。
どれを選んでも共通しているのは<bgcolor="色">というタグを記述することです。


最初に背景色を統一する場合

このようになります。
この場合のタグは、

<table bgcolor="#ccb3ff">
<tr><td>あ</td><td>い</td></tr>
<tr><td>え</td><td>う</td></tr>
</table>

となります。

背景色を指定した後に細かく設定する場合

表の中の色を微妙に変えてみました。
この場合のタグは、

<table bgcolor="#ccb3ff"><tbody>
<tr><td bgcolor="#dfd8ef">あ</td><td bgcolor="white">い</td></tr>
<tr bgcolor="#dfd8ef"><td>あ</td><td>い</td></tr>
</tbody></table>

となります。
上の段では細かく指定するために<td>で色指定をしていますが、
下の段のように左右全部一緒の色の場合は<tr>で色指定をしたほうが簡単です。

また、bgcolor="色"をbackground="ファイル名"に置き換えれば、
背景を画像にすることも可能です。


<bgcolor="色"> <background="ファイル名">

■テーブルの大きさを変える

widthでテーブルやセルの横幅、heightでテーブルやセルの縦幅を変えることが出来ます。
セルの大きさの合計はテーブルの横幅・縦幅を越えることはできません。

テーブルの大きさを設定する

左が共に５０、右が共に７０で設定してみました。
右がわのテーブルのタグは、

<table width="70" height="70"><tbody>
<tr><td>あ</td><td>い</td></tr>
<tr><td>え</td><td>う</td></tr>
</tbody></table>

となります。
セル(テーブルの中身)に何も記述がない場合、等分割されます。


セルを細かく設定する場合

表全体の大きさを変えず、中身を変えてみました。
この場合のタグは、

<table width="70" height="70"><tbody>
<tr><td width="50" height="20">あ</td><td width="20" height="20">い</td></tr>
<tr><td width="50" height="50">う</td><td width="20" height="50">え</td></tr>
</table>

となります。
上下、左右のセルの高さ・幅は同じにしましょう。



<table width="幅" height="高さ"></table> <tr widht="幅" height="高さ"></tr> <td width="幅"> height="高さ"></td>

■またがるセル

colspan、rowspanを使う事によって、
自由にテーブル内のセルの数を増やしたり減らしたりできます。

例

タグ↓
<table>
<tr><td colspan="2">あいうえお</td></tr>
<tr><td>かき</td>
<td>くけこ</td></tr>
</table>