Nagai.AP TOP ■観光案内 ■行政案内 ■企業紹介 ■お店紹介
■イベント ■各種募集 ■会員紹介 ■サークル
ホームページの制作方法へBack

テーブル（表）を組む
  • テーブルとは
  • リンクのはり方
  • テーブルの応用
  • テーブルに色をつけよう
  • 細かな設定について


    • テーブルとは
    テーブルはホームページ上で表を作ります。たとえば下記のようなものです。

    赤

    		 　

    #FF0000

    青

    		 　

    #0000FF

    黄色

    		 　

    #FFFF00


    テーブルの作り方
    表題（キャプション） 表（テーブル）の題名。省略可能です。
    表（テーブル） 境界線で囲まれた表（テーブル）の本体
    セル 境界線で囲まれたマスの一個一個
    表見出し（テーブルヘッダー）指定するとセルの中のデータは強調表示されます。 テーブルデータ セルに入るデータです。
    行（ＲＯＷ） 横方向のセルの並び。それぞれの行はテーブルレコードと呼びます。
    列（ＣＯＬ） 縦方向のセルの並び。

    テーブルを書いてみましょう。この際注意することは
    <TABLE>---</TABLE> 外側に指定します。他のタグは内側に書きます。
    <CAPTION>---</CAPTION> に、表題を書きます。
    <TR>---</TR> テーブルレコードを指定。
    <TD>---</TD>テーブルデータを指定。

    <TABLE WIDTH="テーブルの大きさ" BORDER="枠線の太さ" CELLSPACING="罫線の太さ" CELLPADDING="余白">
    <TR><TD WIDTH="100%">    セルの中身</TD></TR></TABLE>
    簡単に入力すると、
    <TABLE WIDTH="    100" BORDER="1" CELLSPACING="2" CELLPADDING="0">
    <TR><TD WIDTH="100%">    セルの中身</TD></TR></TABLE>

    セルの中身

    たとえば

    <TABLE WIDTH="450" BORDER="1" CELLSPACING="2" CELLPADDING="0">
    <CAPTION ALIGN="TOP">    表の題名</CAPTION>
    <TR><TD WIDTH="50">    0-0</TD>
    <TD WIDTH="50">    行の見出し1</TD>
    <TD WIDTH="50">    行の見出し2</TD></TR>
    <TR>
    <TD WIDTH="50">    列の見出し１</TD>
    <TD WIDTH="50">    データ1-1</TD>
    <TD WIDTH="50">    データ2-1</TD></TR>
    <TR>
    <TD WIDTH="50">    列の見出し2</TD>
    <TD WIDTH="50">    データ1-2</TD>
    <TD WIDTH="50">    データ2-2</TD></TR>
    </TABLE>

    入力すると下記のようになります。

    表の題名
    0-0 行の見出し1 行の見出し2
    列の見出し１ データ1-1 データ2-1
    列の見出し2 データ1-2 データ2-2


    テーブルの応用
    強調、中央寄せ
    <TD></TD>の代わりに    <TH></TH>を使ったら、文字が強調、中央寄せになります。

    <TABLE BORDER="1" CELLSPACING="2" CELLPADDING="0">
    <TR>
    <TH WIDTH="100">1-1</TH><TD WIDTH="200">2-1</TD></TR>
    <TR>
    <TH WIDTH="100">1-2</TH>
    <TD WIDTH="200">2-2</TD></TR>
    <TR>
    <TH WIDTH="100">1-3</TH>
    <TD WIDTH="200">2-3</TD></TR>
    </TABLE>

    1-1 2-1
    1-2 2-2
    1-3 2-3

    罫線を修飾する
    <TABLE BORDER="    5" CELLSPACING="5" CELLPADDING="1">
    <TR>
    <TH WIDTH="100"><P ALIGN=LEFT>1-1</TH>
    <TD WIDTH="200">2-1</TD></TR>
    <TR>
    <TH WIDTH="100">1-2</TH>
    <TD WIDTH="200"><P><CENTER>2-1</CENTER></TD></TR>
    <TR>
    <TH WIDTH="100"><P ALIGN=RIGHT>1-3</TH>
    <TD WIDTH="200"><P ALIGN=RIGHT>2-1</TD></TR>
    </TABLE>

    1-1 2-1
    1-2

    2-1

    1-3

    2-1


    テーブルに色をつけよう
    それぞれのセルには色をつけることができます。    BGCOLOR="#カラーナンバー"

    白い文字

    とするには下記のように入力します。

    <TABLE WIDTH="150" BORDER="1" CELLSPACING="2" CELLPADDING="0">
    <TR>
    <TD WIDTH="100%" BGCOLOR="    #ff0000"><FONT COLOR="#FFFFFF">白い文字</FONT>
    </TD></TR></TABLE>

    応用としては下記のようになります。

    <TABLE WIDTH="450" BORDER="1" CELLSPACING="2" CELLPADDING="0" HEIGHT="71">
    <CAPTION ALIGN="TOP"><FONT COLOR="#FF0000">表の題名</FONT></CAPTION>
    <TR>
    <TD WIDTH="50"     BGCOLOR="#ffffff" HEIGHT="20">0-0</TD>
    <TD WIDTH="50"     BGCOLOR="#ff0000">行の見出し1</TD>
    <TD WIDTH="50"     BGCOLOR="#00ba00">行の見出し2</TD></TR>
    <TR>
    <TD WIDTH="50"     BGCOLOR="#ffff00" HEIGHT="20">列の見出し１</TD>
    <TD WIDTH="50"     BGCOLOR="#0000ff">データ1-1</TD>
    <TD WIDTH="50"     BGCOLOR="#0099ff">データ2-1</TD></TR>
    <TR>
    <TD WIDTH="50"     BGCOLOR="#ff9c05" HEIGHT="20">列の見出し2</TD>
    <TD WIDTH="50"     BGCOLOR="#00ff00">データ1-2</TD>
    <TD WIDTH="50"     BGCOLOR="#ff0099">データ2-2</TD></TR>
    </TABLE>

    表の題名
    0-0 行の見出し1 行の見出し2
    列の見出し１ データ1-1 データ2-1
    列の見出し2 データ1-2 データ2-2

    のようになります。カラーチャートはこちらを参照して下さい。

    細かな設定について
    折返の禁止
    セル内のテーブルデータの折返を禁止するには、    NOWRAPを使います。

    <TABLE WIDTH="350" HEIGHT="50" BORDER="1" CELLSPACING="2" CELLPADDING="0">
    <TR><TD>NOWRAP指定なしの場合：自動折返を許す</TD>
    <TD NOWRAP>NOWRAP指定ありの場合：折返を禁止する</TD></TR></TABLE>

    NOWRAP指定なしの場合：自動折返を許す NOWRAP指定ありの場合：折返を禁止する


    列のまたがるセル
    列がまたがるセルの数を指定するには    COLSPAN=を使います。

    １-１が１行２列にまたがる

    ２列にまたがる
    　 　

    <TABLE WIDTH="350" HEIGHT="50" BORDER="1" CELLSPACING="2" CELLPADDING="0">
    <CAPTION ALIGN="TOP">１-１が１行２列にまたがる</CAPTION>
    <TR>
    <TD WIDTH="50%"     COLSPAN="2"> <P>
    <CENTER>２列にまたがる</CENTER></TD></TR>
    <TR>
    <TD></TD><TD></TD></TR>
    </TABLE>

    行のまたがるセル
    行のまたがるセルの数を指定するには    ROWSPAN=を使います。

    １-１が２行にまたがる

    ２行にまたがる

    		 　
    　

    <TABLE WIDTH="350" HEIGHT="50" BORDER="1" CELLSPACING="2" CELLPADDING="0">
    <CAPTION ALIGN="TOP">１-１が２行にまたがる</CAPTION>
    <TR>
    <TD WIDTH="50%"     ROWSPAN="2">２行にまたがる<TD ROWSPAN=2></TD><TD></TD></TR>
    <TR><TD></TD></TR>
    </TABLE>

    これを応用すると、下記のようなものもできます。

    <TABLE WIDTH="450" BORDER="1" CELLSPACING="2" CELLPADDING="0" HEIGHT="93">
    <TR><TD     ROWSPAN="2">1</TD><TD COLSPAN="2">4</TD></TR>
    <TR><TD WIDTH="50"     ROWSPAN="2">5</TD>
    <TD WIDTH="50">6</TD></TR><TR><TD WIDTH="50" HEIGHT="20">2</TD>
    <TD     ROWSPAN="2">7</TD></TR><TR><TD COLSPAN="2">3</TD></TR>
    </TABLE>

    1 4
    5 6
    2 7
    3



    ホームページの制作方法へBack　次へ
    Nagai.AP TOP ■観光案内 ■行政案内 ■企業紹介 ■お店紹介
    ■イベント ■各種募集 ■会員紹介 ■サークル