HTML-テーブル使用法
ホームページの中では、表を使用することが出来ます。
この表をテーブルといいます。
テーブルを作成するにはどうすればいいの？
テーブルを作成するには、以下の３つのタグを使います。
<TABLE>タグ・・・テーブル全体を指定します。
<TD>タグ・・・テーブルの１行を指定します。
<TR>タグ・・・テーブルの１項目（１セル）を指定します。
セルの幅、高さは、各行、各列の中で最も大きなセルに合わせて自動的に
調整されます。
<TD>の代わりに<TH>を用いると、
そのセルは太字でセンタリングされて表示されます。
テーブルのアトリビュート（属性）について
<TABLE>タグには、横幅や高さといった様々な属性
（これをアトリビュートと言います）を指定することが出来ます。
テーブルタグに指定するアトリビュートのうち代表的なものを下図に記述します。
profile.htmlの作成 （テーブルを使ってみる）
早速テーブルタグを使って自己紹介のページ「profile.html」を作成してみましょう。
<HTML>
<HEAD>
<TITLE>ホームページの練習</TITLE>
</HEAD>
<BODY BGCOLOR="moccasin">
<CENTER>
<FONT SIZE="7" COLOR="blueviolet">
<B>私のプロフィール</B></FONT>
<BR><BR>
<TABLE BORDER="1">
<TR>
<TD>自己紹介</TD>
</TR>
<TR>
<TD>名前</TD>
<TD>5年は寝たろう</TD>
</TR>
<TR>
<TD>年齢</TD>
<TD>ほどよく中年</TD>
</TR>
<TR>
<TD>趣味</TD>
<TD>食べ歩き・飲み歩き</TD>
</TR>
<TR>
<TD>特技</TD>
<TD>死んだふり</TD>
</TR>
</TABLE>
</CENTER>
</BODY>
</HTML>
↑上で説明したタグを打ち込みブラウザで表示するとこうなります
profile.htmlの変更
今度は、先程作成した「profile.html」のテーブルを
「自己紹介」とその右隣の空欄を結合。
「趣味」と「特技」の項目が内容的に似ているので「趣味・特技の１行」する。
の２点を変更することにチャレンジしてみましょう！
<HTML>
<HEAD>
<TITLE>ホームページの練習</TITLE>
</HEAD>
<BODY BGCOLOR="moccasin">
<CENTER>
<FONT SIZE="7" COLOR="blueviolet">
<B>私のプロフィール</B></FONT>
<BR><BR>
<TABLE BORDER="1">
<TR>
<TD COLSPAN="2">自己紹介</TD>
</TR>
<TR>
<TD>名前</TD>
<TD>5年は寝たろう</TD>
</TR>
<TR>
<TD>年齢</TD>
<TD>ほどよく中年</TD>
</TR>
<TR>
<TD ROWSPAN="2">趣味・特技</TD>
<TD>食べ歩き・飲み歩き</TD>
</TR>
<TR>
<TD>特技</TD> ←この行を削除する
<TD>死んだふり</TD>
</TR>
</TABLE>
</CENTER>
</BODY>
</HTML>
テーブルの横方向項目を結合するにはどうすればいいの？
横方向の項目を結合するにはCOLSPAN="n"
を使用します。nには結合する項目の個数を指定します。
テーブルの縦方向項目を結合するにはどうすればいいの？
縦方向の項目を結合するにはROWSPAN="n"
を使用します。nには結合する項目の個数を指定します。
↑上で説明したタグを打ち込みブラウザで表示するとこうなります
投稿者 hana : 2006年02月08日 11:00