東京・オンラインでも開催する初心者向けのHTML・CSSを使ったホームページ制作の1日集中講座(セミナー)です。 HTML・CSSの入門講座なら、神田ITスクール!

演習1.8 テーブルを使って画像や文章を並べる

テーブルを使って画像や文章を並べる

演習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

NEXT>> 演習1.9 メニューを作成し、トップページを完成させる

HTMLとCSSの入門 目次

セミナー一覧

神田ITスクールの就職・転職

HTMLとCSSの入門 目次

HTMLとCSS入門書

法人向けプログラミング研修

Java、PHPの社員研修|新人研修

ホームページ制作・保守

ホームページ制作・保守

他のHTML及びCSSの講座・スクールの紹介

セミナー講師

セミナー講師

主席インストラクター&管理人

ワードプレスセミナーも人気!

ワードプレスセミナーも人気!

より手軽にホームページ制作をしてみたい方にはワードプレスセミナーもおすすめです。
ワードプレスセミナーはこちら

1日集中HTML・CSSセミナーは、プログラミング教育で8年間の実績のある神田ITスクールが運営しています。
初心者、未経験者へわかりやすく教えるのには自信がありますので、ぜひご参加ください。
神田ITスクールのサイトはこちら

ホームページ制作・保守

ホームページ制作・保守
PAGETOP
Copyright © 2015 FusionOne Co.,Ltd. All rights reserved.