path: root/files/ja/web/guide/css/getting_started/tables/index.html

---
title: Tables
slug: Web/Guide/CSS/Getting_started/Tables
tags:
  - CSS
  - 'CSS:Getting_Started'
translation_of: Learn/CSS/Building_blocks/Styling_tables
translation_of_original: Web/Guide/CSS/Getting_started/Tables
---
<div>
 {{CSSTutorialTOC}}{{previousPage("/ja/docs/CSS/Getting_Started/Layout", "Layout")}}</div>
<p>これは <a href="/ja/docs/CSS/Getting_Started" title="CSS/Getting Started">CSS Getting Started</a> チュートリアルの第 13 章です。ここではさらに高度なセレクタと、テーブルのスタイルづけに特有の方法を述べます。テーブルを含む新しいサンプル文書と、スタイルシートを作ってください。</p>
<h2 class="clearLeft" id="Information.3A_Tables" name="Information.3A_Tables">表（テーブル）について</h2>
<p>テーブルは、縦軸 / 横軸のデータ構造を持つ情報の並びです。テーブルは複雑になることがあり、複雑なテーブルはブラウザによって違った表示になる場合があります。</p>
<p>文書を設計する際には、テーブルを細かな情報同士の <a href="/ja/docs/CSS/Getting_Started/Selectors#relselectors" title="CSS/Getting_Started/Selectors#relselectors">関係性</a> を示すのに使ってください。そうすれば、ブラウザによって少し違った表示がされても問題ありません。目的が依然はっきりしているためです。</p>
<p>精密な視覚的レイアウトを作るために、テーブルの変わった使い方をしないでください。そういった目的には、このチュートリアルの前のページにある技法（<strong><a href="/ja/docs/CSS/Getting_Started/Layout" title="CSS/Getting_Started/Layout">レイアウト</a></strong>）のほうが適しています。</p>
<h3 id="Table_structure" name="Table_structure">テーブルの構造</h3>
<p>テーブルでは、情報の一つ一つが <em>セル（cell）</em> に入れて表示されます。</p>
<p>ページを横切るように並ぶセルが、 行（<em>row</em>）を作ります。</p>
<p>テーブルによっては、行はグループ化されているかもしれません。テーブルの初めにある特殊な行グループが、<em>ヘッダー（header）</em>です。テーブルの終わりにある特殊な行グループが、<em>フッター（footer）</em>です。テーブルの中心的な行が <em>ボディ（body）</em>で、これも、グループに入っているかもしれません。</p>
<p>ページ下方に向けて並ぶセルは<em>列（column）</em>を作りますが、CSS のテーブルでは、列の用途には制限があります。</p>
<div class="tuto_example">
 <div class="tuto_type">
  例</div>
 <p><a href="/ja/docs/CSS/Getting_Started/Selectors" title="CSS/Getting_Started/Selectors">Selectors</a> ページの <a href="/ja/docs/CSS/Getting_Started/Selectors#relselectors" title="CSS/Getting_Started/Selectors#relselectors">Selectors based on relationships</a> の表には、行が 5 つ、セルが 10 個あります。</p>
 <p>最初の行はヘッダーです。残りの 4 つの行はボディです。フッターはありません。</p>
 <p>列は 2 つあります。</p>
