■表を作る

表を作る時に使います。
実質は大手のサイトなどを見るとほとんどはレイアウトのために使われています。
個人的にフレームはあまり好きではないので、表を使ってフレームのように作るのがスッキリしていて好きです。
ただし、管理が面倒になりますが・・・

SOURCE

<HTML>
<HEAD>
<TITLE>テーブルについて</TITLE>
<BODY>
<TABLE>
表の内容を書く。表を作成する基本のタグ。最初と最後に記述します。
</TABLE>
</BODY>
</HTML>

■表の内容を作る

<TD></TD>で囲まれた部分が一つのセルになります。
<TR></TR>で囲むことで一行の表ができます。

SOURCE

<HTML>
<HEAD>
<TITLE>テーブルについて</TITLE>
<BODY>
<TABLE>
<TR><TD>島津</TD><TD>義弘</TD><TR>
<TR><TD>伊集院</TD><TD>忠朗</TD><TR>
</TABLE>
枠線がない状態で表示されます。
島津義弘
伊集院忠朗
<TABLE BORDER>
<TR><TD>島津</TD><TD>義弘</TD><TR>
<TR><TD>伊集院</TD><TD>忠朗</TD><TR>
</TABLE>
BORDERをつけると枠線が表示されます。
通常はセルの左詰、幅は自動で変わります。
島津義弘
伊集院忠朗
</BODY>
</HTML>

■表の位置を指定

表全体を左、右に揃えます。

SOURCE

<HTML>
<HEAD>
<TITLE>テーブルについて</TITLE>
<BODY>
<TABLE BORDER ALIGN="left">
<TR><TD>島津</TD><TD>義弘</TD><TR>
<TR><TD>伊集院</TD><TD>忠朗</TD><TR>
</TABLE>
テキストを回り込ませることができます。
島津義弘
伊集院忠朗
討ち死に
討ち死に


<TABLE BORDER ALIGN="right">
<TR><TD>島津</TD><TD>義弘</TD><TR>
<TR><TD>伊集院</TD><TD>忠朗</TD><TR>
</TABLE>
テキストを回り込ませることができます。
島津義弘
伊集院忠朗
討ち死に
討ち死に

</BODY>
</HTML>


■表に見出しを付ける

表セルの見出しを作るときに使います。
縦横を比較するような場合に使う。

SOURCE

<HTML>
<HEAD>
<TITLE>テーブルについて</TITLE>
<BODY>
<TABLE BORDER>
<TR><TH></TH>><TH>島津家</TH><TH>大友家</TH><TR>
<TR><TH>兵力</TH><TD>5千</TD><TD>3万</TD><TR>
<TR><TH>総大将</TH><TD>島津義久</TD><TD>大友宗麟</TD><TR>
</TABLE>
島津家大友家
兵力5千3万
総大将島津義久大友宗麟
</BODY>
</HTML>

■表をにタイトルをつける

上下にタイトルを入れたい場合に使います。

SOURCE

<HTML>
<HEAD>
<TITLE>テーブルについて</TITLE>
<BODY>
<TABLE BORDER>
<CAPTION ALIGN="top">耳川の合戦戦力比</CAPTION>
<TR><TH></TH>><TH>島津家</TH><TH>大友家</TH><TR>
<TR><TH>兵力</TH><TD>5千</TD><TD>3万</TD><TR>
<TR><TH>総大将</TH><TD>島津義久</TD><TD>大友宗麟</TD><TR>
</TABLE>
耳川の合戦戦力比
島津家大友家
兵力5千3万
総大将島津義久大友宗麟
<TABLE BORDER>
<CAPTION ALIGN="bottom">耳川の合戦戦力比</CAPTION>
<TR><TH></TH>><TH>島津家</TH><TH>大友家</TH><TR>
<TR><TH>兵力</TH><TD>5千</TD><TD>3万</TD><TR>
<TR><TH>総大将</TH><TD>島津義久</TD><TD>大友宗麟</TD><TR>
</TABLE>
耳川の合戦戦力比
島津家大友家
兵力5千3万
総大将島津義久大友宗麟
</BODY>
</HTML>

