XHTMLでの表の作り方
XHTMLで表を組み立てるとき、構造と視覚効果を分離するために、視覚効果の方は、CSSを用いて定義しなければなりません。しかし、いちいちクラス属性を設定して、<span>要素や<div>要素 で、視覚効果を指定するのは面倒なので、<table>の各要素に対して視覚効果を指定すると便利です。
1. 見出しなしの表
| (1,1) | (1,2) |
| (2,1) | (2,2) |
こういう見出しなしの単純な表を作るには、
<caption>このテーブルの表題</caption>
<tbody>
<tr>
<td>(1,1)</td>
<td>(1,2)</td>
</tr>
<tr>
<td>(2,1)</td>
<td>(2,2)</td>
</tr>
</tbody>
</table>
というようにします。HTMLでは、<tbody></tbody>は不要ですが、XHTMLでは必要です。
2. 見出し付きの表
| ヘッダー | 列1 | 列2 |
|---|---|---|
| 行1 | (1,1) | (1,2) |
| 行2 | (2,1) | (2,2) |
こういうように、表に見出しをつけるには、一行目に<thead></thead>タグをつけ、一列目のセルを<th></th>タグで囲むことで差別化します。
<caption>このテーブルの表題</caption>
<thead>
<tr>
<th>ヘッダー</th>
<td>列1</td>
<td>列2</td>
</tr>
</thead>
<tbody>
<tr>
<th>行1</th>
<td>(1,1)</td>
<td>(1,2)</td>
</tr>
<tr>
<th>行2</th>
<td>(2,1)</td>
<td>(2,2)</td>
</tr>
</tbody>
</table>
3. フッター付きの表
| ヘッダー | 列1 | 列2 |
|---|---|---|
| フッター | 列1 | 列2 |
| 行1 | (1,1) | (1,2) |
| 行2 | (2,1) | (2,2) |
こういうように、計算結果を表示するなど、フッターが必要なときには、<tfoot></tfoot>タグを置きます。フッターだからといって、最後に置いてはいけません。<thead></thead>タグの後ろに置かなければいけません。
<table>
<caption>このテーブルの表題</caption>
<thead>
<tr>
<th>ヘッダー</th>
<td>列1</td>
<td>列2</td>
</tr>
</thead>
<tfoot>
<tr>
<th>フッター</th>
<td>列1</td>
<td>列2</td>
</tr>
</tfoot>
<tbody>
<tr>
<th>行1</th>
<td>(1,1)</td>
<td>(1,2)</td>
</tr>
<tr>
<th>行2</th>
<td>(2,1)</td>
<td>(2,2)</td>
</tr>
</tbody>
</table>
4. CSSの適用
<thead>と<tfoot>と<tbody>、さらに<th>と<td>を使い分けによるセルの機能を差別化を視覚的にわかるようにするには、CSSを用いて、プロパティを差別化する必要があります。参考までに、私が使っているCSSを掲載しましょう。
.content table {
width: 98%;
margin: 20px auto 20px auto;
border-collapse: collapse;
border-width: 0px;
padding: 0px;
empty-cells: show;
}
caption {
margin: 0px;
padding: 0px 10px 20px 10px;
caption-side: top;
}
.content thead th, tfoot th {
margin: 0px;
padding: 10px;
vertical-align: middle;
text-align: center;
border-style: solid;
border-width: 1px;
border-color: #000000;
background: #3f8c33;
color: #ebffed;
font-weight: normal;
}
.content thead td, tfoot td {
margin: 0px;
padding: 10px;
vertical-align: middle;
text-align: center;
border-style: solid;
border-width: 1px;
border-color: #000000;
background: #a8dda0;
color: #000000;
font-weight: normal;
}
.content tbody th {
margin: 0px;
padding: 10px;
border-style: solid;
border-width: 1px;
border-color: #000000;
background: #ebffed;
color: #000000;
vertical-align: middle;
text-align: center;
font-weight: normal;
}
.content tbody td {
margin: 0px;
padding: 10px;
border-style: solid;
border-width: 1px;
border-color: #000000;
background: #ffffce;
color: #000000;
vertical-align: middle;
text-align: center;
}
セレクタの最初にある“.content”は、ブログの記事内に登場する表にしか適用させないために付けています。これをはずすと、ページ内のすべての表に適用されます。
“text-align”に関しては、デフォルトでセンタリングにし、左寄せしたいときには、<p></p>を使うというようにすると、私の経験上から言えば、便利です。
5. 単純な表に代えて
対応関係を示すだけの、二列の単純な表を作るなら、<table>要素に代わって、<dl>要素を使うという手もあります。
- 被定義1
- 定義項1
- 被定義2
- 定義項2
- 被定義3
- 定義項3
ソースコードは以下のとおり。
<dt>被定義1</dt>
<dd>定義項1</dd>
<dt>被定義2</dt>
<dd>定義項2</dd>
<dt>被定義3</dt>
<dd>定義項3</dd>
</dl>
CSSは、私の場合、次のように設定しています。
dl {
margin: 0px;
padding: 0px;
}
dt {
width: 120px;
margin: 10px;
padding: 10px;
float: left;
clear: left;
border-style: dashed;
border-width: 1px;
border-color: #ff0000;
background: #ffecec;
color: #000000;
text-align: center;
}
dd {
width: 360px;
margin: 10px auto 10px 0px;
padding: 10px;
float: left;
border-style: dashed;
border-width: 1px;
border-color: #ff0000;
background: #ffffec;
color: #000000;
text-align: left;
}
<dl>要素を適応した後には、 { clear: both; } で回り込みを解除しなければいけません。