</div>
<p>このチュートリアルでは結果が予測できるような、簡単なテーブルしか扱いません。簡単なテーブルでは、各セルがどれも 1 つの行と 1 つの列を占めます。セルが 1 行や 1 列以上に <em>伸びた（span）</em>複雑なテーブルにも CSS を使えますが、そういったテーブルはこの基本チュートリアルの範疇を超えています。</p>
<h3 id="Borders" name="Borders">ボーダー</h3>
<p>セルにはマージンがありません。</p>
<p>セルにはボーダーとパディングがあります。デフォルトでは、ボーダーはテーブルの {{cssxref("border-spacing")}} プロパティで決められます。テーブルの {{cssxref("border-collapse")}} プロパティを <code>collapse</code> にすると、間隔を完全に取り除くことができます。</p>
<div class="tuto_example">
 <div class="tuto_type">
  例</div>
 <p>テーブルが 3 つあります。</p>
 <p>左のテーブルには 0.5em 幅のボーダーがあります。中央のテーブルには幅ゼロのボーダーがあります。右のテーブルには 折り畳まれた（collapsed）ボーダーがあります:<br>
  （表示例は、この wiki の制限により、正しく表示されていないかもしれません）</p>
 <table style="border: 2px outset #36b ; padding: 1em; background-color: white;">
  <tbody>
   <tr>
    <td style="padding-right: 2em;">
     <table style="border-collapse: separate;">
      <tbody>
       <tr>
        <td style="border: 1px solid #c00; text-align: center;">Clubs</td>
        <td style="border: 1px solid #c00; text-align: center;">Hearts</td>
       </tr>
       <tr>
        <td style="border: 1px solid #c00; text-align: center;">Diamonds</td>
        <td style="border: 1px solid #c00; text-align: center;">Spades</td>
       </tr>
      </tbody>
     </table>
    </td>
    <td style="padding-right: 2em;">
     <table style="border-collapse: separate;">
      <tbody>
       <tr>
        <td style="border: 1px solid #c00; text-align: center;">Clubs</td>
        <td style="border: 1px solid #c00; text-align: center;">Hearts</td>
       </tr>
       <tr>
        <td style="border: 1px solid #c00; text-align: center;">Diamonds</td>
        <td style="border: 1px solid #c00; text-align: center;">Spades</td>
       </tr>
      </tbody>
     </table>
    </td>
    <td style="padding-right: 6em;">
     <table style="border-collapse: collapse;">
      <tbody>
       <tr>
        <td style="border: 1px solid #c00; text-align: center;">Clubs</td>
        <td style="border: 1px solid #c00; text-align: center;">Hearts</td>
       </tr>
       <tr>
        <td style="border: 1px solid #c00; text-align: center;">Diamonds</td>
        <td style="border: 1px solid #c00; text-align: center;">Spades</td>
       </tr>
      </tbody>
     </table>
    </td>
   </tr>
  </tbody>
 </table>
</div>
<h3 id="Captions" name="Captions">キャプション</h3>
<p>{{HTMLElement("caption")}} 要素はテーブル全体に当てられるラベルです。デフォルトでは、テーブルの一番上に表示されます。</p>
<p>底部に移動させるには、{{cssxref("caption-side")}} プロパティを <code>bottom</code> にします。プロパティは継承されるので、テーブルに設定することも、祖先要素に設定することもできます。</p>
<p>キャプションの文字にスタイルをつけるには、通常のテキスト用のプロパティを使ってください。</p>
<div class="tuto_example">
 <div class="tuto_type">
  例</div>
 <p>このテーブルは底部にキャプションがあります</p>
 <p>（表示例は、この wiki の制限により、正しく表示されていないかもしれません）</p>
 <pre class="brush: css">#demo-table &gt; caption {
  caption-side: bottom;
  font-style: italic;
  text-align: right;
}
</pre>
 <table style="border: 2px outset #36b; padding: 1em 6em 1em 1em; background-color: white;">
  <tbody>
   <tr>
    <td>
     <table>
      <caption>
       Suits</caption>
      <tbody>
       <tr>
        <td>
         <table style="border-collapse: collapse;">
          <tbody>
           <tr>
            <td style="border: 1px solid gray; text-align: center;">Clubs</td>
            <td style="border: 1px solid gray; text-align: center;">Hearts</td>
           </tr>
           <tr>
            <td style="border: 1px solid gray; text-align: center;">Diamonds</td>
            <td style="border: 1px solid gray; text-align: center;">Spades</td>
           </tr>
          </tbody>
         </table>
        </td>
       </tr>
      </tbody>
     </table>
    </td>
   </tr>
  </tbody>
 </table>
</div>
<h3 id="Empty_cells" name="Empty_cells">空のセル</h3>
<p>テーブル要素に {{cssxref("empty-cells")}}: show; と定義すると、空のセル（これはつまりセルのボーダーと背景です）を表示できます。</p>
<p>隠すには <code>empty-cells: hide;</code> と定義します。こうすると、セルの親要素に背景があるとき、空のセル越しに見ることができます。</p>
<div class="tuto_example">
 <div class="tuto_type">
  例</div>
 <p>次のテーブルは薄い緑の背景を持っています。各セルは薄い灰色の背景と濃い灰色のボーダーを持っています。</p>
 <p>左のテーブルでは、空セルが見えています。右のテーブルでは隠されています:</p>
 <table style="border: 2px outset #36b; padding: 1em; background-color: white;">
  <tbody>
   <tr>
    <td style="padding-right: 2em;">
     <table style="border-collapse: separate; background-color: #dfd;">
      <tbody>
       <tr>
        <td style="border: 1px solid #555; background-color: #eee;"> </td>
        <td style="border: 1px solid #555; background-color: #eee; text-align: center;">Hearts</td>
       </tr>
       <tr>
        <td style="border: 1px solid #555; background-color: #eee; text-align: center;">Diamonds</td>
        <td style="border: 1px solid #555; background-color: #eee; text-align: center;">Spades</td>
       </tr>
      </tbody>
     </table>
    </td>
    <td style="padding-right: 6em;">
     <table style="border-collapse: separate; background-color: #dfd;">
      <tbody>
       <tr>
        <td> </td>
        <td style="border: 1px solid #555; background-color: #eee; text-align: center;">Hearts</td>
       </tr>
       <tr>
        <td style="border: 1px solid #555; background-color: #eee; text-align: center;">Diamonds</td>
        <td style="border: 1px solid #555; background-color: #eee; text-align: center;">Spades</td>
       </tr>
      </tbody>
     </table>
    </td>
   </tr>
  </tbody>
 </table>
