表の作り方2
次に上の画像のように一番上のセルを2つ つなげて(以下、統合とする)ひとつにしてみましょう。
セルを統合するには「colspan」を使います。
使い方は、セルを2つ統合するには「colspan="2"」3つ統合するには「colspan="3"」と指定します。
ここで注意しなければいけないのは、2つ以上セルを統合したときに余ったセルを削除するのを忘れないでください。
<例題>10
<html>
<head>
<title>MY HOMEPAGE</title>
</head>
<body>
<center>
<h1>MY HOMEPAGE</h1>
<p>
<img src="cake.jpg">
<p>
<font size="4" color="#0000FF">スポンジのつくり方</font>
<p>
<table width="350" border="1">
<tr>
<td colspan="2"><材料>(例)18cmの丸型1個分</td>
< td> </td> ←このセルが余るので削除する。
</tr>
<tr>
<td>卵</td>
<td>3個</td>
</tr>
<tr>
<td>砂糖</td>
<td>90g</td>
</tr>
<tr>
<td>小麦粉</td>
<td>90g</td>
</tr>
<tr>
<td>バター</td>
<td>25g</td>
</tr>
</table>
</center>
</body>
</html>
余ったセルの意味がわからないかもしれないのでもう少し説明しておきます。
2列のセルを統合する場合、
「colspan="2"」を使って、このセルと隣のセルをくっつけて1個にする |
この部分が余計なので削除します。 |
|
|
|
|
すると以下のようにセルが統合されます。
では、話を元に戻します。
先ほどのファイルをブラウザで表示させると下の画像のようにうまく表示できましたか?

では上の画像のように文字の位置を変えてみましょう。
位置を変えるには <td> のタグに 「align="******"」を追加します。
「align="center"」と追加すると文字や画像がセンタリングされます。
「align="right"」と追加すると文字や画像が右寄せになります。
「align="left"」と追加すると文字や画像が左寄せになりますが、何も指定しなければ左寄せになるのであまり使わないでしょう。
「center」「right」「left」は必ず「"」(ダブルクォーテーション)で忘れずに囲んでください。
<例題11>
<html>
<head>
<title>MY HOMEPAGE</title>
</head>
<body>
<center>
<h1>MY HOMEPAGE</h1>
<p>
<img src="cake.jpg">
<p>
<font size="4" color="#0000FF">スポンジのつくり方</font>
<p>
<table width="350" border="1">
<tr>
<td colspan="2" align="center"><材料>(例)18cmの丸型1個分</td>
</tr>
<tr>
<td>卵</td>
<td align="center">3個</td>
</tr>
<tr>
<td>砂糖</td>
<td align="center">90g</td>
</tr>
<tr>
<td>小麦粉</td>
<td align="center">90g</td>
</tr>
<tr>
<td>バター</td>
<td align="center">25g</td>
</tr>
</table>
</center>
</body>
</html>
これをブラウザで表示すると下の画像のように表示されます。
うまく表示できましたか?

▲このページのトップに戻るTop
|