HTML【table要素編】 2008
10/25
土曜日
 今日は小糠雨降りそうな、まったりした日ですね。のんびり、ゆったり過ごすのがいい。

 ブログ作りではテーブルっていう要素を使って、このブログも書くことが多いけれど、ちょっと曖昧だったし、それぞれの属性を完全把握しているわけじゃなかったのでね、
今回は完全掌握したぞ。
 そこで『HTML&CSS できる大辞典』を引っ張り出して、確認してみた。

 なんじゃ、こんなことか、簡単じゃない、ってやつですね。僕が後々、自分のために忘れないためにサンプル交えて記述しよう。

 誰も全然興味ないだろうからね、マスターベーション、ドッピュンの世界だな。 アハハ、下品きわまりない・・・
表示イメージ html
◇普通に何も考えずにIBMホームページビルダーで2列2行の表を作ると、味も素っ気もない、でしょ。
1行1列 1行2列
2行1列 2行1列
<TABLE border="1" width="100%">
<TBODY>
<TR>
<TD>1行1列</TD>
<TD>1行2列</TD>
</TR>
<TR>
<TD>2行1列</TD>
<TD>2行1列</TD>
</TR>
</TBODY>
</TABLE>
◇それで、少しは変化を持たせたい、まず表には外枠的な表があって、それぞれ中にマス目として「セル」がある。trが行、tdが列要素ですね。
【Q1】
 200ピクセル幅の2行2列の表を作り、表の外枠(周囲)を緑で3ピクセル、1行目セル枠は赤色、2行目はセル枠は青、背景は黄色で、列の幅は50%ずつに固定した表を作れ。

1R1C 1R2C
2R1C 2R2C
【A1】
<TABLE border="3" width="200" bordercolor="green">
<TBODY>
<TR bordercolor="RED">
<TD width="50%">1R1C</TD>
<TD width="50%">1R2C</TD>
</TR>
<TR bordercolor="blue">
<TD bgcolor="yellow">2R1C</TD>
<TD bgcolor="yellow">2R2C</TD>
</TR>
</TBODY>
</TABLE>

【Q2】
 Q1のサイズのままで、表の外枠5ピクセルでセルの間の隙間は不要とし、紫色ですっきりしたエクセル的な表を作れ。ただし、セルと文字の余白を8ピクセルとすること。


1R1C 1R2C
2R1C 2R2C
【A2】
<TABLE border="5" width="200" bordercolor="purple" cellpadding="8" cellspacing="0">
<TBODY>
<TR>
<TD width="50%">1R1C</TD>
<TD width="50%">1R2C</TD>
</TR>
<TR>
<TD>2R1C</TD>
<TD>2R2C</TD>
</TR>
</TBODY>

 うーん、全然おもしろくないでしょ、いやいや付き合ってもらうぞ。

【Q3】
 frame属性(表全体を囲む枠線の表示方法)を9種類の属性を述べ、どのような表示となるか、図示せよ。



【A3】
<TABLE border="1" width="100%" bordercolor="purple"
frame="XXXXX" cellspacing="0">

XXXXXの部分を以下に記述することで枠線の表示方法が変更できる。

1R1C

above
上端のみ

1R1C

below
下端のみ

1R1C

hsides
上端と下端

1R1C

box
周囲

1R1C

lhs
左端のみ

1R1C

rhs
右端のみ

1R1C

vsides
左端と右端

1R1C

border
周囲

1R1C

void
外枠なし

 「おもしろくないでしょ」、なんて言いながら僕が飽きてきた・・・まだ、他の属性も在るのだけれどね、飽き飽きしてきた、理解するのは簡単だけど、タイプするのが面倒くさいわ。やあめチンコロだね。  (身勝手なヤツ<心の声>)

 そうそう、生ビールでも飲もう・・・   じゃ。
Copyright (C) 2008 Shougo Iwasa. All Rights Reserved.