表をHTMLで記述しCSSでレイアウトする際の基本ケース
も・く・じ
私はいわゆる「テーブルデザイン」でのHTML記述方法を知らず、（レイアウト）デザインはすべてCSSで行ってきました。
そこでは「デザインはテーブルでやってはいけない」と書籍で教えられてきたんです。
でももちろん純粋な「表」はテーブルで記述すべしとも教えられてきました。
このところ「表」の書き方とデザインがごちゃごちゃしてきたので、あらためて基本となるところをまとめておこうかと思います。
（あくまで私個人のやり方ですけど）
いろいろな表の作り方
ここに書いてあるのは普段私が使っている平易な表の作り方です。
各ボーダーの線を個別に太くしたり線の色を細かく変えたりする場合にはもう少し複雑なCSSとなるのでここでは割愛します。
シンプルな表
表例
| 商品名 | SONY WALKMAN NW-757......SONY WALKMAN NW-757......SONY WALKMAN NW-757......SONY WALKMAN NW-757......WALKMAN NW-757 |
|---|---|
| 価格 | 598,000円 |
|
0 1 2 3 4 5 6 7 8 9 10 11 |
<table id="test" cellspacing="0" summary="テスト表"> <tr> <th scope="row" class="lead">商品名</th> <td>SONY WALKMAN NW-757......SONY WALKMAN NW-757......SONY WALKMAN NW-757......SONY WALKMAN NW-757......WALKMAN NW-757</td> </tr> <tr> <th scope="row" class="lead">価格</th> <td>598,000円</td> </tr> </table> |
|
0 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
table { border: 1px solid #333; border-collapse:collapse; border-spacing:0; } #test { width: 400px; } .lead { width: 100px; vertical-align: middle; } th, td { font-weight: normal; padding: 5px; border-right: 1px solid #333; border-bottom: 1px solid #333; text-align: left; } |
tableにIDをつけておくとあとで背景をつけたり幅を指定しやすくなります。
cellspacing="0" は確かIE6用の設定だったはずですがちょっと忘れました。
summaryには表の大まかな内容を記述できます。なくてもいいけどユーザービリティアップ用。
scopeもなくてもいいんですがth内の見出しがどの部分に対する見出しなのかの意思表示役を担ってます。
”row”だとthに記した項目がその「右横」方向の内容に対する見出しになり、”col”だと「下」方向の内容に対する見出しになります。
サンプルではthにclassが指定してありますが、何らかの個別指定をしたいときはつけておいた方があとあとラクです。
今回は2列なのでtable IDに全幅を指定し、thにも幅を指定することで自動的に残りの幅がtdに割り当てられるような設定にしてあります。
ただしtd部に入る文章が短いものばかりだとブラウザが自動的に横幅を合わせて幅狭なテーブルが出来上がる場合もあるのでその場合はtdに「table幅」-「th幅」の数値を入れておきます。
この幅指定を怠るとセルの中身が増えた時にIEだと自動的に横に広がったりして厄介なことになっちゃいます。それでもいい時もありますけど。
テーブルボーダーに関しては基本的にseparateを使うことはないのでcollapseのみ。
文字を太くしたり標準に戻したりテキストを中央寄せにしたり上方向に固定したりというのはお好みでどうぞ。
タグそのものに設定すればいい時もあればIDやclassを設定しなければうまくいかないこともあります。
より明確に項目を記述した表
表例
| 項目 | 内容 |
|---|---|
| 備考 | ここはいわゆるフッターにあたる部分。 |
| 商品名 | SONY WALKMAN NW-757......SONY WALKMAN NW-757......SONY WALKMAN NW-757......SONY WALKMAN NW-757......WALKMAN NW-757 |
| 価格 | 89,000円 |
|
0 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 |
<table id="test" cellspacing="0" summary="テスト表"> <thead> <tr> <th scope="col" class="koumoku">項目</th> <th scope="col" class="naiyo">内容</th> </tr> </thead> <tfoot> <tr> <th scope="row">備考</th> <td>ここはいわゆる表のフッターにあたる部分。</td> </tr> </tfoot> <tbody> <tr> <th scope="row">商品名</th> <td>SONY WALKMAN NW-757......SONY WALKMAN NW-757......SONY WALKMAN NW-757......SONY WALKMAN NW-757......WALKMAN NW-757</td> </tr> <tr> <th scope="row">価格</th> <td>89,000円</td> </tr> </tbody> </table> |
|
0 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 |
table { border: 1px solid #333; border-collapse:collapse; border-spacing:0; } #test { width: 400px; } thead th.koumoku, tbody th, tfoot th { width: 100px; } th, td { font-weight: normal; padding: 5px; border-right: 1px solid #333; border-bottom: 1px solid #333; text-align: left; } thead th { background: #0CF; text-align: center; } tbody th { background:#CCC; vertical-align: middle; } tfoot th, tfoot td { background:#FFC; } |
このサンプルは頭に見出しが付けてありさらに色づけもしてあります。最後にはまとめ的な備考欄も付けてあります。
頭の見出しはtheadで包み、見出し方向は縦なので「scope="col"」を指定。それぞれのthにクラスを指定してあります。
実際の項目と内容はtbodyで包み、まとめ要素はtfootで包んであります。この時気を付けなければいけないのがHTML記述時の順番です。
見た目の並び順ではなく「thead→tfoot→tbody」 の順になります。
tfootを使うことはあまりないでしょうが、ユーザビリティを考慮するとこんな感じになります。といっても確かIEは対応してなかったような。
セルの結合が発生するような不規則な表
表例
| 項目 | 内容1 | 内容2 |
|---|---|---|
| 備考 | ここはいわゆるフッターにあたる部分です。 | |
| 商品名 | iPod touch 32GB,iPod touch 32GB,iPod touch 32GB,iPod touch 32GB | iPod nano 64GB,iPod nano 64GB,iPod nano 64GB,iPod nano 64GB,iPod nano 64GB,iPod nano 64GB,iPod nano 64GB |
| 納期 | 入荷次第の連絡とさせていただきます。 | |
| 価格 | 1,000円 | 198,000円（白） |
| 298,000円（黒） | ||
|
0 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 |
<table id="test" cellspacing="0" summary="テスト表"> <thead> <tr> <th scope="col" class="koumoku">項目</th> <th scope="col" class="naiyo1">内容1</th> <th scope="col" class="naiyo2">内容2</th> </tr> </thead> <tfoot> <tr> <th scope="row">備考</th> <td colspan="2">ここはいわゆるフッターにあたる部分です。</td> </tr> </tfoot> <tbody> <tr> <th scope="row">商品名</th> <td>iPod touch 32GB,iPod touch 32GB,iPod touch 32GB,iPod touch 32GB</td> <td>iPod nano 64GB,iPod nano 64GB,iPod nano 64GB,iPod nano 64GB,iPod nano 64GB,iPod nano 64GB,iPod nano 64GB</td> </tr> <tr> <th scope="row">納期</th> <td colspan="2">入荷次第の連絡とさせていただきます。</td> </tr> <tr> <th rowspan="2" scope="row">価格</th> <td rowspan="2">1,000円</td> <td>198,000円（白）</td> </tr> <tr> <td>298,000円（黒）</td> </tr> </tbody> </table> |
|
0 1 2 3 4 5 6 7 8 9 |
(※ B との相違点のみ) #test { width: 500px; } thead th.naiyo1, thead th.naiyo2 { width: 200px; } |
納期欄のように複数の横セルを結合したい場合は当該tdに「colspan="2"（個数分）」を加筆します。
価格欄のように複数の縦セルを結合したい場合は当該thとtdに 「rowspan="2"（個数分）を加筆します。
複雑になればなるほどパズルを解く感じになるのでその辺りは何度も手直しするハメになるでしょう。
以上です。
スポンサーリンク
記事はお役にたてましたか?
記事に興味をもっていただけたらソーシャルボタンでの共有お願いします^^
↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