テーブルを使って画像や文章を並べる
演習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. セルに画像を挿入する
続いて、作成したテーブルのセルに、画像を挿入していきます。
「A」、「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