@ 全体を中央寄せにする A テーブルの幅、空きの設定 B テーブルの活用(タイトル等を飾る) C 水平線を引く |
D テーブルの各セルの設定 E セルの各列毎の属性の一括設定 F 画像まわりの余白の設定 G イラスト画像を入れる |
<!-- ++++++++++ あいさつ ++++++++++ --> <div align="center"> ←中央寄せ開始 <img src="kuma.gif" align="left"> <font color="navy" face="HG創英角ポップ体"> ようこそ、くまさんのホームページへ、おいでくださいました。<br><br> まだ始めたばかりなので、内容はあまりありませんが、<br><br> すこしづつ充実させて行きますので、たびたびお立ち寄り下さい。 </font><br clear="all"><br> </div> ←中央寄せ終了
<!-- ++++++++++ あいさつ ++++++++++ --> <div align="center"> ←中央寄せ開始 <table border="1"> ←テーブルでくくる(開始) <tr> <td> ←1列目 <img src="kuma.gif"> ←くまの画像貼り付け </td> (テーブルにしたので回り込みは不要) <td> ←2列目 <font color="navy" face="HG創英角ポップ体"> ←あいさつ文 ようこそ、くまさんのホームページへ、おいでくださいました。<br><br> まだ始めたばかりなので、内容はあまりありませんが、<br><br> すこしづつ充実させて行きますので、たびたびお立ち寄り下さい。 </font> </td> </tr> </table> ←テーブルでくくる(終了) </div> ←中央寄せ終了
![]() |
ようこそ、くまさんのホームページへ、おいでくださいました。 まだ始めたばかりなので、内容はあまりありませんが、 すこしづつ充実させて行きますので、たびたびお立ち寄り下さい。 |
![]() |
ようこそ、くまさんのホームページへ、おいでくださいました。 まだ始めたばかりなので、内容はあまりありませんが、 すこしづつ充実させて行きますので、たびたびお立ち寄り下さい。 |
なまえ | くまさん |
住 所 | 兵庫県の中部の田園地帯 |
仕 事 | パープリンの助手 |
年 齢 | 30歳代 |
趣 味 | パソコン・お酒が特に好き |
高 校 | ぱーぷりん高校を何とか卒業 |
大 学 | ぱーぷりん大学でパソコンを専攻 |
<!-- ++++++++++ 自己紹介 ++++++++++ --> <div align="center"> <font color="#bb00ff"> <b>まずは、自己紹介します</b> </font><br><br> <table border="1" cellpadding="10"> ←文字と罫線の間隔10px <tr> <td width="100">□なまえ</td> ←セル幅100pxの指定 <td width="350">□<i>くまさん</i></td></tr> ←セル幅350pxの指定 <tr> <td>□住 所</td> <td>□兵庫県の中部の田園地帯</td></tr> <tr> <td>□仕 事</td> <td>□ぱーぷりん の助手</td></tr> <tr> <td>□年 齢</td> <td>□30歳代</td></tr> <tr> <td>□趣 味</td> <td>□<u>パソコン・スキー</u>が特に好き</td></tr> <tr> <td>□高 校</td> <td>□ぱーぷりん高校を何とか卒業</td></tr> <tr> <td>□大 学</td> <td>□ぱーぷりん大学でパソコンを専攻</td></tr> </table></div>
なまえ | くまさん |
住 所 | 兵庫県の中部の田園地帯 |
仕 事 | ぱーぷりん の助手 |
年 齢 | 30歳代 |
趣 味 | パソコン・スキーが特に好き |
高 校 | ぱーぷりん高校を何とか卒業 |
大 学 | ぱーぷりん大学でパソコンを専攻 |
<html> <head> <title>くまさんのHP</title> </head> <body background="bg.gif"> <div align="center"> ←センタリング開始(全体を一括指定する) <!-- ++++++++++ タイトル ++++++++++ --> <font size="7" color="red"> くまさんのホームページ </font><br><br> <!-- ++++++++++ あいさつ ++++++++++ --> <table border="0"> ←画像と「あいさつ」をテーブルでくくる <tr> <td> <img src="kuma.gif"> </td> <td> <font color="navy" face="HG創英角ポップ体"> ようこそ、くまさんのホームページへ、おいでくださいました。<br><br> まだ始めたばかりなので、内容はあまりありませんが、<br><br> すこしづつ充実させて行きますので、たびたびお立ち寄り下さい。 </font> </td> </tr> </table><br> <!-- ++++++++++ 自己紹介 ++++++++++ --> <font color="#bb00ff"> <b>まずは、自己紹介します</b> </font><br><br> <table border="1" cellpadding="10"> ←文字と罫線の間隔10px <tr> <td width="100">□なまえ</td> ←セル幅の指定 <td width="350">□<i>くまさん</i></td></tr> ←セル幅の指定 <tr> <td>□住 所</td> <td>□兵庫県の中部の田園地帯</td></tr> <tr> <td>□仕 事</td> <td>□パープリンの助手</td></tr> <tr> <td>□年 齢</td> <td>□30歳代</td></tr> <tr> <td>□趣 味</td> <td>□<u>パソコン・スキー</u>が特に好き</td></tr> <tr> <td>□高 校</td> <td>□ぱーぷりん高校を何とか卒業</td></tr> <tr> <td>□大 学</td> <td>□ぱーぷりん大学でパソコンを専攻</td></tr> </table><br> <!-- ++++++++++ メールを貼る ++++++++++ --> ←メールを下にした <a href="mailto:perplin@mh1.117.ne.jp"> <img src="mail.gif" border="0"> </a> </div> ←センタリング終了 </body> </html>
これが普通のテーブルです <table border="1"> <tr> <td>●●</td> <td>××</td> </tr> <tr> <td>□□</td> <td>▲▲</td> </tr> </table><br> 内枠の太さを10ピクセルにします <table border="1" cellspacing="10"> <tr> <td>●●</td> <td>××</td> </tr> <tr> <td>□□</td> <td>▲▲</td> </tr> </table>
●● | ×× |
□□ | ▲▲ |
●● | ×× |
□□ | ▲▲ |
<div align=center> タイトルをテーブルで囲います(border=1) <table border="1"> ←外枠の厚みを 1px にする <tr><td> <font size="7" color="red">くまさんのホームページ</font> </td></tr> </table><br> 立体感を付けます(border=5) <table border="5"> ←外枠の厚みを 5px にする <tr><td> <font size="7" color="red">くまさんのホームページ</font> </td></tr> </table><br> 枠線との隙間を10ピクセル空けます <table border="5" cellpadding="10"> ←さらに枠線との隙間を 10 pxにする <tr><td> <font size="7" color="red">くまさんのホームページ</font> </td></tr> </table> </div>
くまさんのホームページ |
くまさんのホームページ |
くまさんのホームページ |
<div align=center> 背景の色を付けます(bgcolor=#ffdddd) <table border="5" cellpadding="10" bgcolor="#ffdddd"> <tr><td> <font size="7" color="red">くまさんのホームページ</font> </td></tr> </table> </div>
くまさんのホームページ |
<div align="center"> <hr size="5" width="550" color="green"> ←上のライン <font size="7" color="red"> くまさんのホームページ </font> <hr size="5" width="550" color="green"> ←下のライン </div>
<html><head> <title>くまさんのHP</title> </head> <body background="bg.gif"> <div align="center"> <!-- ++++++++++ タイトル ++++++++++ --> <hr size="5" width="550" color="green"> ←タイトル上ボーダー <font size="7" color="red"> くまさんのホームページ </font> <hr size="5" width="550" color="green"><br> ←タイトル下ボーダー <!-- ++++++++++ あいさつ ++++++++++ --> <table border="0"> <tr><td> <img src="kuma.gif"> </td><td> <font color="navy" face="HG創英角ポップ体"> ようこそ、くまさんのホームページへ、おいでくださいました。<br><br> まだ始めたばかりなので、内容はあまりありませんが、<br><br> すこしづつ充実させて行きますので、たびたびお立ち寄り下さい。 </font> </td></tr> </table><br> <!-- ++++++++++ 自己紹介 ++++++++++ --> <font size="5" color="#bb00ff"> ←文字を大きくした <b>★ 自 己 紹 介 ★</b> ←前後に★を付けた </font><br><br> ↓テーブル枠の厚み:5px 罫線間隔:10px 背景色#ddffff <table border="5" cellpadding="10" bgcolor="#ddffff"> <tr><td width="100">□なまえ</td> <td width="350"><i>□くまさん</i></td></tr> <tr><td>□住 所</td> <td>□兵庫県の中部の田園地帯</td></tr> <tr><td>□仕 事</td> <td>□パープリンの助手</td></tr> <tr><td>□年 齢</td> <td>□30歳代</td></tr> <tr><td>□趣 味</td> <td>□<u>パソコン・スキー</u>が特に好き</td></tr> <tr><td>□高 校</td> <td>□ぱーぷりん高校を何とか卒業</td></tr> <tr><td>□大 学</td> <td>□ぱーぷりん大学でパソコンを専攻</td></tr> </table><br> <!-- ++++++++++ メールを貼る ++++++++++ --> <a href="mailto:perplin@mh1.117.ne.jp"> <img src="mail.gif" border="0"> </a><br> </div> </body></html>
<table width="300" border="1" align="left"> ←回り込み設定 <tr height="50" align="center" valign="top"> ←1行目:行で、まとめて設定 <td>●●</td> <td>××</td> <td>★★</td> </tr> <tr height="50"> ←2行目:高さだけ、まとめて設定 <td align="left" valign="bottom">左・下</td> ←1列目:セルを設定 <td align="center" valign="top">中央・上</td> ←2列目:セルを設定 <td align="right" valign="middle">右・中</td> </tr> ←3列目:セルを設定 </table> 一行目はまとめて、中央で上寄せに設定<br> 2行目は、セル毎に変えてみました<br clear="all"> ←回り込みを解除 回込みを中断しました
●● | ×× | ★★ |
左・下 | 中央・上 | 右・中 |
<table width="350" border="1" align="right"> ←回り込み設定 <tr height="50" bgcolor="blue"> ←1行目:行で、まとめて設定 <td>●●</td> <td>××</td> <td>★★</td> </tr> <tr height=100> <td bgcolor="red">★★</td> ←1列目:セルを設定 <td background="bg.gif">●●</td> ←2列目:セルを設定 <td bgcolor="green">××</td> </tr> ←3列目:セルを設定 </table> 一行目はまとめて、blue を塗りました<br> 2行目は、セル毎に変えてみました<br clear="all"> ←回り込み中止 回込みを中断しました
●● | ×× | ★★ |
★★ | ●● | ×× |
<table border="1" align="left"> <colgroup width="100" align="center" valign="top"> ←1列目の属性 <colgroup span="2" width="50" align="right" bgcolor="pink"> ↑2,3列目の属性 <tr height="50"> <td>●●</td> <td>××</td> <td>★★</td> </tr> <tr height="40"> <td>××</td> <td>★★</td> <td>●●</td> </tr> <tr height="60"> <td>■■</td> <td>☆☆</td> <td>△△</td> </tr> </table><br> 1列目は、中央で上寄せに設定しました<br> 2、3列目は、まとめて右寄せで背景を pink にしました
●● | ×× | ★★ |
×× | ★★ | ●● |
■■ | ☆☆ | △△ |
<!-- ++++++++++ 自己紹介 ++++++++++ --> <font size="5" color="#bb00ff"> <b>★ 自 己 紹 介 ★</b> </font><br><br> <table border="5" cellpadding="10"> <colgroup width="100" align="center" bgcolor="#ffdddd"> ←1列目の属性 <colgroup width="350" bgcolor="#ffeeee"> ←2列目の属性 <tr><td>なまえ</td> ←1列目の全角空白を取った(以下同様) <td>□<i>くまさん</i></td></tr> <tr><td>住 所</td> <td>□兵庫県の中部の田園地帯</td></tr> <tr><td>仕 事</td> <td>□ぱーぷりんの助手</td></tr> <tr><td>年 齢</td> <td>□30歳代</td></tr> <tr><td>趣 味</td> <td>□<u>パソコン・スキー</u>が特に好き</td></tr> <tr><td>高 校</td> <td>□ぱーぷりん高校を何とか卒業</td></tr> <tr><td>大 学</td> <td>□ぱーぷりん大学でパソコンを専攻</td></tr> </table><br>
<div align="center"> ☆☆☆☆☆☆<br> これが ☆☆☆ <img src="momo.jpg" align="middle"> ☆☆☆ 普通の状態<br> ☆☆☆☆☆☆<br><br> <hr width="70%"> ☆☆☆☆☆☆<br> 横に30ピクセル ☆☆☆ <img src="momo.jpg" align="middle" hspace="30" vspace="20"> ☆☆☆ 縦に20ピクセル<br> ☆☆☆の空白部分を入れました </div>
![]() line2.gif | ||
![]() line3.gif | ||
![]() profile.gif |
![]() watashi1.gif |
![]() mail2.gif |
![]() tulip1.gif |
![]() tulip3.gif |
![]() tulip4.gif |
![]() hana1.gif |
![]() hana4.gif |
<div align="center"> <img src="line3.gif"> <table border="0"> <tr><td> <img src="kuma.gif"> </td><td> <font color="navy" face="HG創英角ポップ体"> ようこそ、くまさんのホームページへ、おいでくださいました。<br><br> まだ始めたばかりなので、内容はあまりありませんが、<br><br> すこしづつ充実させて行きますので、たびたびお立ち寄り下さい。 </font> </td></tr> </table> <img src="line3.gif"><br> </div>
![]() |
ようこそ、くまさんのホームページへ、おいでくださいました。 まだ始めたばかりなので、内容はあまりありませんが、 すこしづつ充実させて行きますので、たびたびお立ち寄り下さい。 |
<font size=5 color=#bb00ff> <img src="profile.gif" align="absmiddle"> ←左の画像(中央合わせ) <b> 自 己 紹 介 </b> <img src="watashi1.gif" align="absmiddle"> ←右の画像(中央合わせ) </font>
<img src="tulip1.gif"> <img src="tulip3.gif"> <img src="tulip4.gif"> 普通に3つのチューリップを並べました<br><br> <img src="tulip1.gif"> <img src="tulip3.gif" hspace=50> ←中央画像の両横を50px空けた <img src="tulip4.gif"> 中央のチューリップに50ピクセルの空白を空けました
<html><head> <title>くまさんのHP</title> </head> <body background="bg.gif"> <div align="center"> <!-- ++++++++++ タイトル ++++++++++ --> <hr size="5" width="550" color="green"> <font size="7" color="red">くまさんのホームページ</font> <hr size="5" width="550" color="green"> <!-- ++++++++++ あいさつ ++++++++++ --> <img src="hana1.gif" vspace="10"><br> ←花の画像 hana1.gif を挟みました <img src="line3.gif"> ←ライン line3.gif を入れました <table border="0"> <tr><td> <img src="kuma.gif"> </td><td> <font color="navy" face="HG創英角ポップ体"> ようこそ、くまさんのホームページへ、おいでくださいました。<br><br> まだ始めたばかりなので、内容はあまりありませんが、<br><br> すこしづつ充実させて行きますので、たびたびお立ち寄り下さい。 </font> </td></tr> </table> <img src="line3.gif"><br> ←ライン line3.gif を入れました <img src="hana4.gif" vspace=10><br> ←花の画像 hana4.gif を挟みました <!-- ++++++++++ 自己紹介 ++++++++++ --> <font size="5" color="#bb00ff"> <img src="profile.gif" align="absmiddle"> ↑バナー profile.gif を付けました <b> 自 己 紹 介 </b> <img src="watashi1.gif" align="absmiddle"> ↑バナー watashi1.gif を付けました </font><br><br> <table border="5" cellpadding="10"> <colgroup width="100" align="center" bgcolor="#ffdddd"></colgroup> <colgroup width="350" bgcolor="#ffeeee"></colgroup> <tr><td>なまえ</td> <td> <i>くまさん</i></td></tr> <tr><td>住 所</td> <td> 兵庫県の中部の田園地帯</td></tr> <tr><td>仕 事</td> <td> ぱーぷりんの助手</td></tr> <tr><td>年 齢</td> <td> 30歳代</td></tr> <tr><td>趣 味</td> <td> <u>パソコン・スキー</u>が特に好き</td></tr> <tr><td>高 校</td> <td> ぱーぷりん高校を何とか卒業</td></tr> <tr><td>大 学</td> <td> ぱーぷりん大学でパソコンを専攻</td></tr> </table><br> <img src="tulip1.gif"> <img src="tulip3.gif" hspace="50"> ←3つのチューリップを付けました <img src="tulip4.gif"><br><br> <img src="line2.gif"><br><br> ←ライン line2.gif を入れました <!-- ++++++++++ メールを貼る ++++++++++ --> <a href="mailto:perplin@mh1.117.ne.jp"> <img src="mail2.gif" border="0"> ←メールの画像を入れ替えました </a><br> </div> </body></html>