メールマガジン「初心者のためのホームページ作り」でお伝えした内容を、「復習」の意味で掲載しています。テキストのみのマガジンと違って、実際のサンプルや画像を交えて解説していますので、理解が深まると思います。なお、疑問点や分からない点がありましたら、遠慮なく メールにてご質問ください。

プレーンテキスト版バックナンバー

今週＜第46号＞マガジンのおさらい

　　　　　　　　　　　　　　　　　   毎週金曜日配信　What's New 2003/4/4
〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓
　今週の課題 ■ XHTML講座　第10回 XHTML1.1実践 〜 テーブル

◆ 枠線の表示

テーブルで表示する属性は以下のとおりです。ただし、ブラウザによっては表示の見え方がかなり異なっています。設定の際には十分注意してください。

（ただし、border属性に関しては、ほとんどの視覚系ブラウザでサポートされています。）

属性	値	機能
border	数字	指定した数値（ピクセル数）の太さを持った枠線を表示
frame	void	枠線なし(デフォルト）
	above	テーブル全体の上側のみ枠線を表示
	below	テーブル全体の下側のみ枠線を表示
	hsides	テーブル全体の上下のみ枠線を表示
	lhs	テーブル全体の左側のみ枠線を表示
	rhs	テーブル全体の右側のみ枠線を表示
	vsides	テーブル全体の左右のみ枠線を表示
	box	テーブル全体の上下左右に枠線を表示
	border	テーブル全体の上下左右に枠線を表示
rules	none	枠線なし（デフォルト）
	groups	thead、tbody、tfoot、colgroup などの境界線に枠線を表示
	rows	横列の境界線に枠線を表示
	cols	縦列の境界線に枠線を表示
	all	すべての境界線に枠線を表示

枠線表示を設定する属性のサンプル　 （あなたのブラウザではどのように表示されますか？）

table要素における枠線表示を設定する属性の利用は、border属性を除いて現実的には残念ながらブラウザ依存となり、必ずしも望むような表示を設定することは無理があります。

かと言って、スタイルシートで設定したとしても、やはりブラウザ依存となります。スタイルシートが利用できない環境では、当然枠線は表示できません。

しかしながら、現在の XHTMLにおけるブラウザ利用状況を考えれば、スタイルシートは非常に利用度の高い「ツール」であり、使わない手はありません。つまり、XHTMLをサポートする視覚系ブラウザでは、間違いなくスタイルシートをサポートしているからです。

◆ 枠線の色表示

結論から申し上げれば、XHTMLで枠線に色を表示する要素や属性は存在していません。どうしても枠線に色を表示させたい場合は、スタイルシートを利用する以外に方法がありません

HTMLでは、MSIE独自タグとして bordercolor属性なるものがありましたが、当然XHTMLでは利用することはできません。

セル	セル	セル	セル
セル	セル	セル	セル
セル	セル	セル	セル
セル	セル	セル	セル

左のテーブルは、スタイルシートによって枠線に色を設定したものです。あなたのブラウザではどのように表示されているでしょうか？。

スタイルシートの構文は以下のとおりです。

table td { border: 1px solid #090 }

◆ 背景色の表示

枠線の色の表示と同様、XHTMLでは背景色を設定する要素や属性はありません。HTMLでは、bgcolor属性が利用できましたが、XHTMLではサポートされておりません。

背景色を設定する場合も、スタイルシートを利用する以外に方法がありません。

セル	セル	セル	セル
セル	セル	セル	セル
セル	セル	セル	セル
セル	セル	セル	セル

左のテーブルは、スタイルシートによって背景色を設定したものです。あなたのブラウザではどのように表示されているでしょうか。

スタイルシートの構文は以下のとおりです。

table { background-color: #ffc }

枠線色と背景色を設定したテーブル   （詳しいXHTML構文は、メールマガジン「第46号」を参照してください。）