Join MDN and developers like you at Mozilla's View Source conference, 12-14 September in Berlin, Germany. Learn more at https://viewsourceconf.org

Tables

これは 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 をご覧ください。

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

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

  1. 新しい 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>
    
  2. 新しいスタイルシート 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;
    }
    
  3. 文書をブラウザで開きます。次の内容に似たものになるでしょう:

    Oceans

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

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

  Area Mean depth
  million km2 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

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

さて次は?

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

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

ドキュメントのタグと貢献者

 このページの貢献者: teoli, ethertank
 最終更新者: teoli,