趣味友遊
表作ったり線引いたり



ちなみに上記の線は、

<hr size=△ width=□% color=blue>　で構成されています。

△□にはそれぞれ数字が入り、
△は線の太さ、□は画面に対しての長さを現しています。
カラーは好きな色で。


□１０％
□２０％
□５０％
□１００％

△１０
△２０
△５０





枠組みしたい！

そんなときに活躍するタグが、


<table border=△><tr><td>○○○</td></tr></table>


テーブルタグです。


　△　に入るのは数字で枠の太さを変化させます。


　１　
○○○
　５　
○○○
　１０　
○○○
　５０　
○○○



というわけで・・・

<table border=10>
<tr><td>
<font style=background=paleturquoise size=6 color=indigo>趣味友遊</font>
</td></tr>
</table>

趣味友遊


こうなります。




さらに文字を中央に表示するセンタータグで、
テーブルタグごと囲ってあげると・・・

<center>
 <table border=10>
<tr><td>
<font style=background=paleturquoise size=6 color=indigo>アホ管理人</font>
</td></tr>
</table>
</center>

アホ管理人


こうなるんですね〜！



そろそろ頃合でしょうか。

この辺りでまだワクワクドキドキしている方は、
今後もタグでＨＰを作っていけるかもしれません。

なんだこりゃ！？　めんどくさくてやってられん！
という方は早々にブログ、またはＨＰ作成ソフトの購入をお勧めいたします。

でもね、趣味友遊はこうやって作ってるんだよ。
だからあんまりむちゃいわないでね。


面白くなってきた人は次に進みましょう。






よーし！　ちょっと難しくなるよ。

実は、テーブルタグを使用して下記のような表を作ることができます。

　１２
３３３３３３３３３３
４４４４４４４４４４




まず基本のテーブルタグがこれ。


<table border=□><tr><td></td></tr></table>


これは枠組みでも紹介しましたが、
これを使用することで表が作成できます。

というか、本来は表作製のためのタグで、
最小の単位で使用すれば枠として機能するのです。


　□　には数字が入り、これが枠の太さの決定でした。


そして実は、
<tr>と</tr>　が行を指定し、
<td>と</td>　が列を指定するのです。


これだけではわからないので、実際に表にして理解しましょう。



<table border=3><tr><td>月曜日 </td></tr></table>　←　最小単位

一行一列
月曜日


<table border=3><tr><td> 月曜日</td><td>火曜日 </td></tr></table>

一行二列
月曜日火曜日


<table border=3><tr> <td>月曜日</td><td> 火曜日</td><td>水曜日 </td></tr></table>

一行三列
月曜日火曜日水曜日


一行に列を増やしたい場合は　<tr>と</tr>　の中に　<td></td>　を足していけばよいのです。





さらに行を増やしたい場合は、


<table border=3>
<tr><td>月曜日 </td></tr>
<tr><td>げつようび </td></tr>
</table>

二行一列
月曜日
げつようび


<table border=3>
<tr><td>月曜日</td> <td>火曜日</td></tr>
<tr><td>げつようび</td><td>かようび</td></tr>
</table>

二行二列
月曜日火曜日
げつようびかようび


<table border=3>
<tr><td>月曜日</td> <td>火曜日</td><td>水曜日 </td></tr>
<tr><td>げつようび</td><td>かようび</td><td>すいようび</td></tr>
<tr><td>Monday</td><td>Tusday</td><td>Wednesday</td></tr>
</table>

三行三列
月曜日火曜日水曜日
げつようびかようびすいようび
MondayTuesdayWednesday


このように、表の行を増やしたい時は、
<table></table>の間に、<tr></tr>を増やしていけばよいのです。


<center>
<table border=3>
<tr><td>月曜日</td><td>火曜日</td><td>水曜日</td></tr>
<tr><td>げつようび</td><td>かようび</td><td>すいようび</td></tr>
<tr><td>Monday</td><td>Tusday</td><td>Wednesday</td></tr>
</table>
</center>

三行三列
月曜日火曜日水曜日
げつようびかようびすいようび
MondayTuesdayWednesday

もちろんテーブルタグをセンタータグで囲めば、真ん中に表示できます。






次に列の結合のタグです。


<table border=3>
<tr><td>１</td><td>２</td><td>３</td><td>４</td><td>５</td></tr>
<tr><td>１</td><td>２</td><td>３</td><td>４</td><td>５</td></tr>
</table>

１２３４５
１２３４５


たとえば上記のようなひとつの行に５列ある行が２行あります。



この表の一行目の列を結合したい場合・・・


<table border=3>
<tr><td colspan=5>１</td></tr>
<tr><td>１</td><td>２</td><td>３</td><td>４</td><td>５</td></tr>
</table>

１
１２３４５



一列目を　２　と　３　の結合に分けたい場合・・・


<table border=3>
<tr><td colspan=2>１</td><td colspan=3>２</td></tr>
<tr><td>１</td><td>２</td><td>３</td><td>４</td><td>５</td></tr>
</table>

１２
１２３４５


と、こんな感じで colspan=（結合したい数値）　が活躍します。

このタグを、結合したいと思う　<td ></td>　の始まりに付け加えてあげます。

１行目の<td ></td>は２個ですが、
実質は２行目の５個と同じということです。





次に行の結合のタグです。


<table border=3>
<tr><td>１</td><td>２</td><td>３</td><td>４</td><td>５</td></tr>
<tr><td>１</td><td>２</td><td>３</td><td>４</td><td>５</td></tr>
</table>

１２３４５
１２３４５


やはり、上記のようなひとつの行に５列ある行が２行あります。

この表の一列目の１行目と２行目を結合したい場合・・・


<table border=3>
<tr><td rowspan=2>１</td><td>２</td><td>３</td><td>４</td><td>５</td></tr>
<tr><td>２</td><td>３</td><td>４</td><td>５</td></tr>
</table>


１２３４５
２３４５


<table border=3>
<tr><td rowspan=5>１</td><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>
<tr><td>２</td><td>３</td><td>４</td><td>５</td></tr>
<tr><td>２</td><td>３</td><td>４</td><td>５</td></tr>
</table>

１２３４５
２３４５
２３４５
２３４５
２３４５


と、こんな感じで rowspan=（結合したい数値）　が活躍します。

このタグを、結合したいと思う　<td ></td>　の始まりに付け加えてあげます。

一度書いた１が５回分、１の列を補ってくれます。





基本的に上記のタグを覚えておけば、
組み合わせることで複雑な表もできます。


<table border=5>
<tr><td rowspan=3>あ</td><td colspan=4>い</td><td rowspan=5>う</td></tr>
<tr><td>え</td><td>お</td><td>か</td><td rowspan=2>き</td></tr>
<tr><td>く</td><td>け</td><td>こ</td></tr>
<tr><td colspan=3 rowspan=3>さ</td><td colspan=2>し</td></tr>
<tr><td>す</td><td>せ</td></tr>
<tr><td colspan=6>そ</td></tr>
</table>

あ
rowspan=3		い
colspan=4		う
rowspan=5
えおかき
rowspan=2
くけこ
さ
colspan=3
rowspan=2		し
colspan=2
すせ
そ
colspan=6


こんなに複雑なのは使いませんから、覚える必要はまったくなし。
理解しようと頑張った人はご苦労様。

次は写真や画像を挿入してみましょう！



次へ


趣味友遊的ホームページ講座
五目の部屋
TOP
inserted by FC2 system