▲TOPへ
はじめてのHTML・CGI


表の作成


表を作る

  • 下記のような線で囲まれた表(枠)を作成することが出来ます。
    この表はテーブルと言います。

    あ行か行
    あいうえおかきくけこ

  • 設定
    <TABLE BORDER>
    指定終了タグ</TABLE>

  • では、作成してみましょう。

    上記のように<TABLE>〜<TABLE>間には<TR>や<TD>も必要です。
    <TR>は表の横一行の始まりをあらわし、その行末は</TR>を用います。
    また<TD>はその中の表1つ(セル)の始まりをあらわし、セルの終わりには</TD>を指定します。
    <TD>内の文字を強調するときは、<TD>のかわりに<TH>を用います。
    すると強調文字(太文字)になり、指定をしなくともその文字はセル内中央に位置付けされます。

      
           ↑
    上図のように表が出来ます。

セルをまたがる表の作成

  • セルをまたがる表の作成方法

    あ行・か行
    あいうえおかきくけこ
    は行・ま行はひふへほ
    まみむめも

  • セルの設定

    <TD COLSPAN="2"> 横列のとき:上記「あ行・か行」
    <TD ROWSPAN="2"> 縦列のとき:上記「は行・ま行」

    ※数字の"2"は、またがるセルの数を指定

  • セルをまたがる表の作成方法

    あ行・か行
    あいうえおかきくけこ
    は行・ま行はひふへほ
    まみむめも

  • 縦と横を同時にまたがるとき

    <TD COLSPAN="2" ROWSPAN="2">
    ※数字の"2"は、またがるセルの数を指定


    下記は上記表のソースです。(表の部分のみ)
こういったことも出来る

  • 枠を表示しない方法

    <TABLE BORDER=0>

  • 枠の幅を指定する方法

    <TABLE WIDTH="90%">
    90%とは、ユーザーのブラウザ幅の90%幅で外枠を設定します。

  • セルに色を付ける方法

    色を付けたいセルの<TD>部分を<TD BGCOLOR="指定したい色">とする。
    指定したい色のところは#FFFFFFなど(直接カラーネームred等)を入力。
    基本的な256色の色コードは「色記号表」を参照下さい。
    ※姉妹ページ「すくすくランド」色記号表と同じです。(作成者が同じ為)

    上記の「枠を0」にし「枠幅を90%」で「セルに色を付ける」と下記のようなことも出来ます。

    ソース

    <TABLE BORDER=0 WIDTH="90%">
    <TR><TD BGCOLOR="#FF0000">一行目:ABCDEFG〜</TD></TR>
    <TR><TD BGCOLOR="#CCCCCC">二行目:あいうえお〜</TD></TR>
    <TR><TD BGCOLOR="#FF0000">三行目:012345〜</TD></TR>
    <TR><TD BGCOLOR="#CCCCCC">四行目:・・・・・</TD></TR>
    </TABLE>

    上記ソースで下記のようになります。

    一行目:ABCDEFG〜
    ニ行目:あいうえお〜
    三行目:012345〜
    四行目:・・・・・



▲TOPへ