</div>
<div class="tuto_details">
 <div class="tuto_type">
  詳細</div>
 <p>テーブルについての詳しい情報は、CSS 仕様書の <a href="http://www.w3.org/TR/CSS21/tables.html">Tables</a> をご覧ください。</p>
 <p>そこにある情報はこのチュートリアルを超えたものになりますが、そこでは、複雑なテーブルに影響する、ブラウザ間の相違については触れていません。</p>
</div>
<h2 id="Action.3A_Styling_a_table" name="Action.3A_Styling_a_table">実習: テーブルのスタイルづけ</h2>
<ol>
 <li>新しい HTML 文書 <code>doc3.html</code> を作ってください。次の内容をコピー＆ペーストしてください。スクロールさせて、コピー漏れがないか確認してください:
  <div style="height: 36em; overflow: auto;">
   <pre class="brush: html">&lt;!DOCTYPE html&gt;
&lt;html&gt;
  &lt;head&gt;
    &lt;title&gt;Sample document 3&lt;/title&gt;
    &lt;link rel="stylesheet" href="style3.css"&gt;
  &lt;/head&gt;
  &lt;body&gt;
    &lt;table id="demo-table"&gt;
      &lt;caption&gt;Oceans&lt;/caption&gt;
      &lt;thead&gt;
        &lt;tr&gt;
          &lt;th&gt;&lt;/th&gt;
          &lt;th&gt;Area&lt;/th&gt;
          &lt;th&gt;Mean depth&lt;/th&gt;
        &lt;/tr&gt;
        &lt;tr&gt;
          &lt;th&gt;&lt;/th&gt;
          &lt;th&gt;million km&lt;sup&gt;2&lt;/sup&gt;&lt;/th&gt;
          &lt;th&gt;m&lt;/th&gt;
        &lt;/tr&gt;
      &lt;/thead&gt;
      &lt;tbody&gt;
        &lt;tr&gt;
          &lt;th&gt;Arctic&lt;/th&gt;
          &lt;td&gt;13,000&lt;/td&gt;
          &lt;td&gt;1,200&lt;/td&gt;
        &lt;/tr&gt;
        &lt;tr&gt;
          &lt;th&gt;Atlantic&lt;/th&gt;
          &lt;td&gt;87,000&lt;/td&gt;
          &lt;td&gt;3,900&lt;/td&gt;
        &lt;/tr&gt;
        &lt;tr&gt;
          &lt;th&gt;Pacific&lt;/th&gt;
          &lt;td&gt;180,000&lt;/td&gt;
          &lt;td&gt;4,000&lt;/td&gt;
        &lt;/tr&gt;
        &lt;tr&gt;
          &lt;th&gt;Indian&lt;/th&gt;
          &lt;td&gt;75,000&lt;/td&gt;
          &lt;td&gt;3,900&lt;/td&gt;
        &lt;/tr&gt;
        &lt;tr&gt;
          &lt;th&gt;Southern&lt;/th&gt;
          &lt;td&gt;20,000&lt;/td&gt;
          &lt;td&gt;4,500&lt;/td&gt;
        &lt;/tr&gt;
      &lt;/tbody&gt;
      &lt;tfoot&gt;
        &lt;tr&gt;
          &lt;th&gt;Total&lt;/th&gt;
          &lt;td&gt;361,000&lt;/td&gt;
          &lt;td&gt;&lt;/td&gt;
        &lt;/tr&gt;
        &lt;tr&gt;
          &lt;th&gt;Mean&lt;/th&gt;
          &lt;td&gt;72,000&lt;/td&gt;
          &lt;td&gt;3,800&lt;/td&gt;
        &lt;/tr&gt;
      &lt;/tfoot&gt;
    &lt;/table&gt;
  &lt;/body&gt;
