Tables

前章に戻る
Layout

これは CSS Getting Started チュートリアルの第 13 章です。ここではさらに高度なセレクタと、テーブルのスタイルづけに特有の方法を述べます。テーブルを含む新しいサンプル文書と、スタイルシートを作ってください。

表（テーブル）について

テーブルは、縦軸 / 横軸のデータ構造を持つ情報の並びです。テーブルは複雑になることがあり、複雑なテーブルはブラウザによって違った表示になる場合があります。

文書を設計する際には、テーブルを細かな情報同士の関係性を示すのに使ってください。そうすれば、ブラウザによって少し違った表示がされても問題ありません。目的が依然はっきりしているためです。

精密な視覚的レイアウトを作るために、テーブルの変わった使い方をしないでください。そういった目的には、このチュートリアルの前のページにある技法（レイアウト）のほうが適しています。

テーブルの構造

テーブルでは、情報の一つ一つが セル（cell） に入れて表示されます。

ページを横切るように並ぶセルが、行（row）を作ります。

テーブルによっては、行はグループ化されているかもしれません。テーブルの初めにある特殊な行グループが、ヘッダー（header）です。テーブルの終わりにある特殊な行グループが、フッター（footer）です。テーブルの中心的な行が ボディ（body）で、これも、グループに入っているかもしれません。

ページ下方に向けて並ぶセルは列（column）を作りますが、CSS のテーブルでは、列の用途には制限があります。

例

Selectors ページの Selectors based on relationships の表には、行が 5 つ、セルが 10 個あります。

最初の行はヘッダーです。残りの 4 つの行はボディです。フッターはありません。

列は 2 つあります。

このチュートリアルでは結果が予測できるような、簡単なテーブルしか扱いません。簡単なテーブルでは、各セルがどれも 1 つの行と 1 つの列を占めます。セルが 1 行や 1 列以上に 伸びた（span）複雑なテーブルにも CSS を使えますが、そういったテーブルはこの基本チュートリアルの範疇を超えています。

ボーダー

セルにはマージンがありません。

セルにはボーダーとパディングがあります。デフォルトでは、ボーダーはテーブルの border-spacing プロパティで決められます。テーブルの border-collapse プロパティを collapse にすると、間隔を完全に取り除くことができます。

例

テーブルが 3 つあります。

左のテーブルには 0.5em 幅のボーダーがあります。中央のテーブルには幅ゼロのボーダーがあります。右のテーブルには折り畳まれた（collapsed）ボーダーがあります:
（表示例は、この wiki の制限により、正しく表示されていないかもしれません）

Clubs	Hearts
Diamonds	Spades

Clubs	Hearts
Diamonds	Spades

Clubs	Hearts
Diamonds	Spades

キャプション

<caption> 要素はテーブル全体に当てられるラベルです。デフォルトでは、テーブルの一番上に表示されます。

底部に移動させるには、caption-side プロパティを bottom にします。プロパティは継承されるので、テーブルに設定することも、祖先要素に設定することもできます。

キャプションの文字にスタイルをつけるには、通常のテキスト用のプロパティを使ってください。

例

このテーブルは底部にキャプションがあります

（表示例は、この wiki の制限により、正しく表示されていないかもしれません）

#demo-table > caption {
  caption-side: bottom;
  font-style: italic;
  text-align: right;
}

Suits

Clubs	Hearts
Diamonds	Spades

空のセル

テーブル要素に empty-cells: show; と定義すると、空のセル（これはつまりセルのボーダーと背景です）を表示できます。

隠すには empty-cells: hide; と定義します。こうすると、セルの親要素に背景があるとき、空のセル越しに見ることができます。

例

次のテーブルは薄い緑の背景を持っています。各セルは薄い灰色の背景と濃い灰色のボーダーを持っています。

左のテーブルでは、空セルが見えています。右のテーブルでは隠されています:

	Hearts
Diamonds	Spades

	Hearts
Diamonds	Spades

詳細

テーブルについての詳しい情報は、CSS 仕様書の Tables をご覧ください。

そこにある情報はこのチュートリアルを超えたものになりますが、そこでは、複雑なテーブルに影響する、ブラウザ間の相違については触れていません。

実習: テーブルのスタイルづけ

新しい HTML 文書 doc3.html を作ってください。次の内容をコピー＆ペーストしてください。スクロールさせて、コピー漏れがないか確認してください:

