BlogでHTML日進月歩

HTML及びCSSの理解を深め、Webサイト作成初級者からの脱却を目指します。

エントリー記事

スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

このページの一番上へ

テーブル

テキストを表形式で記述したいときには、table要素を用います。

HTMLソース及びスタイルシート
<table>
<tr><td>(a,1)</td> <td>(a,2)</td> <td>(a,3)</td></tr>
<tr><td>(b,1)</td> <td>(b,2)</td> <td>(b,3)</td></tr>
<tr><td>(c,1)</td> <td>(c,2)</td> <td>(c,3)</td></tr>
</table>
table { border:1px solid; }
td { border:1px solid; padding:5px; }
実際の表示
(a,1)(a,2)(a,3)
(b,1)(b,2)(b,3)
(c,1)(c,2)(c,3)

行や列の見出しには、td要素ではなくth要素を用います。

HTMLソース及びスタイルシート
<table>
<tr><th>行a,列1</th> <th>列2</th> <th>列3</th></tr>
<tr><th>行b</th> <td>(b,2)</td> <td>(b,3)</td></tr>
<tr><th>行c</th> <td>(c,2)</td> <td>(c,3)</td></tr>
</table>
table { border:1px solid; }
th,td { border:1px solid; padding:5px; }
実際の表示
行a,列1列2列3
行b(b,2)(b,3)
行c(3,2)(3,3)

caption要素を用いると、表にタイトルをつけることができます。また、音声ブラウザには表形式でデータを伝えることができないため、summary属性を用いて表の概要を記述することを推奨します。

<table summary="表の概要を記述">
<caption>表のタイトル</caption>
<tr><td>(a,1)</td> <td>(a,2)</td> <td>(a,3)</td></tr>
<tr><td>(b,1)</td> <td>(b,2)</td> <td>(b,3)</td></tr>
<tr><td>(c,1)</td> <td>(c,2)</td> <td>(c,3)</td></tr>
</table>

caption要素は、tableタグの直下に記述します。

縦の列に属性やスタイルシートを指定したいときにはcol要素を指定します。次の例では、1列目のclass属性をbold、3列目及び4列目のalign属性(*1)をcenterとしています(*2)

HTMLソース
<table summary="主要都市の天気、降水確率、最高気温及び最低気温の予報">
<caption>主要都市の天気予報</caption>
<col class="bold" />
<col />
<col span="2" align="center" />
<tr><th>都市名</th> <th>天気</th> <th>降水確率</th> <th>気温(最高/最低)</th></tr>
<tr><td>札幌</td> <td>雨</td> <td>80</td> <td>21/14</td></tr>
<tr><td>東京</td> <td>曇</td> <td>60</td> <td>21/18</td></tr>
<tr><td>名古屋</td> <td>曇</td> <td>50</td> <td>25/18</td></tr>
<tr><td>大阪</td> <td>晴</td> <td>30</td> <td>27/20</td></tr>
<tr><td>福岡</td> <td>曇</td> <td>40</td> <td>26/21</td></tr>
</table>
実際の表示
主要都市の天気予報
都市名天気降水確率気温(最高/最低)
札幌8021/14
東京6021/18
名古屋5025/18
大阪3027/20
福岡4026/21

一般的な視覚系ブラウザでは、表の罫線をセルごとに個別に表示します。スタイルシートを用いると、セル間の空白をゼロにして罫線を重ねて表示することができます。

スタイルシート
table { border-collapse:collapse; }
実際の表示
主要都市の天気予報
都市名天気降水確率気温(最高/最低)
札幌8021/14
東京6021/18
名古屋5025/18
大阪3027/20
福岡4026/21

テーブルによるレイアウトは、次のようなアクセス性の問題を抱えています。

表示に時間を要する

一般的な視覚系ブラウザでは、table要素の中身を全て読み込んでからディスプレイに表示されます。言い換えれば、中身を全て読み込むまではディスプレイに何も表示されません。特に、テーブル内に画像やスクリプトを指定している場合に顕著です。訪問者の立場で考えると、長時間全く何も表示されないよりも、少しずつ表示される方が安心できます。

ブロードバンドが普及しているとはいえ、地方を中心にナローバンド環境のユーザーも居ます(*3)。例えADSL環境であってもNTT局から遠く離れているために、実際の通信速度は1~2MB程度しかなく通信が不安定な環境も存在します。更に、テーブルには多くのタグを使用するためHTMLファイルの容量が大きくなる傾向があります。携帯電話環境の場合、アクセスしたページの容量で課金されることが多く訪問者に余計な出費をさせてしまうことになります。

文書構造が伝わらない
テーブルによるレイアウトは、table要素が有効な視覚系ブラウザでの閲覧を前提としているため、table関連要素をサポートしない携帯電話環境や、視覚的に閲覧できない音声ブラウザや点字ブラウザには文書構造が伝わらない恐れがあります。見出しリストを用いて記述することにより、これらの環境にも文書構造を的確に伝えることが可能になります。
(*1)
原則的にalign属性はHTML4.01で非推奨とされ、XHTML1.1で廃止されています。しかし、スタイルシートのtext-alignプロパティはcol要素に適用できない(th要素やtd要素には適用できます)ため、align属性の指定が認められています。
(*2)
利用環境によってはcol要素への属性やスタイルシートが適用されません。Operaでは1列目が太文字で表示されません。Gecko系ブラウザでは1列目が太文字で表示されず、3列目及び4列目のalign属性も反映されません。
(*3)
平成16年通信利用動向調査の結果によると、2004年末時点における世帯のブロードバンド利用率は62.0%。つまり、ユーザーのおよそ3分の1は未だナローバンド環境です。
スポンサーサイト

このページの一番上へ

連絡先、広告

copyright © 2005-2006 セロリ
Powered by FC2ブログ.
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。