&lt;/html&gt;
</pre>
  </div>
 </li>
 <li>新しいスタイルシート <code>style3.css</code> を作ります。次の内容をコピー＆ペーストしてください。スクロールして、コピー漏れがないことを確認します:
  <pre class="brush: 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 &gt; 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 &gt; thead &gt; tr:first-child &gt; th {
  text-align: center;
  color: blue;
}

#demo-table &gt; thead &gt; tr + tr &gt; 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 &gt; tfoot td {
  background-color: #cee;
}

#demo-table &gt; tfoot &gt; tr:first-child td {
  border-top: .2em solid #7a7;
}
</pre>
 </li>
 <li>文書をブラウザで開きます。次の内容に似たものになるでしょう:
  <table style="border: 2px outset #36b; padding: 1em 6em 1em 1em; background-color: white;">
   <tbody>
    <tr>
     <td>
      <div>
       <p style="font: bold 200% sans-serif; text-align: left; border-bottom: .2em solid #4ca; margin: 0px 0px .5em 0px;">Oceans</p>
       <div style="border: 1px solid #7a7; background-color: #efe;">
        <table style="font: 100% sens-serif; background-color: #efe; border-collapse: collapse; text-align: right; padding-right: .5em;">
         <tbody>
          <tr style="text-align: center; color: blue;">
           <th> </th>
           <th>Area</th>
           <th style="padding-left: .5em; padding-right: .5em;">Mean depth</th>
          </tr>
          <tr style="font-style: italic; color: gray;">
           <th> </th>
           <th style="padding-left: .5em; padding-right: .5em;">million km<sup>2</sup></th>
           <th style="padding-left: .5em; padding-right: .5em;">m</th>
          </tr>
          <tr>
           <th style="padding-right: .5em;">Arctic:</th>
           <td style="background-color: #cef; padding: .5em .5em .5em 3em;">13,000</td>
           <td style="background-color: #cef; padding: .5em .5em .5em 3em;">1,200</td>
          </tr>
          <tr>
           <th style="padding-right: .5em;">Atlantic:</th>
           <td style="background-color: #cef; padding: .5em .5em .5em 3em;">87,000</td>
           <td style="background-color: #cef; padding: .5em .5em .5em 3em;">3,900</td>
          </tr>
          <tr>
           <th style="padding-right: .5em;">Pacific:</th>
           <td style="background-color: #cef; padding: .5em .5em .5em 3em;">180,000</td>
           <td style="background-color: #cef; padding: .5em .5em .5em 3em;">4,000</td>
          </tr>
          <tr>
           <th style="padding-right: .5em;">Indian:</th>
           <td style="background-color: #cef; padding: .5em .5em .5em 3em;">75,000</td>
           <td style="background-color: #cef; padding: .5em .5em .5em 3em;">3,900</td>
          </tr>
          <tr>
           <th style="padding-left: .5em; padding-right: .5em;">Southern:</th>
           <td style="background-color: #cef; padding: .5em .5em .5em 3em;">20,000</td>
           <td style="background-color: #cef; padding: .5em .5em .5em 3em;">4,500</td>
          </tr>
          <tr>
           <th style="padding-right: .5em; color: blue;">Total:</th>
           <td style="background-color: #cee; padding: .5em .5em .5em 3em; border-top: .2em solid #7a7;">361,000</td>
           <td style="background-color: #cee; padding: .5em .5em .5em 3em; border-top: .2em solid #7a7;"> </td>
          </tr>
          <tr>
           <th style="padding-right: .5em; color: blue;">Mean:</th>
           <td style="background-color: #cee; padding: .5em .5em .5em 3em;">72,000</td>
           <td style="background-color: #cee; padding: .5em .5em .5em 3em;">3,800</td>
          </tr>
         </tbody>
        </table>
       </div>
      </div>
     </td>
    </tr>
   </tbody>
  </table>
 </li>
 <li>表示されたテーブルとスタイルシートにあるルールを比較して、各行の働きを理解できているか確かめてください。自信のないルールを見つけたら、そのルールをコメントアウトしてブラウザを更新し、何が起きるか見てみましょう。このテーブルに関する注意点は次のとおりです:
  <ul>
   <li>キャプションはテーブルのボーダーより外側に置かれています。</li>
   <li>もしオプションでフォントの最小値を設定していれば、 km<sup>2</sup> の上付き文字に影響します。</li>
   <li>空セルが 3 つあります。そのうち2つは、テーブルの背景を透過しています。 3 つ目は背景と上辺にボーダーを持ちます。</li>
   <li>コロンはスタイルシートで追加しています。</li>
  </ul>
 </li>
