HTMLによる表の作成法、画像の扱い方
By M. kuto


◆段落と本文、改行

 <p>〜</p>の範囲の文章が、ひとつの段落となります。この範囲の前でテキストが改行され、さらに、1行分空白が入ります。長い文章では、ひとつのテーマをもった文章のひとまとまりをひとつの段落とすると、ブラウザで表示した時に読みやすくなります。

 次の段落になりました。この前で、1行分空白が空いて、文章が読みやすくなりました。

 本文を書いて、改行タグ<br>で改行しただけの場合には、段落タグと異なり、行が詰まって表示されます。
この例で見ると、おそらく違いがよくわかると思います。

◆画像の挿入

画像の幅(width)と高さ(height)を、ピクセル数か元の画像の%で表示すると、画像がより速く表示されます。

☆HTML記述法

<img src="ikuta_photo.jpg" width="240" height="200" border="0">


◆表組みの方法

表のタイトル
課題番号 出題日 課題内容 提出日
1 10月1日 PowerPoint課題 10月8日
・・・ ・・・ ・・・ ・・・
・・・ ・・・ ・・・ ・・・
・・・ ・・・ ・・・ ・・・

☆HTML記述法

<table border="1" align="center">
<caption align="center"><b>表のタイトル</b></caption>
<tr><th>課題番号</th><th>出題日</th><th>課題内容</th><th>提出日</th></tr>
<tr><td>1</td><td>10月1日</td><td><a href="p0061299.ppt">PowerPoint課題</a></td><td>10月8日</td></tr>
<tr><td>・・・</td><td>・・・</td><td>・・・</td><td>・・・</td></tr>
<tr><td>・・・</td><td>・・・</td><td>・・・</td><td>・・・</td></tr>
<tr><td>・・・</td><td>・・・</td><td>・・・</td><td>・・・</td></tr>
</table>

表組みには、体裁を整えるためのいろいろなオプションがあります。