テーブルを使って画像や文章を並べる
演習1.8 テーブルを使って画像や文章を並べる
☑セルに画像を挿入する
<td><img src= “画像ファイル名”></td>
画像をきれいに並べたいときには、テーブルを利用すると、自由度が高くなります。テーブルについては3章で学習しましたが、ここでは、テーブルの中に画像や文章を並べていくことにします。
1. テーブルを作成する
では、画像や文章を挿入するテーブルを作成します。
これまで記述したソースコードに、枠で囲まれた部分を記述してください。文章が多いですので、間違えないように、ゆっくりと記述してください。
①ソース・フォルダー ：html/ch06
②ファイル名 ：index.html
➢ index.html (※必要部分のみ記載)
～前略～
<img src="img/img01.jpg" border="0" alt="メイン写真"><br><br>
<font color="#2A7e55" size="5"><strong>子猫と子犬の部屋にようこそ！</strong></font><br>
<strong>子猫と子犬</strong>の<u><strong>とってもかわいい写真</strong></u>をご用意しました。
<br><br>
今後も色々と紹介していきますので、楽しんでください。<br>
<br>
<font color="red" size="4"><strong>かわいい写真ピックアップ </strong></font><br>
<br>
<table border="1" cellpadding="0" cellspacing="4">
<tr>
<td colspan="2" align="center">A</td>
</tr>
<tr>
<td colspan="2" align="center"><font color="green" size="2">B </font></td>
<tr>
<td align="center">C</td>
<td align="center">D</td>
</tr>
<tr>
<td align="center"><font color="green" size="2">E</font></td>
<td align="center"><font color="green" size="2">F</font></td>
</tr>
</table>
<hr width="540">
</center>
</body>
</html>
この記述によって、「かわいい写真ピックアップ」という文章と、「A」～「F」までの文字の入ったテーブルができました。「A」と「B」のセルは、それぞれ横方向の2つのセルが連結されて作られています。
また、「B」、「E」と「F」の文字には、緑の色がついています。
ブラウザで確認すると、以下のように表示されます。
図 1.8.1
2. セルに画像を挿入する
続いて、作成したテーブルのセルに、画像を挿入していきます。
「Ａ」、「C」と「D」の3つのセルに、写真を挿入します。以下のように、「A」、「C」、「D」の記述を書き換えてください。
➢ index.html (※必要部分のみ記載)
～前略～
<br>
<font color="red" size="4"><strong>かわいい写真ピックアップ </strong></font><br>
<br>
<table border="1" cellpadding="0" cellspacing="4">
<tr>
<td colspan="2" align="center"><img src="img/img02.jpg" border="0" alt="子猫や子犬たちの写真"></td>
</tr>
<tr>
<td colspan="2" align="center"><font color="green" size="2">B </font></td>
<tr>
<td align="center"><img src="img/img03.jpg" border="0" alt="かわいい子猫たちの写真"></td>
<td align="center"><img src="img/img04.jpg" border="0" alt="かわいい子犬たちの写真"></td>
</tr>
<tr>
<td align="center"><font color="green" size="2">E</font></td>
<td align="center"><font color="green" size="2">F</font></td>
</tr>
</table>
ブラウザで確認すると、次のように表示されます。
図 1.8.2
3. 画像の説明文を加える
続いて、「B」、「E」、「F」のセルに、説明文を加えていきます。
また、テーブルの枠線は不要になりますので、テーブルのborderを「”1″」から「”0″」に変更し、枠線が表示されないようにします。
以下のように、「B」、「E」、「F」の記述を書き換えてください。
➢ index.html (※必要部分のみ記載)
～前略～
<br>
<font color="red" size="4"><strong>かわいい写真ピックアップ </strong></font><br>
<br>
<table border="0" cellpadding="0" cellspacing="4">
<tr>
<td colspan="2" align="center"><img src="img/img02.jpg" border="0" alt="子猫や子犬たちの写真"></td>
</tr>
<tr>
<td colspan="2" align="center"><font color="green" size="2">かわいい子猫や子犬を見ていると気持ちが温かくり
ますね。</font></td>
<tr>
<td align="center"><img src="img/img03.jpg" border="0" alt="かわいい子猫たちの写真"></td>
<td align="center"><img src="img/img04.jpg" border="0" alt="かわいい子犬たちの写真"></td>
</tr>
<tr>
<td align="center"><font color="green" size="2">かわいい子猫たち</font></td>
<td align="center"><font color="green" size="2">かわいい子犬</font></td>
</tr>
</table>
4. HTMLファイルを保存
記述が終わったら、上書き保存をしてください。
5. ブラウザで表示
これまでの記述によって、ブラウザでの表示は次のようになります。
図 1.8.3