■セルを結合する。

複数のセルを結合して1つのセルとして使います。

SOURCE

<HTML>
<HEAD>
<TITLE>テーブルについて</TITLE>
<BODY>
<TABLE BORDER>
<TR><TD COLSPAN="2">耳川の合戦戦力比</TD></TR>
<TR><TD>島津家</TD><TD>大友家</TD><TR>
<TR><TD>5千</TD><TD>3万</TD><TR>
<TR><TD>島津義久</TD><TD>大友宗麟</TD><TR>
</TABLE>
耳川の合戦戦力比
大名家島津家大友家
兵力5千3万
総大将島津義久大友宗麟

<TABLE BORDER>
<TR><TD ROWSPAN="4">耳川の合戦戦力比</TD></TR>
<TR><TD>島津家</TD><TD>大友家</TD><TR>
<TR><TD>5千</TD><TD>3万</TD><TR>
<TR><TD>島津義久</TD><TD>大友宗麟</TD><TR>
</TABLE>
耳川の合戦戦力比
島津家大友家
5千3万
島津義久大友宗麟
</BODY>
</HTML>

■表の大きさを変える。

表のサイズを指定できます。
セルの大きさも個別に指定できます。ピクセルか%で指定します。

SOURCE

<HTML>
<HEAD>
<TITLE>テーブルについて</TITLE>
<BODY>
<TABLE BORDER WIDTH="50%" HEIGHT="300">
<TR><TD ROWSPAN="4">耳川の合戦戦力比</TD></TR>
<TR><TD>島津家</TD><TD>大友家</TD><TR>
<TR><TD>5千</TD><TD>3万</TD><TR>
<TR><TD>島津義久</TD><TD>大友宗麟</TD><TR>
</TABLE>
耳川の合戦戦力比
島津家大友家
5千3万
島津義久大友宗麟
</BODY>
</HTML>

■枠線の太さを変える

枠線の太さを変えたり、セルの中のマージンを変えることができます。
これを使うと微妙な間隔を作りだすことができます。

  • BORDER="枠線の太さ。デフォルトは1ピクセル"
  • CELLSPACING="全てのセルの枠の太さ。デフォルトは2ピクセル"
  • CELLPADDING="枠線と表中のテキストとのマージン。デフォルトは1ピクセル"

SOURCE

<HTML>
<HEAD>
<TITLE>テーブルについて</TITLE>
<BODY>
<TABLE BORDER="8">
<TR><TD>島津</TD><TD>義弘</TD><TR>
<TR><TD>伊集院</TD><TD>忠朗</TD><TR>
</TABLE>
島津義弘
伊集院忠朗
<TABLE BORDER="1" CELLSPACING="8">
<TR><TD>島津</TD><TD>義弘</TD><TR>
<TR><TD>伊集院</TD><TD>忠朗</TD><TR>
</TABLE>
島津義弘
伊集院忠朗
<TABLE BORDER="1" CELLPADDING="8">
<TR><TD>島津</TD><TD>義弘</TD><TR>
<TR><TD>伊集院</TD><TD>忠朗</TD><TR>
</TABLE>
島津義弘
伊集院忠朗
</BODY>
</HTML>

■セル中のテキスト位置を指定する

セルの水平方向で左、中央、右を指定。さらに垂直方向で上、中央、下を指定できます。
<TR>タグで使うと指定した列全てに対して有効になります。

  • ALIGN="left,center,rightを指定"
  • VALIGN="top,middle,bottom,baselineを指定"

SOURCE

