HOME

--- 項目 --- リスト 見出し テーブル 引用 フォーム フレーズ要素 アンカー リスト２ マークアップ CSS 印刷用スタイル レイアウト テキスト 画像置換 body要素

テーブル

表形式データをマークアップする場合に（のみ）使用する。

表形式データとは

• カレンダー
• スプレッドシート
• グラフ
• スケジュール

慎重に使用しないとアクセシビリティ上の問題を引き起こす可能性がある。
スクリーンリーダーはテーブルをうまく読み上げられないことがある。

○スクリーンリーダーはテーブルをうまく読み上げられないことがある。
○レイアウトに使用したテーブルは画面の小さなデバイスにとって邪魔になる。

マークアップ

アクセシビリティを向上させるために。

• <caption>タグによって表のタイトルを意味的に正しくマークアップする。
• <table>タグにsummary属性を追加して、テーブルに含まれているものに関する目的や内容について説明する
• 見出しに<th>を使い、構造上の意味を与えるとともに、他のセルと異なるスタイルを適用できるようにする。
• ヘッダセルと<td>タグ内にあるデータとを結びつけるheaders属性を利用する。
  スクリーンリーダーは論理的な順序で見出しとデータ情報を読み上げることができるようになる。
  その際、各<th>タグには固有のid属性値を追加する必要がある。
• 合成音声で読み上げられるには長すぎる見出しについて、abbr属性を追加する。
  しかくけいブラウザに対してはもとの内容のまま、実際に読み上げられる内容を好みの長さに短くできる。

<table summary="This table is a chart of all Boston Red Sox World Series wins.">
    <caption>Boston Red Sox World Series Championships</caption>
    <tr>
        <th id="year">Year</th>
        <th id="opponent">Opponent</th>
        <th id="record" abbr="Record">Season Record (W-L)</th>
    </tr>
    <tr>
        <td headers="year">1918</td>
        <td headers="oppnent">Chicago Cubs</td>
        <td headers="record">75-51</td>
    </tr>
    <tr>
        <td headers="year">1916</td>
        <td headers="oppnent">Brooklyn Robins</td>
        <td headers="record">91-63</td>
    </tr>
    <tr>
        <td headers="year">1915</td>
        <td headers="oppnent">Philadelphia Phillies</td>
        <td headers="record">101-50</td>
    </tr>
    <tr>
        <td headers="year">1912</td>
        <td headers="oppnent">New York Giants</td>
        <td headers="record">105-47</td>
    </tr>
</table>

▲このページのトップへ

<thead>、<tfood>、<tbody>

<table>
    <thead>
        <tr>
        ・・・テーブルヘッダ・・・
        </tr>
    </thead>
    <tfoot>
        <tr>
        ・・・テーブルフッタ・・・
        </tr>
    </tfoot>
    <tbody>
        <tr>
        ・・・テーブルデータ行・・・
        </tr>
        <tr>
        ・・・テーブルデータ行・・・
        </tr>
        <tr>
        ・・・テーブルデータ行・・・
        </tr>
    </tbody>
</table>

<thead>と<tfoot>を使用すると、テーブルヘッダおよびフッタ情報をデータ行の前に配置することができる。
これらの要素はテーブルに構造的な意味を追加するだけでなく、<tr>要素に余計なclass属性を追加せずにCSSで見栄えを変更するのに役立つ「スタイル・フック」を提供する。

CSS

tbody {
	background-color: gray;
	}

<tbody>要素がなければ、グレーの背景にしたい各<tr>要素にclass属性を追加しなければならない。

※スタイル・フック

CSSによって特定の部位の見栄えを制御する際、そのセレクタとして機能し得る「手がかり」。もし同じ文書中に一度しか登場しない要素の見栄えにCSSルールを適用する場合、そのセレクタは非常にシンプルに要素名だけで構成することが可能だが、複数回登場する要素の見栄えを変えようと思ったら、対象を他と区別するためにid/class属性を追加する必要が生じる。
スタイル・フックを(X)HTML文書に加えると言うことは、コンテンツそのものとは異なる情報を付け加えることを意味するので、できるだけ避けたほうが好ましいと言える。その意味では新たにid/class属性を加えるよりも、（可能であれば）文書自体に本来備わっている構造をスタイル・フックとして用いる、つまり子孫セレクタを活用するなどしたほうが良い。

▲このページのトップへ

CSS

グリッドの作成

