テーブルを使う
テーブルは少し難しいですが、
とても役に立つので、できれば使えるようになってください。
基本的な構造は以下のようになります。
<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>
↓ 出来上がり
また、列の数を増やすとこのようになります。
<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>
↓ 出来上がり
テーブルの中の一つの部屋をセルといいますが、
このセルを結合することができます。
まずは縦方向に結合します。
<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>
↓ 出来上がり
次は横方向に結合します。
<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>
↓ 出来上がり
テーブルに関しては属性が多いので、以下でまとめておきます。
<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="--" | セルを縦に結合します。 |
次は 罫線を使う です。
メニューに戻ります。