これは 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 を使えますが、そういったテーブルはこの基本チュートリアルの範疇を超えています。
セルにはマージンがありません。
セルにはボーダーとパディングがあります。デフォルトでは、ボーダーはテーブルの {{cssxref("border-spacing")}} プロパティで決められます。テーブルの {{cssxref("border-collapse")}} プロパティを collapse にすると、間隔を完全に取り除くことができます。
テーブルが 3 つあります。
左のテーブルには 0.5em 幅のボーダーがあります。中央のテーブルには幅ゼロのボーダーがあります。右のテーブルには 折り畳まれた（collapsed）ボーダーがあります:
（表示例は、この wiki の制限により、正しく表示されていないかもしれません）
|
|
|
{{HTMLElement("caption")}} 要素はテーブル全体に当てられるラベルです。デフォルトでは、テーブルの一番上に表示されます。
底部に移動させるには、{{cssxref("caption-side")}} プロパティを bottom にします。プロパティは継承されるので、テーブルに設定することも、祖先要素に設定することもできます。
キャプションの文字にスタイルをつけるには、通常のテキスト用のプロパティを使ってください。
このテーブルは底部にキャプションがあります
（表示例は、この wiki の制限により、正しく表示されていないかもしれません）
#demo-table > caption {
caption-side: bottom;
font-style: italic;
text-align: right;
}
|
テーブル要素に {{cssxref("empty-cells")}}: show; と定義すると、空のセル（これはつまりセルのボーダーと背景です）を表示できます。
隠すには empty-cells: hide; と定義します。こうすると、セルの親要素に背景があるとき、空のセル越しに見ることができます。
次のテーブルは薄い緑の背景を持っています。各セルは薄い灰色の背景と濃い灰色のボーダーを持っています。
左のテーブルでは、空セルが見えています。右のテーブルでは隠されています:
|
|
テーブルについての詳しい情報は、CSS 仕様書の Tables をご覧ください。
そこにある情報はこのチュートリアルを超えたものになりますが、そこでは、複雑なテーブルに影響する、ブラウザ間の相違については触れていません。
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
|
スタイルシートを、テーブルが次のようになるように変えてください:
Oceans |
{{nextPage("/ja/docs/CSS/Getting_Started/Media", "Media")}} このページは、CSS のプロパティと値に主眼を置いたチュートリアルの最後のページです。プロパティと値についてのすべての概要については、CSS 仕様書の Full property table をご覧ください。
次のページでは、CSS スタイルシートの目的と構造をもう一度見ていきます。