４．１．4 表組み
|
●表を作るタグ
<TABLE>〜</TABLE>
<TR>〜</TR>：<TD>〜</TD>：<TH>〜</TH>
|
このタグを使うと､表を作成することができます。表の縦列、横列を作成するために
<TR>と<TD>というタグがあります。
- <TABLE>〜</TABLE>・・・表の枠組みの設定
- <TR>〜</TR>・・・表の縦列の設定
- <TD>〜</TD>・・・表の横列の設定
- <TH>〜</TH>・・・表の見出し表示
また、枠の太さを変えるためのオプションもあります。
<TABLE BORDER=数値>・・・表の枠組みの太さの設定
数値が大きくなればなるほど、枠線は太くなります。数値を０にすると枠が消えます。
|
| （１）エディタで入力し、練習してみましょう。２×２の表を作ってみましょう。尚、枠の太さは３にします。 |
<HTML>
<HEAD>
<TITLE>ホームページ練習８</TITLE>
</HEAD>
<BODY>
表の作成（１）<BR>
<TABLE
BORDER=3>
<TR>
<TD>身長</TD>
<TD>体重</TD>
</TR>
<TR>
<TD>１７１ｃｍ</TD>
<TD>６５ｋｇ</TD>
</TR>
</TABLE>
</BODY>
</HTML> |
|
| （２）ファイルを保存して、ブラウザで確認してみましょう。 |
| |
|
| その他のオプションについて |
| 表を作成すること上で便利なオプションがあります。これらは、<TD>と<TH>に関するオプションです。 |
| ROWSPAN=数値 |
セルをつなぎます(縦方向)。数値はつなげるセルの数です。 |
| COLSPAN=数値 |
セルをつなぎます(横方向)。数値はつなげるセルの数です。 |
| ALIGN=RIGHTかCENTERかLEFT |
つないだセルに表示する文字の位置(右、中央、左)を決めます。 |
| VALIGN=TOPかMIDDLEかBOTTOM |
つないだセルに表示する文字の位置(上、中央、下)を決めます。 |
|
| （１）エディタで入力し、練習してみましょう |
<HTML>
<HEAD>
<TITLE>ホームページ練習９</TITLE>
</HEAD>
<BODY>
横のセルをつないだ表<BR>
<TABLE BORDER=1
ALIGN=CENTER>
<TR>
<TD COLSPAN=2
ALIGN=CENTER>性別</TD>
</TR>
<TR>
<TD>おとこ</TD>
<TD>おんな</TD>
</TR>
</TABLE>
</BODY>
</HTML> |
|
| （２）ファイルに保存して、ブラウザで表示してみましょう。 |
| （３）次に縦のセルをつないだ表を作りましょう |
<HTML>
<HEAD>
<TITLE>ホームページ練習１０</TITLE>
</HEAD>
<BODY>
縦のセルをつないだ表<BR>
<TABLE
BORDER=1>
<TR>
<TD ROWSPAN=2
VALIGN=MIDDLE>性別</TD>
<TD>おとこ</TD>
</TR>
<TR>
<TD>おんな</TD>
</TR>
</TABLE>
</BODY>
</HTML> |
|
| （２）ファイルに保存して、ブラウザで表示してみましょう。 |
| |
|
| |
|
|
|
