テーブルを使う


テーブルは少し難しいですが、
とても役に立つので、できれば使えるようになってください。


基本的な構造は以下のようになります。

<table border="1" bordercolor="#7799ff" width="240" height="80">
<tr><td>左上</td><td>右上</td></tr>
<tr><td>左下</td><td>右下</td></tr>
</table>

  ↓  出来上がり

左上右上
左下右下


まず、<table> </table>でテーブルを置きます。
次に、必要な行の数だけ<tr> </tr>を入れます。
そして、必要な列の数だけ<td> </td>を入れます。

<tr> </tr>は<table> </table>の中に、
<td> </td>は<tr> </tr>の中に入れます。

したがって<tr> </tr>の中に含まれる<td> </td>の数は
原則として <tr> </tr>ごとに、それぞれ同じ数になります。
同じ数にしないと、テーブルの形が変になります。

それから、border="--"というのはボーダーラインの太さです。
また、bordercolor="#------"というのはボーダーラインの色です。
んで、width="---"が幅、height="---"が高さになります。


行の数を増やすとこのようになります。

<table border="1" bordercolor="#7799ff" width="240" height="80">
<tr><td>左上</td><td>右上</td></tr>
<tr><td>左中1</td><td>右中1</td></tr>
<tr><td>左中2</td><td>右中2</td></tr>
<tr><td>左下</td><td>右下</td></tr>
</table>

  ↓  出来上がり

左上右上
左中1右中1
左中2右中2
左下右下


また、列の数を増やすとこのようになります。

<table border="1" bordercolor="#7799ff" width="240" height="80">
<tr><td>左上</td><td>中上1</td><td>中上2</td><td>右上</td></tr>
<tr><td>左下</td><td>中下1</td><td>中下2</td><td>右下</td></tr>
</table>

  ↓  出来上がり

左上中上1中上2右上
左下中下1中下2右下


テーブルの中の一つの部屋をセルといいますが、
このセルを結合することができます。

まずは縦方向に結合します。
<td>の中にrowspan="--"という属性を入れます。
数値は結合するセルの数です。

rowspan="--"を入れた<td> </td>より下の<td> </td>は、
rowspan="--"の数値の分だけなくなります。

<table border="1" bordercolor="#7799ff" width="240" height="80">
<tr><td>左上</td><td>右上</td></tr>
<tr><td rowspan="2">左中1</td><td>右中1</td></tr>
<tr><td>右中2</td></tr>
<tr><td>左下</td><td>右下</td></tr>
</table>

  ↓  出来上がり

左上右上
左中1右中1
右中2
左下右下


次は横方向に結合します。
<td>の中にcolspan="--"という属性を入れます。

colspan="--"を入れた<td> </td>より右の<td> </td>は、
colspan="--"の数値の分だけなくなります。

<table border="1" bordercolor="#7799ff" width="240" height="80">
<tr><td>左上</td><td colspan="2">中上1</td><td>右上</td></tr>
<tr><td>左下</td><td>中下1</td><td>中下2</td><td>右下</td></tr>
</table>

  ↓  出来上がり

左上中上1右上
左下中下1中下2右下


テーブルに関しては属性が多いので、以下でまとめておきます。

<table>タグ

background="ファイル名"背景画像を指定します
bgcolor="#------"背景色を指定します。
width="---"テーブルの横幅です。
height="---"テーブルの縦の長さです。
align="right"テーブルを右に寄せます。
align="left"テーブルを左に寄せます。
align="center"テーブルを真ん中におきます。
border="--"ボーダーラインの太さです。
bordercolor="#------"ボーダーラインの色です。
cellspacing="--"セルとセルの間隔です。
cellpadding="--"セルの中の文章などとの間隔です。

<tr>タグ

background="----"背景画像を指定します。
bgcolor="#------"背景色を指定します。
align="right"その行のセルの中を右にそろえます。
align="left"その行のセルの中を左にそろえます。
align="center"その行のセルの中を真ん中にそろえます。
valign="top"その行のセルの中を上にそろえます。
valign="middle"その行のセルの中を中央にそろえます。
valign="bottom"その行のセルの中を下にそろえます。

<td>タグ

background="----"背景画像を指定します。
bgcolor="#------"背景色を指定します。
align="right"そのセルの中のものを右にそろえます。
align="left"そのセルの中のものを左にそろえます。
align="center"そのセルの中のものを真ん中にそろえます。
valign="top"そのセルの中のものを上にそろえます。
valign="middle"そのセルの中のものを中央にそろえます。
valign="bottom"そのセルの中のものを下にそろえます。
colspan="--"セルを横に結合します。
rowspan="--"セルを縦に結合します。




次は 罫線を使う です。

メニューに戻ります。