■ >>> Table（表）・bgcolor・background
<table>と</table>の間にtrタグとtdタグを記入し、表を完成させます。 trタグは、表の行を示し、tdタグは、表のセルを示します。
上部に見出しを表示させる場合はtdタグの換わりにthタグを用います。
tableタグ・trタグ・tdタグにbgcolor（背景色）とbackground（背景画像）を指定できます。指定するタグにより、意味が変わります。
- tableタグに指定する場合
- tableタグにbgcolorまたはbackgroundを指定します。この場合テーブル全体の背景の色または画像になります。
- trタグに指定する場合
- trタグにbgcolorまたはbackgroundを指定した場合、設定した、その行のすべてのセルの値背景色または画像になります。
- tdタグに指定する場合
- tdタグにbgcolorまたはbackgroundを指定した場合、設定した、そのセルの値背景色または画像になります。
<table bgcolor="値">
<tr bgcolor="値">
<td background="値">文字列</td>
</tr>
</table>
例：
<table bgcolor="#eeeeee" border="5" width="200" height="200">
<tr bgcolor="#aaffaa">
<td>1-1</td>
<td>1-2</td>
<td>1-3</td>
</tr>
<tr>
<td bgcolor="#ffaaaa">2-1</td>
<td>2-2</td>
<td background="./img/bg-01.jpg">2-3</td>
</tr>
</table>
|
■ >>> border
tableタグにborderを指定（border="値"）すると、枠線の太さを指定できます（値「0」にすると枠線は表示されません）。
tableタグにbordercolorを指定（bordercolor="値"）すると、枠線の色を指定できます。
<table border="値" bordercolor="値">
<tr>
<td>文字列</td>
</tr>
</table>
例：
<table border="9" bordercolor="#ff0000">
<tr>
<td>1-1</td>
<td>1-2</td>
<td>1-3</td>
</tr>
<tr>
<td>2-1</td>
<td>2-2</td>
<td>2-3</td>
</tr>
</table>
|
■ >>> cellpadding & cellspacing
tableタグにcellpaddingを指定（cellpadding="値"）すると、枠線とセルの内容の間の隙間を調節できます。単位はピクセルです。
tableタグにcellspacingを指定（cellspacingr="値"）すると、内枠の太さを調節できます。単位はピクセルです。
<table cellpadding="値" cellspacing="値">
<tr>
<td>文字列</td>
</tr>
</table>
例：
<table cellpadding="7" cellspacing="9">
<tr>
<td>1-1</td>
<td>1-2</td>
<td>1-3</td>
</tr>
<tr>
<td>2-1</td>
<td>2-2</td>
<td>2-3</td>
</tr>
</table>
|
■ >>> align
tableタグ・trタグ・tdタグにalignを指定できます。指定するタグにより、機能が変わります。
aoginの値はleft（左寄せ）・center（中央）・right（右寄せ）です。
- tableタグに指定する場合
- tableタグにalignを指定（align="値"）します。このalignはテーブル自体の配置です。
- trタグに指定する場合
- trタグにalignを指定（align="値"）した場合、設定した、その行のすべてのセル内の値（文字列や画像など）が配置されます。
- tdタグに指定する場合
- tdタグにalignを指定（align="値"）した場合、設定した、そのセル内の値（文字列や画像など）のみが配置されます。
<table border="3" align="値" width="300">
<tr align="値">
<td align="値">文字列</td>
</tr>
</table>
例：
<table border="3" align="center" width="300">
<tr>
<td>1-1</td>
<td align="right">1-2</td>
<td>1-3</td>
</tr>
<tr align="center">
<td>2-1</td>
<td>2-2</td>
<td>2-3</td>
</tr>
</table>
|
■ >>> valign
trタグ・tdタグにalignを指定できます。指定するタグにより、機能が変わります。
vaoginの値はtop（上）・middle（中央）・bottom（下）です。
- trタグに指定する場合
- trタグにvalignを指定（valign="値"）した場合、設定した、その行のすべてのセル内の値（文字列や画像など）が配置されます。
- tdタグに指定する場合
- tdタグにvalignを指定（valign="値"）した場合、設定した、そのセル内の値（文字列や画像など）のみが配置されます。
<table border="3" height="200">
<tr valign="値">
<td valign="値">文字列</td>
</tr>
</table>
例：
<table border="3" align="center" width="200">
<tr>
<td>1-1</td>
<td valign="top">1-2</td>
<td>1-3</td>
</tr>
<tr valign="bottom">
<td>2-1</td>
<td>2-2</td>
<td>2-3</td>
</tr>
</table>
|
■ >>> width & height
tableタグ・trタグ・tdタグにwidthとheightを指定できます。指定するタグにより、意味が変わります。
widthは幅を指定します。値はピクセルまたはパーセンテージ（%）です。
heightは高さを指定します。値はピクセルまたはパーセンテージ（%）です。
- tableタグに指定する場合
- tableタグにwidthとheightを指定（width="値" height="値"）します。tableタグに指定するとそのテーブル自体の幅と高さが設定されます。
- trタグに指定する場合
- trタグにwidthとheightを指定（width="値" height="値"）した場合、設定した、その行のすべてのセルの幅と高さが設定されます。
- tdタグに指定する場合
- tdタグにwidthとheightを指定（width="値" height="値"）した場合、設定した、そのセルの幅と高さが設定されます。
<table border="3" width="値" height="値">
<tr width="値" height="値">
<td width="値" height="値">文字列</td>
</tr>
</table>
例：
<table border="3" width="300" height="300">
<tr>
<td width="50">1-1</td>
<td>1-2</td>
<td>1-3</td>
</tr>
<tr>
<td>2-1</td>
<td>2-2</td>
<td width="50">2-3</td>
</tr>
</table>
|
■ >>> colspan
tdタグにcolspanを指定できます。指定した値の分、横方向のセルが連結されます。
<table border="3">
<tr>
<td colspan="値">文字列</td>
<td>文字列</td>
</tr>
</table>
例：
<table border="3" width="300">
<tr>
<td colspan="2">1-1</td>
<td>1-3</td>
</tr>
<tr>
<td>2-1</td>
<td>2-2</td>
<td>2-3</td>
</tr>
</table>
| ||||||
■ >>> rowspan
tdタグにrowspanを指定できます。指定した値の分、縦方向のセルが連結されます。
<table border="3">
<tr>
<td rowspan="値">文字列</td>
<td>文字列</td>
<tr>
<td>文字列</td>
</tr>
</tr>
</table>
例：
<table border="3" width="300">
<tr>
<td rowspan="2">1-1</td>
<td>1-2</td>
<td>1-3</td>
</tr>
<tr>
<td>2-2</td>
<td>2-3</td>
</tr>
</table>
|