<HTML>
<HEAD>
<TITLE>テーブルについて</TITLE>
<BODY>
<TABLE BORDER="1" WIDTH="400" HEIGHT="400">
<TR ALIGN="center"><TD>島津</TD><TD>義久</TD><TR>
<TR><TD align="right">島津</TD><TD align="center">義弘</TD><TR>
<TR><TD valign="top">島津</TD><TD valign="bottom">歳久</TD><TR>
<TR><TD align="center" valign="bottom">島津</TD><TD align="right" valign="top">家久</TD><TR>
<TR align="center"><TD valign="baseline">伊集院</TD><TD align="left" valign="middle">忠朗</TD><TR>
</TABLE>
島津義久
島津義弘
島津歳久
島津家久
伊集院忠朗
</BODY>
</HTML>

■セル中の改行を制限する。

アルファベットで文を打つと単語単位で勝手に改行されますが、
<TD>か<TH>にNOWRAPを指定することで改行されなくなります。
セルの幅を指定するWIDTHよりも優先されます。

SOURCE

<HTML>
<HEAD>
<TITLE>テーブルについて</TITLE>
<BODY>
<TABLE BORDER="1" WIDTH="200">
<TR><TH>NAME</TH><TH>ADDRESS</TD><TR>
<TR><TD NOWRAP>shimadu yoshihiro</TD><TD NOWRAP>
japan
sastuma<BR>
utijolt
josyu<BR>
</TD><TR>
</TABLE>
<TABLE BORDER="1" WIDTH="200">
<TR><TH>NAME</TH><TH>ADDRESS</TD><TR>
<TR><TD>shimadu yoshihiro</TD><TD>
japan
sastuma<BR>
utijolt
josyu<BR>
</TD><TR>
</TABLE>
NAMEADDRESS
shimadu yoshihirojapan sastuma
utijo josyu
NAMEADDRESS
shimadu yoshihirojapan sastuma
utijo josyu
</BODY>
</HTML>

■表やセルに色をつける

表とセルには別々に色をつけることができます。
利用次第では線の色を変えてるように見えたりと色々と使い用途があります。

SOURCE

<HTML>
<HEAD>
<TITLE>テーブルについて</TITLE>
<BODY>
<TABLE BORDER="1" BGCOLOR="#FF0000" WIDTH="300" HEIGHT="200">
<TR><TD>島津</TD><TD>義弘</TD><TR>
<TR><TD>伊集院</TD><TD>忠朗</TD><TR>
</TABLE>
島津義弘
伊集院忠朗
<TABLE BORDER="0" CELLSPACING="3" BGCOLOR="#FF0000" WIDTH="300" HEIGHT="200">
<TR><TD>島津</TD><TD>義弘</TD><TR>
<TR><TD>伊集院</TD><TD>忠朗</TD><TR>
</TABLE>
島津義弘
伊集院忠朗
</BODY>
</HTML>

■表の背景に画像を使う

表やセルの背景に画像を張り込みます。
使い方しだいでは本来なら表は角ばっているのに角を丸くしたりと、アイデア次第でいろいろ使えます。

SOURCE

<HTML>
<HEAD>
<TITLE>テーブルについて</TITLE>
<BODY>
<TABLE>
<TABLE WIDTH="150" HEIGHT="150" BORDER="0" CELLSPACING="0" CELLPADDING="0">
<TR HEIGHT="50">
<TD WIDTH="50" BACKGROUND="lu.gif"> </TD>
<TD WIDTH="50" BGCOLOR="#ff0000"> </TD>
<TD WIDTH="50" BACKGROUND="ru.gif"> </TD>
</TR>
<TR HEIGHT="50" WIDTH="150">
<TD ALIGN="CENTER" BGCOLOR="#ff0000" COLSPAN="3">
<FONT COLOR="#FFFFFF">丸くして見たり</FONT></TD>
</TR>
<TR HEIGHT="50">
<TD WIDTH="50" BACKGROUND="ld.gif"> </TD>
<TD WIDTH="50" BGCOLOR="#ff0000"> </TD>
<TD WIDTH="50" BACKGROUND="rd.gif"> </TD>
</TR>
</TABLE>
   
丸くして見たり
   
</BODY>
</HTML>