初心者のためのホームページ作り 第46号

Web作成支援

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

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

今週<第46号>マガジンのおさらい

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

枠線の表示

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

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

属性機能
border数字指定した数値(ピクセル数)の太さを持った枠線を表示
framevoid枠線なし(デフォルト)
aboveテーブル全体の上側のみ枠線を表示
belowテーブル全体の下側のみ枠線を表示
hsidesテーブル全体の上下のみ枠線を表示
lhsテーブル全体の左側のみ枠線を表示
rhsテーブル全体の右側のみ枠線を表示
vsidesテーブル全体の左右のみ枠線を表示
boxテーブル全体の上下左右に枠線を表示
borderテーブル全体の上下左右に枠線を表示
rulesnone枠線なし(デフォルト)
groupsthead、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号」を参照してください。)



Valid XHTML 1.1! Copyright(C) 2002-2003 ばんばん banban@scollabo.com