＜TABLE＞タグの２回目です。
前回の説明で<TABLE>タグの基本を説明しましたが、今回は＜TABLE＞タグの属性です。
今回取り上げるのは次の属性です。
①ＢＯＲＤＥＲ
②ＣＥＬＬＳＰＡＣＩＮＧ
③ＣＥＬＬＰＡＤＤＩＮＧ
④ＷＩＤＴＨ
⑤ＨＥＩＧＨＴ
⑥ＡＬＩＧＮ
①ＢＯＲＤＥＲ属性は前回に少し説明しましたが、今回のものは単に枠線を表示するだけではなく、その外枠の線の太さを指定するものです。枠線の太さはピクセル数で指定します。
さっそくコードを見てみましょう。
例 <TABLE BORDER="5"><TR><TH>将軍</TH><TH>軍師</TH><TH>勝敗</TH></TR><TR><TD>項羽</TD><TD>范増</TD><TD>負け</TD></TR><TR><TD>劉邦</TD><TD>張良</TD><TD>勝ち</TD></TR></TABLE>
上のコード例ではＢＯＲＤＥＲ＝"5"とすることで、表の枠線（外枠）の太さを５ピクセルに設定しています。
さすがに５ピクセルもの太さがあると影の部分がはっきりし、立体の線であることがよくわかると思います。
前回のようにBORDERと書くのみで、数値を設定しないとき、いわゆるデフォルト値は１ピクセルです。
デフォルトとは不履行あるいは怠慢などの意味です。コンピュータでこの言葉が使われる場合には、本来、入力・設定すべき部分をユーザーが入力・設定しないことをいいます。もっとも、このケースの場合、もともと設定しなくていいことになっているので、本来の意味のデフォルトといえるかどうかはわかりません。むしろ設定はオプションであるといった方が適切なのかもしれません。
デフォルト値は、デフォルトのときに、使われる値にそう変化がなかったり、あるいは未設定であるとエラーが起きたりする場合に、未入力・未設定の部分を標準的な値で補完する、そのときの値をいいます。
②ここで、もし表の内側の区切り線も太くしたいのであれば、CELLSPACINGという属性を使います。
下の例ではCELLSPACING＝３を指定しております。CELLSPACINGのデフォルト値は２ですので、先の例と比べて１ピクセル太い線となっています。
例 <TABLE BORDER="5"
CELLSPACING="3"><TR><TH>将軍</TH><TH>軍師</TH><TH>勝敗</TH></TR><TR><TD>項羽</TD><TD>范増</TD><TD>負け</TD></TR><TR><TD>劉邦</TD><TD>張良</TD><TD>勝ち</TD></TR></TABLE>
CELLとは独房、細胞、蜂の巣の巣室などの意味があります。この場合、Excelでもおなじみでしょうが、文字列が入る１つの枠線に囲まれた領域をいいます。上の例では９個のcellで構成されています。
つまり、本来の意味は、線の太さをかえているというより、cellの間隔（spacing）をかえているということになります。
③表と文字の間をもっと空けたいと思われるならば、同様にCELLPADDINGを使って空けてください。
例 <TABLE BORDER="5"
CELLSPACING="3"
CELLPADDING="2"><TR><TH>将軍</TH><TH>軍師</TH><TH>勝敗</TH></TR><TR><TD>項羽</TD><TD>范増</TD><TD>負け</TD></TR><TR><TD>劉邦</TD><TD>張良</TD><TD>勝ち</TD></TR></TABLE>
paddingとは詰め物という意味があるように、枠線と文字列の間のパッキングをイメージして考えるとわかりやすいでしょう。
先の二例と比べて、ほんの少し文字の周囲に空間ができたのがわかるでしょうか。
デフォルト値は１ですので１ピクセル分大きくなっています。
ｃｅｌｌは基本的に可変長で、同列の最大の長さの文字にあわせて作られます。
上の例のように文字長が同じではわかりにくいので、次のように列の文字長に違いがある場合でみていただきましょう。
例 <TABLE BORDER="5"
CELLSPACING="3" CELLPADDING="2"><TR><TH>将軍</TH><TH>軍師</TH><TH>勝敗</TH></TR><TR><TD>項羽</TD><TD>范増</TD><TD>四面楚歌で負け</TD></TR><TR><TD>高祖劉邦</TD><TD>韓信</TD><TD>勝ち</TD></TR></TABLE>
| 将軍 | 軍師 | 勝敗 |
|---|
| 項羽 | 范増 | 四面楚歌で負け | | 高祖劉邦 | 張良 | 勝ち |
このように、長い文字列にあわせてｃｅｌｌの幅が拡がります。それより短い文字列はデフォルトでセル内の左寄せとなっています。
＜ＴＡＢＬＥ＞タグの属性ではありませんので、ここでは説明しませんが、関連タグ、＜ＴＲ＞、＜ＴＨ＞、＜ＴＤ＞のALIGN属性を用いて行やセルごとにセンタリングや右寄せを設定させることができます。
さて、ここでもう少し全体的に、あるいは個別のセルを拡げたいときに使う属性を紹介しましょう。
ＷＩＤＴＨとＨＥＩＧＨＴがそのための属性です。
④例えば先の表を全体的に拡げて、横幅５００ピクセルの表にしてみましょう。
そのためにはWIDTH属性を用い、次のように設定します。
例 <TABLE WIDTH="500"
BORDER="5"
CELLSPACING="3" CELLPADDING="2"><TR><TH>将軍</TH><TH>軍師</TH><TH>勝敗</TH></TR><TR><TD>項羽</TD><TD>范増</TD><TD>四面楚歌で負け</TD></TR><TR><TD>高祖劉邦</TD><TD>蕭何・張良・韓信</TD><TD>勝ち</TD></TR></TABLE>
| 将軍 | 軍師 | 勝敗 |
|---|
| 項羽 | 范増 | 四面楚歌で負け | | 高祖劉邦 | 蕭何・張良・韓信 | 勝ち |
＜ＴＡＢＬＥ＞タグのＷＩＤＴＨ属性は上の表のように表全体の幅を指定しますが、<TＨ>や<TＤ>にもＷＩＤＴＨ属性があり、これらを指定することで、それぞれの列の幅を指定することができます。
この結果でわかるように、<TＨ>や<TＤ>のWIDTH属性でそれぞれのセルの広さを指定していないときには、自動的に各列の最長文字の長さの按分で振り分けられるようです。
また、ＷＩＤＴＨにはブラウザのウィンドウの幅を１００％とした比率で次のように指定することもできます。ブラウザのウィンドウの幅は、通常、画面の幅と同じです。
この方法を使うと広いウィンドウのときには広く、狭いウィンドウのときには、それにあわせて狭くなります。
例 <TABLE WIDTH="90%"
BORDER="5"
CELLSPACING="3" CELLPADDING="2"><TR><TH>君主</TH><TH>軍師</TH><TH>勝敗</TH></TR><TR><TD>項羽</TD><TD>范増</TD><TD>四面楚歌で負け</TD></TR><TR><TD>高祖劉邦</TD><TD>蕭何・張良・韓信</TD><TD>勝ち</TD></TR></TABLE>
⑤同様にHEIGHT属性によって、表の縦方向の長さ、つまり高さを指定することができます。
先の例の表を縦１００ピクセルの表にしてみましょう。
例 <TABLE
WIDTH="500"
HEIGHT="200" BORDER="5"
CELLSPACING="3" CELLPADDING="2"><TR><TH>将軍</TH><TH>軍師</TH><TH>勝敗</TH></TR><TR><TD>項羽</TD><TD>范増</TD><TD>四面楚歌で負け</TD></TR><TR><TD>高祖劉邦</TD><TD>蕭何・張良・韓信</TD><TD>勝ち</TD></TR></TABLE>
| 君主 | 軍師 | 勝敗 |
|---|
| 項羽 | 范増 | 四面楚歌で負け | | 高祖劉邦 | 蕭何・張良・韓信 | 勝ち |
この場合も＜TR＞＜TH＞＜TD＞でセルのHEIGHT属性を指定しないときには、行数（WIDTHでは文字数）に応じた按分で表が作られます。
特殊な場合にしか使わないと思いますが、縦の長さも画面との比率で指定することができます。
⑥最後にALIGN属性です。これは他のタグにもある、位置を設定するための属性ですが、横方向、つまり表の左寄せ、センタリング、右寄せを設定するためのものです。
いままでの例では見やすいように、すべての例をセンタリングして表示してきましたが、実際には、いままでのコードをALIGN属性を指定せずに実行すると、すべて左寄せされます。
先に述べたとおり、関連タグ、＜ＴＲ＞、＜ＴＨ＞、＜ＴＤ＞のALIGN属性は行やセルごとにセンタリングや右寄せを設定させるための属性で、名称は同じでも働きが違いますのでご注意ください。
|
構 文
<HTML>
<HEAD>
<TITLE>
</TITLE>
</HEAD>
<BODY>
<TABLE WIDTH="500"
HEIGHT="１00" BORDER="5"
CELLSPACING="3" CELLPADDING=”２”>
<TR><TH>１行目１列目</TH><TH>１行目２列目</TH><TH>１行目３列目</TH></TR>
<TR><TD>２行目１列目</TD><TD>２行目２列目</TD><TD>２行目３列目</TD></TR>
<TR><TD>３行目１列目</TD><TD>３行目２列目</TD><TD>３行目３列目</TD></TR>
</TABLE>
</BODY>
</HTML> |
使用例 <HTML>
<HEAD>
<TITLE>秦後の権力</TITLE>
</HEAD>
<BODY>
<TABLE WIDTH="500"
HEIGHT="２00" BORDER="5"
CELLSPACING="3" CELLPADDING=”２” ALIGN="CENTER">
<TR><TH>君主</TH><TH>軍師</TH><TH>勝敗</TH></TR>
<TR><TD>項羽</TD><TD>范増</TD><TD>四面楚歌で負け</TD></TR>
<TR><TD>高祖劉邦</TD><TD>蕭何・張良・韓信</TD><TD>勝ち</TD></TR>
</TABLE>
</BODY>
</HTML>
|
|
