mozilla
Your Search Results

    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 スタイルシートの目的と構造をもう一度見ていきます

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

    Contributors to this page: teoli, ethertank
    最終更新者: teoli,