第５章 リストとテーブル

１：リスト

HTMLでは、リストを作る要素もあります。
このリストには２種類あり、数字付きリストと数字無しリストにわかれます。
他に定義リストと言うのもあるのですが、あまり必要性がありません。
では実際に作ってみるのでみてください。

▲使用例▲

<UL>
<LI>ひとつめ
<LI>ふたつめ
<LI>みっつめ
</UL>

<UL TYPE="circle"> <LI>丸です。 </UL>

<UL TYPE="square"> <LI>四角です。 </UL>

<UL TYPE="disk"> <LI>黒丸です。 </UL>


<OL>
<LI>１番目
<LI>２番目
<LI>３番目
</OL>

<OL START="10" compact>
<LI>startによって、１０番目から始めることも可能
<LI>compactを指定すると小さくなる・・はずですがIEやNNではサポートされていません。
<LI VALUE="15">valueにて番号を変えることも可能。
</OL>

<OL TYPE="1"> <LI>一 <LI>二 <LI>三 </OL>

<OL TYPE="a"> <LI>一 <LI>二 <LI>三 </OL>

<OL TYPE="A"> <LI>一 <LI>二 <LI>三 </OL>

<OL TYPE="i"> <LI>一 <LI>二 <LI>三 </OL>

<OL TYPE="I"> <LI>一 <LI>二 <LI>三 </OL>



  • ひとつめ
  • ふたつめ
  • みっつめ
  • 丸です。
  • 四角です。
  • 黒丸です。
  1. １番目
  2. ２番目
  3. ３番目
  1. startによって、１０番目から始めることも可能
  2. compactを指定すると小さくなる・・はずですがIEやNNではサポートされていません。
  3. valueにて番号を変えることも可能。
  1. 一
  2. 二
  3. 三
  1. 一
  2. 二
  3. 三
  1. 一
  2. 二
  3. 三
  1. 一
  2. 二
  3. 三
  1. 一
  2. 二
  3. 三

また色をみつけねば（￣□￣；）！！

２：テーブル

テーブル。このページでもうじゃうじゃ登場しているのがおわかりでしょうか？
上の枠に囲まれたところがそうです。
さらに！それだけならテーブルはさほど使わないだろうとお思いでしょうが、実は凄く役に立ちます。
例えば枠を消し、背景色をなくせば見えなくなります。でも中身はちゃんと整列されているのです。
綺麗なページを作るのにこのテーブルは欠かすことは出来ません。是非覚えて使いましょう。
TR、TD要素は、終了タグを省略できますが、そうするとNetscapeでうまく表示されないことがあります。そういうときは閉じましょう。

▲使用例▲

<TABLE>
<TR><TH>表題1<TH>表題2<TH>表題3
<TR><TD>枠<TD>を<TD>消し
<TR><TD>背景色<TD>を<TD>透明に
<TR><TD>あっと<TD>いう間に<TD>整列されます
</TABLE>

<TABLE BORDER="3" BGCOLOR="LightYellow" ALIGN="Center">
<TR><TD>そして<TD>枠を<TD>付ければ
<TR BGCOLOR="LightBlue"><TD>ちゃんとした<TD>テーブルに<TD>なるのです
<TR><TD BORDERCOLORDARK="FUCHSIA" BORDERCOLORLIGHT="PURPLE">背景色も<TD BGCOLOR="Red">いろいろに<TD BORDERCOLOR="Blue">付けられます
</TABLE>

<TABLE HEIGHT="200" WIDTH="250" BORDER="2" BORDERCOLOR="HotPink" BACKGROUND="../image/sakura01.gif">
<TR><TD ALIGN="Left">a<TD ALIGN="Center">a<TD ALIGN="Right">a
<TR><TD VALIGN="Top">b<TD VALIGN="Middle">b<TD VALIGN="Bottom">b
<TR><TD WIDTH="50">&nbsp;<TD WIDTH="100">&nbsp;<TD WIDTH="50">&nbsp;
</TABLE>

こんなことも可能<FONT FACE="Wingdings">誑</FONT><BR>
<TABLE CELLSPACING="0" CELLPADDING="0" HEIGHT="60" WIDTH="60" ALIGN="RIGHT" BGCOLOR="LightBLUE" BORDER="1">
<TR HEIGHT="20"><TD ROWSPAN="2" BGCOLOR="Red" WIDTH="20">&nbsp;
<TD COLSPAN="2" BGCOLOR="Yellow">&nbsp;
<TR HEIGHT="20"><TD ALIGN="Center" VALIGN="MIDDLE" WIDTH="20">
<IMG SRC="../image/red.gif" WIDTH=10 HEIGHT=10 BORDER="0">
<TD ROWSPAN="2" BGCOLOR="Green" WIDTH="20">&nbsp;
<TR HEIGHT="20"><TD COLSPAN="2" BGCOLOR="Blue">&nbsp;
</TABLE>


表題1表題2表題3
枠を消し
背景色を透明に
あっという間に整列されます

そして枠を付ければ
ちゃんとしたテーブルになるのです
背景色もいろいろに付けられます

aaa
bbb
   

こんなことも可能誑
  
 
 


★INDEX★

Copyright(C) 風浪へぽぽ