ホームページビルダーなどでテーブルを作り、手動で大きさを変えると横幅サイズなどが自動的に入力されます。
例えば、横２列、縦２段のテーブルで、テーブルの横幅を750ピクセルにした場合、
<table width="750">
<tr>
<td>〜</td>
<td>〜</td>
</tr>
<tr>
<td>〜</td>
<td>〜</td>
</tr>
</table>
となります。
それぞれのセル（
<td>〜</td>）が未入力の状態では、右側と左側の横幅はちょうと半分ずつになっていますが、
文字や画像を入れるとそのサイズに合わせて大きさが変化します。
また、画像の横幅合計が750を超えるときには、テーブルサイズに収まらずテーブルが大きくなります。
つまり、テーブルの「 750 」は絶対値ではないのです。
初めに決めたテーブルサイズを守るためには、画像の横幅を計算してはめ込む必要があります。
テーブルサイズが「 750 」で「
border,cellspacing,cellpadding」を決めていない場合、
画像の合計サイズは「
(750-6-4)=740」、つまり「 740 」以下に設定しないとテーブルが大きくなります。
考え方としては、横型の画像、縦型の画像、それぞれ横幅・高さを決めておくことです。
また、表示する位置についても決めておく方が見た目揃います。
実際にどうするかというと、下記のように横型の画像用、縦型の画像用のソースを色々試して作ることです。
- 横型の画像
- <td width="50%" align="center" valign="middle"><img src="****.jpg" width="360" height="270" border="0" alt="画像の説明"></td>
- 縦型の画像
- <td width="50%" align="center" valign="middle"><img src="****.jpg" width="270" height="360" border="0" alt="画像の説明"></td>
それぞれの使い方は、
- td width="50%"
- こうしておくと右側と左側の横幅が半分ずつになります。
- align="center"
- 横位置を決めます。left：左、center：中央、right：右
- valign="middle"
- 縦位置を決めます。top：上、middle：中央、bottom：下
- border="0"
- 画像周囲の境界線表示のことで、0：表示しない、1〜：境界線の太さ
こうして横型、縦型のサイズと配置を決めて１つずつ作っておくと、それぞれコピーして使えます。
画像や文字の表示位置だけでなく、テーブル枠線との隙間を少し空けると見た目すっきりします。
それには「 cellpadding 」を使います。
およそ「 cellpadding="5" 」くらいで良いでしょう。
画像の合計サイズは「
(750-6-5×4)=724」、つまり「 724 」以下であれば良く、
右側・左側をちょうど半分ずつにするためには縦長、横長の画像とも横幅は「
724/2=362」以下であればＯＫです。
以上を全部書くと次のようになります。
赤色が横型画像用、青色が縦型画像用です。
<table width="750" cellpadding="5">
<tr>
<td width="50%" align="center" valign="middle">
<img src="****.jpg" width="360" height="270" border="0" alt="画像の説明">
</td>
<td width="50%" align="center" valign="middle">
<img src="****.jpg" width="360" height="270" border="0" alt="画像の説明">
</td>
</tr>
<tr>
<td width="50%" align="center" valign="middle">
<img src="****.jpg" width="270" height="360" border="0" alt="画像の説明">
</td>
<td width="50%" align="center" valign="middle">
<img src="****.jpg" width="270" height="360" border="0" alt="画像の説明">
</td>
</tr>
</table>
また次のようなこともできます。
１．セルを連結する
・・・横方向：
colspan="n" n=2〜
・・・縦方向：
rowspan="n" n=2〜
２．背景に色を付ける
・・・全体の場合
<table bgcolor="色">
・・・部分的な場合
<tr bgcolor="色">,<td bgcolor="色">
３．背景に画像や写真を付ける
・・・全体の場合
<table background="背景のURL">
・・・部分的な場合
<tr background="背景のURL">,<td background="背景のURL">
４．見出し的な使い方
・・・
<tr>〜</tr>の替わりに
<th>〜</th>と書くと、その行は太字でセンタリングされます。