テーブルと枠と、時々、コラム
最近web作成で<table>を使わなければならないことが多くなりました。
タグがやたらと多くなるのであまり好きではなかったのですが、表を作るには崩れにくいので便利ではあります。
でも、<table border="●" cellspacing="▲" cellpadding="■">と書くのは嫌なので、枠線やセル間隔などの制御をCSSで書くときの備忘録をまとめてみました。やはりIE6とIE7が曲者です。
前提条件として、table, td, thのmargin, paddingを10px、テーブルの幅を400pxとして実験。
<style type="text/css">
table,
td,
th {
margin:10px;
padding:10px;
}
table {
width:400px;
}
</style>
その上で、最初に試したのがこれ。
ソース↓
<style type="text/css">
.table01 {
border:1px solid #000;
}
</style>
<table class="table01">
<tr>
<td>tableに黒いborder:1px</td>
<td>tableに黒いborder:1px</td>
</tr>
<tr>
<td>tableに黒いborder:1px</td>
<td>tableに黒いborder:1px</td>
</tr>
</table>
結果↓
| tableに黒いborder:1px | tableに黒いborder:1px |
| tableに黒いborder:1px | tableに黒いborder:1px |
- tableのborderは外側だけ
ということが分かります。
次に、中にも線を引きたいので、
ソース↓
<style type="text/css">
.table02 {
border:1px solid #000;
}
.table02 td {
border:1px solid #f00;
}
</style>
<table class="table02">
<tr>
<td>tableに黒、tdに赤いborder:1px</td>
<td>tableに黒、tdに赤いborder:1px</td>
</tr>
<tr>
<td>tableに黒、tdに赤いborder:1px</td>
<td>tableに黒、tdに赤いborder:1px</td>
</tr>
</table>
結果↓
| tableに黒、tdに赤いborder:1px | tableに黒、tdに赤いborder:1px |
| tableに黒、tdに赤いborder:1px | tableに黒、tdに赤いborder:1px |
- 中にも線を引きたい場合はtd(th)にborderをかける
- その際、td(th)のmarginとはtableとtd(th)の間のこと
（ただし、IE6, IE7は余白ができない）
セル間隔は、単純にmargin, paddingだけではなく、
ソース↓
<style type="text/css">
.table03 {
border:1px solid #000;
border-spacing:10px 100px;
}
.table03 td {
border:1px solid #f00;
}
</style>
<table class="table03">
<tr>
<td>border-spacing:20px 100px</td>
<td>border-spacing:20px 100px</td>
</tr>
<tr>
<td>border-spacing:20px 100px</td>
<td>border-spacing:20px 100px</td>
</tr>
</table>
結果↓
| border-spacing:20px 100px | border-spacing:20px 100px |
| border-spacing:20px 100px | border-spacing:20px 100px |
- td(th)同士の間隔はborder-spacingで指定
（ただし、IE6, IE7では指定できない） - この際、隣接する余白はマージンの話に書いたmarginと同じレンダリングがなされると思われる
ということなので、border-spacingを0にしてみると、
ソース↓
<style type="text/css">
.table04 {
border:1px solid #000;
border-spacing:0;
}
.table04 td {
border:1px solid #f00;
}
</style>
<table class="table04">
<tr>
<td>border-spacing:0</td>
<td>border-spacing:0</td>
</tr>
<tr>
<td>border-spacing:0</td>
<td>border-spacing:0</td>
</tr>
</table>
結果↓
| border-spacing:0 | border-spacing:0 |
| border-spacing:0 | border-spacing:0 |
- 「border-spacing」を0にしてもborder同士が隣接すると見苦しい
（ただし、IE6, IE7 はむしろ見苦しくない）
また、最初にtableとtd(th)に内外10pxの余白を付けていたので、
ソース↓
<style type="text/css">
.table05 {
border:1px solid #000;
border-spacing:0;
padding:0;
}
.table05 td {
border:1px solid #f00;
margin:0
}
</style>
<table class="table05">
<tr>
<td>tableのpaddng:0、tdのmargin:0</td>
<td>tableのpaddng:0、tdのmargin:0</td>
</tr>
<tr>
<td>tableのpaddng:0、tdのmargin:0</td>
<td>tableのpaddng:0、tdのmargin:0</td>
</tr>
</table>
結果↓
| tableのpaddng:0、tdのmargin:0 | tableのpaddng:0、tdのmargin:0 |
| tableのpaddng:0、tdのmargin:0 | tableのpaddng:0、tdのmargin:0 |
- tableとtd(th)間を0にしても、おなじくborder同士の隣接は美しくない
（この場合も、IE6, IE7 は普通に見える）
罫線の重なりは、調べた結果こうすれば、
ソース↓
<style type="text/css">
.table06 {
border:1px solid #000;
border-spacing:10px 100px;
border-collapse:collapse;
}
.table06 td {
border:1px solid #f00;
}
</style>
<table class="table06">
<tr>
<td>border-collapse:collapse</td>
<td>border-collapse:collapse</td>
</tr>
<tr>
<td>border-collapse:collapse</td>
<td>border-collapse:collapse</td>
</tr>
</table>
結果↓
| border-collapse:collapse | border-collapse:collapse |
| border-collapse:collapse | border-collapse:collapse |
- 「border-collapse」を「collapse」にすればtableとtd(th),td(th)間の間隔が無くなる
（tableのpadding, td(th)のmarginとborder-spacingは無視される。IE6,IE7も） - この際、borderはtableよりもth(td)の方が優先されるがIE6, IE7では外枠がtableの罫線となる
（IE6, IE7以外ではtable>thead(tbody,tfoot)>tr>td(th)ということ？） - 「border-collapse」のデフォルトは「separate」
ということで、「border-collapse:collapse;」とすれば、IEでも他のブラウザでもきれいな表が作れるというのがポイントでした。
ところで、話変わって、横方向に一括でスタイルをかけたいときは<tr>をセレクトしてやればよいですが、縦方向の場合は、
ソース↓
<style type="text/css">
.table07 {
border-collapse:collapse;
}
.table07 th,
.table07 td {
border:1px solid #f00;
}
.table07 .col1 {
width:20%;
text-align:left;
background:#fee;
}
.table07 .col2 {
width:10%;
text-align:right;
background:#efe;
}
.table07 .col3 {
width:20%;
text-align:right;
background:#eef;
}
.table07 .col4 {
width:40%;
text-align:right;
background:#ffe;
}
</style>
<table class="table07">
<col class="col1">
<col class="col2">
<col class="col3">
<col class="col4">
<thead>
<tr>
<th>col1</th>
<th>col2</th>
<th>col3</th>
<th>col4</th>
</tr
</thead>
<tfoot>
<tr>
<td>col1</td>
<td>col2</td>
<td>col3</td>
<td>col4</td>
</tr
</tfoot>
<tbody>
<tr>
<td>幅:20%</td>
<td>幅:10%</td>
<td>幅:20%</td>
<td>幅:40%</td>
<tr>
<td>left</td>
<td>right</td>
<td>right</td>
<td>right</td>
</tr>
<tr>
<td>ピンク</td>
<td>水色</td>
<td>紫</td>
<td>黄色</td>
</tr>
</tbody>
</table>
結果↓
（毎回のことですが、このブログにかかっているcssやjsの影響により、「text-align」が思い通りに表示されていませんが、ソースをテキストエディタにコピーして単独で表示させたらうまく出来ました）
| col1 | col2 | col3 | col4 |
|---|---|---|---|
| col1 | col2 | col3 | col4 |
| 幅:20% | 幅:10% | 幅:20% | 幅:40% |
| left | right | right | right |
| ピンク | 水色 | 紫 | 黄色 |
列に属性を与えるには<col>または<colgroup>が利用できる
というのが便利です。
でもやっかいなのは、<col>は空要素ということ。<colgroup>にしても、<col>を<colgroup><col><colgroup>とはさむことはできますが、trやthead(tbody, tfoot)の前に記述しなければならず、td(th)をはさむことができません。
だから、
ソース↓
<style type="text/css">
.table08 {
border-collapse:collapse;
}
.table08 th,
.table08 td {
border:1px solid #f00;
width:25%; /* ← 上の例にこれを追加 */
}
.table08 .col1 {
width:20%;
text-align:left;
background:#fee;
}
.table08 .col2 {
width:10%;
text-align:right;
background:#efe;
}
.table08 .col3 {
width:20%;
text-align:right;
background:#eef;
}
.table08 .col4 {
width:40%;
text-align:right;
background:#ffe;
}
</style>
<table class="table08">
<col class="col1">
<col class="col2">
<col class="col3">
<col class="col4">
<thead>
<tr>
<th>col1</th>
<th>col2</th>
<th>col3</th>
<th>col4</th>
</tr
</thead>
<tfoot>
<tr>
<td>col1</td>
<td>col2</td>
<td>col3</td>
<td>col4</td>
</tr
</tfoot>
<tbody>
<tr>
<td>幅:20% ？</td>
<td>幅:10% ？</td>
<td>幅:20% ？</td>
<td>幅:40% ？</td>
<tr>
<td>left</td>
<td>right</td>
<td>right</td>
<td>right</td>
</tr>
<tr>
<td>ピンク</td>
<td>水色</td>
<td>紫</td>
<td>黄色</td>
</tr>
</tbody>
</table>
結果↓
| col1 | col2 | col3 | col4 |
|---|---|---|---|
| col1 | col2 | col3 | col4 |
| 幅:20% ？ | 幅:10% ？ | 幅:20% ？ | 幅:40% ？ |
| left | right | right | right |
| ピンク | 水色 | 紫 | 黄色 |
- td(th)にwidthを与えると、そちらが優先される
- そこで「.col1 td {……}」とやってみたが、構造的にtdはcolの子要素ではないので、不適当な書き方
（参照：「特定の列の<td>または<th>だけにスタイルを – HTML – 教えて！goo」） - その回避方法は、td(th)にidやclassを振るしかない？
ということで、やはりhtmlのコードが膨らんでしまうのがテーブルの嫌なところです。
ところで、tfootについて、
・tfoot は tbody の前に書いた方がいいよ | WWW WATCH
・tfoot に関するエントリーの補足 | WWW WATCH
・tableのtfootの記述位置について｜WEB Drawer -WEB制作に関するメモサイト-
・HTMLテーブル（表）の本体部分を定義するタグ <tbody> | 初心者でもわかるホームページの作り方
などにもあるように、ユーザーエージェントは（相当な行数もの）データのすべてを読む前にtfootをレンダリングできる（user agents can render the foot before receiving all of the (potentially numerous) rows of data）という理由から、
<table>は、 <thead> <tfoot> <tbody> の順に書く方が良い
ということを最近知りました。