<table>タグにborder="1"を入れることをやめ、CSSを使用する
<th>および<td>セルの二つの辺（右辺と底辺）に1ピクセルのボーダーを追加する。

th, td {
	border-right: 1px solid #999;
	border-bottom: 1px solid #999;
	}

つじつまを合わせるためには、個々のセルの2辺のみにボーダーを追加するのが、4辺に等しくボーダーを持つグリッドを作成するためのキーポイントである。
もし、各セルの4辺にボーダーを追加したとしたら、セルとセルが接する上辺と左辺でボーダーが重なってしまう。
ボーダーがまだ引かれていない、テーブル全体における上辺と左辺にテーブル要素を用いてボーダーを追加する。

table {
	border-top: 1px solid #999;
	border-left: 1px solid #999;
	}
th, td {
	border-right: 1px solid #999;
	border-bottom: 1px solid #999;
	}

隙間を埋める

ほとんどのブラウザが持つデフォルトのマージンのために、ボーダー間にできるわずかな隙間を解消するために、テーブル要素にborder-collapseプロパティを利用する。

table {
	border-top: 1px solid #999;
	border-left: 1px solid #999;
	border-collapse: collapse;
	}
th, td {
	border-right: 1px solid #999;
	border-bottom: 1px solid #999;
	}

簡略化されたCSS

Macintosh版Internet Explorer以外のほとんどのブラウザではCSSを簡略化できる。
IE for Macではボーダーの一部が重なり合って太くなる。これはIE for Macがborder-collapseプロパティに対応していないため。
IE for Macは開発が終了しているブラウザでありSafariに取って代わられつつあること、また、表示上の問題であってテーブルの持つ機能に変わりはないこと、などの理由から、シンプルな方法を採用しても支障ない。

table {
	border-collapse: collapse;
	}
th, td {
	border: 1px solid #999;
	}

スペースを空ける

table {
	border-collapse: collapse;
	}
th, td {
	padding: 10px;
	border: 1px solid #999;
	}

▲このページのトップへ

見出しのカスタマイズ

table {
	border-top: 1px solid #999;
	border-left: 1px solid #999;
	border-collapse: collapse;
	}
caption {
	font-family: Arial, sans-serif;
	color: #933;
	padding-bottom: 6px;
	}
th, td {
	padding: 10px;
	border-right: 1px solid #999;
	border-bottom: 1px solid #999;
	}
th {
	font-family: Verdana, sans-serif;
	background: #ccc;
	}

背景画像

th {
	font-family: Verdana, sans-serif;
	background: url(th_stripe.gif);
	}

▲このページのトップへ

アイコンを割り当てる

非視覚的手段でブラウジングする人々を支援するために割り当てた、各<th>要素のid属性値を利用し、各<th>タグに特定のアイコンを背景画像として表示させる。
アイコン画像の表示がCSSで制御されているため、サイトのデザインを変更したりアップデートする際に簡単に交換できる。
マークアップの変更は不要。

th {
	font-family: Verdana, sans-serif;
	}
#year {
	padding-left: 26px;
	background: #ccc url(icon_year.gif) no-repeat 10px 50%;
	}
#opponent {
	padding-left: 26px;
	background: #ccc url(icon_opp.gif) no-repeat 10px 50%;
	}
#record {
	padding-left: 26px;
	background: #ccc url(icon_rec.gif) no-repeat 10px 50%;
	}

背景に関する見栄えを指定するのに、より簡単な、一括して指定する方法を取っている。
例：background: #ccc url(icon_rec.gif) no-repeat 10px 50%;
しかし、backgroundプロパティを使用し、かつ背景色の指定がなく背景画像のみを指定した場合は、<th>要素のほうのbackgroundプロパティで設定した背景色の設定が上書きされることになる。

共通のルールをまとめる

th要素へのスタイルで各見出しに共通の指定（ここでは、パディング、背景色、位置）をし、#year、#opponent、#recordへのスタイル指定はそれらに固有の内容（ここでは、画像パス）だけにする。

th {
	font-family: Verdana, sans-serif;
	padding-left: 26px;
	background-color: #ccc;
	background-repeat: no-repeat;
	background-position: 10px 50%;
	}
#year {
	background-image: url(icon_year.gif);
	}
#opponent {
	background-image: url(icon_opp.gif);
	}
#record {
	background-image: url(icon_rec.gif);
	}

▲このページのトップへ