HTMLの表作成編

ここでは、HTMLで使用する表の指定方法について解説します。

  1. TABLEタグの基本

    HTMLで表を使用する場合はTABLEタグを使用します。
    基本型(2行2列で1行目は表題)
    <TABLE BORDER=1>表の始まり BORDER=nで枠線の太さをピクセルで指定。0の場合線なし。
    <TR>1行目の始まり
    <TH>表題1</TH>表題1の指定
    <TH>表題2</TH>表題2の指定
    </TR>1行目の終わり
    <TR>2行目の始まり
    <TD>データ1</TD>データ1の指定
    <TD>データ2</TD>データ2の指定
    </TR>
    </TABLE>

    表題1 表題2
    データ1 データ2


  2. 表の色を指定してみよう!!

    最近のブラウザ(IE3.02、ネスケ4.0以降)では表の色を指定することができます。
    ただ、ブラウザによって見え方が違うので注意が必要です。(個人的には、IE4.01の方が、さまざまな表現ができるので、好きです。)
    基本形 IE,ネスケとも対応(だと思う)

    <TABLE BORDER=1>
    <TR>
    <TH BGCOLOR="#FF8040">表題1</TH>
    <TH BGCOLOR="#00FF00">表題2</TH>
    </TR>
    <TR>
    <TD BGCOLOR="#FF80C0">データ1</TD>
    <TD BGCOLOR="#FFFFFF">データ2</TD>
    </TR>
    </TABLE>

    表題1 表題2
    データ1 データ2

    特殊形(ネスケは見れないかもしれません)

    表題1 表題2
    データ1 データ2

    ソース1
    <TABLE BORDER="7" CELLSPACING="0" CELLPADDING="0" BGCOLOR="#00FFFF" BORDERCOLOR="#0000FF" BORDERCOLORLIGHT="#8080FF" BORDERCOLORDARK="#004080">

    表題1 表題2
    データ1 データ2

    そーす2
    <TABLE BORDER="7" BGCOLOR="#00FFFF" BORDERCOLOR="#0000FF" BORDERCOLORLIGHT="#8080FF" BORDERCOLORDARK="#004080">

  3. 表をうまく使おう!!

    テーブルはいろいろなケースで登場します。
    表だけでなく、HTMLのレイアウトを無理矢理やりたいときにも利用価値が有ります。 BORDER="0"で枠線が消えますからさまざまなレイアウトに対応できます。
    また、テーブル作成のときにいちいちタグを書くのが面倒なときは、エクセルとか表作成ソフトから表をあらかじめ作成し、HTMLに変換後、目的のHTMLに張りつけるのも結構いいです。


次は、HTMLで使用する表の指定方法です。!!