１．表組みの活用
（１）基本的な表組み
ホームページ内にもワープロ文書と同様に表組み（テーブル）を表示させる ことができます。・書き方
＜ＴＡＢＬＥ ＢＯＲＤＥＲ＞ 〜 ＜／ＴＡＢＬＥ＞ … 表組みの開始、終了 ＜ＴＲ＞ 〜 ＜／ＴＲ＞ … 一行分の記述 ＜ＴＨ＞ 〜 ＜／ＴＨ＞ … 項目名 ＜ＴＤ＞ 〜 ＜／ＴＤ＞ … データ |
・ＨＴＭＬ文
|
<H2>基本的な表組</H2> <H4>縦の表</H4> <TABLE BORDER> <TR><TH>英語</TH><TD>９０点</TD></TR> <TR><TH>国語</TH><TD>８５点</TD></TR> <TR><TH>数学</TH><TD>９５点</TD></TR> </TABLE> <H4>横の表</H4> <TABLE BORDER> <TR><TH>英語</TH><TH>国語</TH><TH>数学</TH></TR> <TR><TD>９０点</TD><TD>８５点</TD><TD>９５点</TD></TR> </TABLE> |
（２）複数行、列にまたがる項目
・書き方
＜ＴＨ ＲＯＷＳＰＡＮ＝“行数”
ＣＯＬＳＰＡＮ＝“列数”＞ 〜 ＜／ＴＨ＞ … 項目名
＜ＴＤ ＲＯＷＳＰＡＮ＝“行数”
ＣＯＬＳＰＡＮ＝“列数”＞ 〜 ＜／ＴＤ＞ … データ
|
・ＨＴＭＬ文
|
<H4>複数行、列にまたがる項目</H4> <TABLE BORDER> <TR><TH ROWSPAN="3">必修</TH><TH>英語</TH><TD>９０点</TD></TR> <TR> <TH>国語</TH><TD>８５点</TD></TR> <TR> <TH>数学</TH><TD>９５点</TD></TR> <TR><TH ROWSPAN="2">選択</TH><TH>世界史</TH><TD>７５点</TD></TR> <TR> <TH>物理</TH><TD>８０点</TD></TR> <TR><TH COLSPAN="2">合計</TH> <TD>４２５点</TD></TR> </TABLE> |
（３）セル内の位置指定
セル内の表示位置を設定できます。・書き方
＜ＴＲ ＡＬＩＧＮ＝“左右位置”
ＶＡＬＩＧＮ＝“上下位置”＞ 〜 ＜／ＴＲ＞ … 列全体
＜ＴＨ ＡＬＩＧＮ＝“左右位置”
ＶＡＬＩＧＮ＝“上下位置”＞ 〜 ＜／ＴＨ＞ … 項目名
＜ＴＤ ＡＬＩＧＮ＝“左右位置”
ＶＡＬＩＧＮ＝“上下位置”＞ 〜 ＜／ＴＤ＞ … データ
左右位置： ｌｅｆｔ、ｃｅｎｔｅｒ、ｒｉｇｈｔ
（項目名はｃｅｎｔｅｒ、データはｌｅｆｔが標準）
上下位置： ｔｏｐ、ｍｉｄｄｌｅ、ｂｏｔｔｏｍ
（ｍｉｄｄｌｅが標準）
|
・ＨＴＭＬ文
|
<H4>セル内の位置指定</H4> <TABLE BORDER> <TR><TH COLSPAN="2">科目</TH> <TH>得点</TH><TH>備考</TH></TR> <TR><TH ROWSPAN="3">必修</TH><TH>英語</TH><TD ALIGN="right">９０点</TD> <TD ROWSPAN="3" VALIGN="top">・３科目必修<BR>・５０点未満は不可</TD></TR> <TR> <TH>国語</TH><TD ALIGN="right">８５点</TD></TR> <TR> <TH>数学</TH><TD ALIGN="right">９５点</TD></TR> <TR><TH ROWSPAN="2">選択</TH><TH>世界史</TH><TD ALIGN="right">７５点</TD> <TD ROWSPAN="2" VALIGN="top">・４科目から２科目選択</TD></TR> <TR> <TH>物理</TH><TD ALIGN="right">８０点</TD></TR> <TR><TH COLSPAN="2">合計</TH> <TD>４２５点</TD> <TD ALIGN="center">−</TD></TR> </TABLE> |
（４）表の大きさ、線の太さの設定
表の大きさ、線の太さ等はブラウザが自動的に決めますが、オプションの指 定により変更することができます。・書き方
＜ＴＡＢＬＥ ＷＩＤＴＨ ＝“横幅”
ＨＥＩＧＨＴ＝“縦幅”＞ 〜 ＜／ＴＡＢＬＥ＞
… 表の大きさ
横幅：ピクセル数、または％
縦幅：ピクセル数、または％
＜ＴＡＢＬＥ ＣＥＬＬＰＡＤＤＩＮＧ＝“ピクセル数”＞ … セル内マージン
〜 ＜／ＴＡＢＬＥ＞
＜ＴＡＢＬＥ ＢＯＲＤＥＲ＝“ピクセル数” …外枠線の太さ
ＣＥＬＬＳＰＡＣＩＮＧ＝“ピクセル数”＞ …罫線の太さ
〜 ＜／ＴＡＢＬＥ＞
|
・ＨＴＭＬ文
|
<H2>表の大きさ、線の太さ</H2> <H4>横幅の大きさ、枠線の太さ、セル内のマージン</H4> <TABLE BORDER="5" WIDTH="50%" CELLPADDING="10"> <TR><TH>英語</TH><TD>９０点</TD></TR> <TR><TH>国語</TH><TD>８５点</TD></TR> <TR><TH>数学</TH><TD>９５点</TD></TR> </TABLE> <H4>縦幅の大きさ、罫線の太さ</H4> <TABLE BORDER HEIGHT="30%" CELLSPACING="5"> <TR><TH>英語</TH><TH>国語</TH><TH>数学</TH></TR> <TR><TD>９０点</TD><TD>８５点</TD><TD>９５点</TD></TR> </TABLE> |
［応 用］
表組みの応用
・ＨＴＭＬ文
|
<CENTER> <H2> <TABLE BORDER="3"><TR><TH BGCOLOR="#ffcc33">表組の応用</TH></TR> </TABLE></H2> <TABLE BORDER="5"> <TR><TD><IMG SRC="photo.jpg" WIDTH="144" HEIGHT="103"></TD></TR> </TABLE> <TABLE BORDER="0" CELLPADDING="15"> <TR> <TD WIDTH="350"><H4>額縁効果</H4>表組の外枠を太くし、セル内にイメージを貼り付けることで額縁のような効果を出すことができます。 <H4>２段組</H4>また、表組の外枠の線を消すことでワープロと同じように文書の２段組ができます。</TD> <TD WIDTH="350" VALIGN="top"><H4>セル内の背景色</H4>Ｎｅｔｓｃａｐｅ３．０以上の場合は、セルに背景色を設定することができます。 <P>このようなちょっとした応用でホームページが随分と華やかなものになります。 </P></TD></TR> </TABLE> </CENTER> |