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