<!DOCTYPE html>
<html>
  <head>
    <title>Sample document 3</title>
    <link rel="stylesheet" href="style3.css">
  </head>
  <body>
    <table id="demo-table">
      <caption>Oceans</caption>
      <thead>
        <tr>
          <th></th>
          <th>Area</th>
          <th>Mean depth</th>
        </tr>
        <tr>
          <th></th>
          <th>million km<sup>2</sup></th>
          <th>m</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <th>Arctic</th>
          <td>13,000</td>
          <td>1,200</td>
        </tr>
        <tr>
          <th>Atlantic</th>
          <td>87,000</td>
          <td>3,900</td>
        </tr>
        <tr>
          <th>Pacific</th>
          <td>180,000</td>
          <td>4,000</td>
        </tr>
        <tr>
          <th>Indian</th>
          <td>75,000</td>
          <td>3,900</td>
        </tr>
        <tr>
          <th>Southern</th>
          <td>20,000</td>
          <td>4,500</td>
        </tr>
      </tbody>
      <tfoot>
        <tr>
          <th>Total</th>
          <td>361,000</td>
          <td></td>
        </tr>
        <tr>
          <th>Mean</th>
          <td>72,000</td>
          <td>3,800</td>
        </tr>
      </tfoot>
    </table>
  </body>
</html>

新しいスタイルシート style3.css を作ります。次の内容をコピー＆ペーストしてください。スクロールして、コピー漏れがないことを確認します:

/*** Style for doc3.html (Tables) ***/

#demo-table {
  font: 100% sans-serif;
  background-color: #efe;
  border-collapse: collapse;
  empty-cells: show;
  border: 1px solid #7a7;
}

#demo-table > caption {
  text-align: left;
  font-weight: bold;
  font-size: 200%;
  border-bottom: .2em solid #4ca;
  margin-bottom: .5em;
}


/* basic shared rules */
#demo-table th,
#demo-table td {
  text-align: right;
  padding-right: .5em;
}

#demo-table th {
  font-weight: bold;
  padding-left: .5em;
}


/* header */
#demo-table > thead > tr:first-child > th {
  text-align: center;
  color: blue;
}

#demo-table > thead > tr + tr > th {
  font-style: italic;
  color: gray;
}

/* fix size of superscript */
#demo-table sup {
  font-size: 75%;
}

/* body */
#demo-table td {
  background-color: #cef;
  padding:.5em .5em .5em 3em;
}

#demo-table tbody th:after {
  content: ":";
}


/* footer */
#demo-table tfoot {
  font-weight: bold;
}

#demo-table tfoot th {
  color: blue;
}

#demo-table tfoot th:after {
  content: ":";
}

#demo-table > tfoot td {
  background-color: #cee;
}

#demo-table > tfoot > tr:first-child td {
  border-top: .2em solid #7a7;
}

文書をブラウザで開きます。次の内容に似たものになるでしょう:

Oceans

	Area	Mean depth
	million km²	m
Arctic:	13,000	1,200
Atlantic:	87,000	3,900
Pacific:	180,000	4,000
Indian:	75,000	3,900
Southern:	20,000	4,500
Total:	361,000
Mean:	72,000	3,800

表示されたテーブルとスタイルシートにあるルールを比較して、各行の働きを理解できているか確かめてください。自信のないルールを見つけたら、そのルールをコメントアウトしてブラウザを更新し、何が起きるか見てみましょう。このテーブルに関する注意点は次のとおりです:
- キャプションはテーブルのボーダーより外側に置かれています。
- もしオプションでフォントの最小値を設定していれば、 km² の上付き文字に影響します。
- 空セルが 3 つあります。そのうち2つは、テーブルの背景を透過しています。 3 つ目は背景と上辺にボーダーを持ちます。
- コロンはスタイルシートで追加しています。

チャレンジ

スタイルシートを、テーブルが次のようになるように変えてください:

	Area	Mean depth
	million km²	m
Arctic:	13,000	1,200
Atlantic:	87,000	3,900
Pacific:	180,000	4,000
Indian:	75,000	3,900
Southern:	20,000	4,500
Total:	361,000
Mean:	72,000	3,800

Oceans

チャレンジの解答を見る。

さて次は？

次のセクション :
Media このページは、CSS のプロパティと値に主眼を置いたチュートリアルの最後のページです。プロパティと値についてのすべての概要については、CSS 仕様書の Full property table をご覧ください。

次のページでは、CSS スタイルシートの目的と構造をもう一度見ていきます。