</ol>
<div class="tuto_example">
 <div class="tuto_type">
  チャレンジ</div>
 <p>スタイルシートを、テーブルが次のようになるように変えてください:</p>
 <table style="border: 2px outset #36b; padding: 1em 6em 1em 1em; background-color: white;">
  <tbody>
   <tr>
    <td>
     <div>
      <div style="border: 1px solid #7a7; background-color: #efe;">
       <table style="font: 100% sens-serif; background-color: #efe; border-collapse: collapse; text-align: right; padding-right: .5em;">
        <tbody>
         <tr style="text-align: center; color: blue;">
          <th> </th>
          <th>Area</th>
          <th style="padding-left: .5em; padding-right: .5em;">Mean depth</th>
         </tr>
         <tr style="font-style: italic; color: gray;">
          <th> </th>
          <th style="padding-left: .5em; padding-right: .5em;">million km<sup>2</sup></th>
          <th style="padding-left: .5em; padding-right: .5em;">m</th>
         </tr>
         <tr>
          <th style="padding-right: .5em;">Arctic:</th>
          <td style="background-color: #cef; padding: .5em .5em .5em 3em; border: 1px solid #7a7;">13,000</td>
          <td style="background-color: #cef; padding: .5em .5em .5em 3em; border: 1px solid #7a7; border-right: 0px;">1,200</td>
         </tr>
         <tr>
          <th style="padding-right: .5em;">Atlantic:</th>
          <td style="background-color: #cef; padding: .5em .5em .5em 3em; border: 1px solid #7a7;">87,000</td>
          <td style="background-color: #cef; padding: .5em .5em .5em 3em; border: 1px solid #7a7; border-right: 0px;">3,900</td>
         </tr>
         <tr>
          <th style="padding-right: .5em;">Pacific:</th>
          <td style="background-color: #cef; padding: .5em .5em .5em 3em; border: 1px solid #7a7;">180,000</td>
          <td style="background-color: #cef; padding: .5em .5em .5em 3em; border: 1px solid #7a7; border-right: 0px;">4,000</td>
         </tr>
         <tr>
          <th style="padding-right: .5em;">Indian:</th>
          <td style="background-color: #cef; padding: .5em .5em .5em 3em; border: 1px solid #7a7;">75,000</td>
          <td style="background-color: #cef; padding: .5em .5em .5em 3em; border: 1px solid #7a7; border-right: 0px;">3,900</td>
         </tr>
         <tr>
          <th style="padding-left: .5em; padding-right: .5em;">Southern:</th>
          <td style="background-color: #cef; padding: .5em .5em .5em 3em; border: 1px solid #7a7;">20,000</td>
          <td style="background-color: #cef; padding: .5em .5em .5em 3em; border: 1px solid #7a7; border-right: 0px;">4,500</td>
         </tr>
         <tr>
          <th style="padding-right: .5em; color: blue;">Total:</th>
          <td style="background-color: #cee; padding: .5em .5em .5em 3em; border-top: .2em solid #7a7;">361,000</td>
          <td style="background-color: #cee; padding: .5em .5em .5em 3em; border-top: .2em solid #7a7;"> </td>
         </tr>
         <tr>
          <th style="padding-right: .5em; color: blue;">Mean:</th>
          <td style="background-color: #cee; padding: .5em .5em .5em 3em;">72,000</td>
          <td style="background-color: #cee; padding: .5em .5em .5em 3em;">3,800</td>
         </tr>
        </tbody>
       </table>
      </div>
      <p style="font: italic 100% sans-serif; text-align: right; border-top: .4em solid #4ca; margin: 1em 0px 0px 0px;">Oceans</p>
     </div>
    </td>
   </tr>
  </tbody>
 </table>
</div>
<p><a href="/ja/docs/CSS/Getting_Started/Challenge_solutions#Tables" title="CSS/Getting started/Challenge solutions#Tables">チャレンジの解答を見る。</a></p>
<h2 id="What_next.3F" name="What_next.3F">さて次は？</h2>
<p>{{nextPage("/ja/docs/CSS/Getting_Started/Media", "Media")}} このページは、CSS のプロパティと値に主眼を置いたチュートリアルの最後のページです。プロパティと値についてのすべての概要については、CSS 仕様書の <a href="http://www.w3.org/TR/CSS21/propidx.html">Full property table</a> をご覧ください。</p>
<p>次のページでは、CSS スタイルシートの目的と構造を<a href="/ja/docs/CSS/Getting_Started/Media" title="CSS/Getting_Started/Media">もう一度見ていきます</a>。</p>