表をXHTMLで記述しCSSでレイアウトする際の基本ケース

Total 125 views
この記事の所要時間は約 4分です。

私はいわゆる「テーブルデザイン」での HTML記述方法を知らず、
デザインはすべて CSSで行ってきました。

そこでは「デザインはテーブルでやってはいけない」と書籍で教えられてきたんです。

でももちろん純粋な「表」はテーブルで記述すべしとも教えられてきました。

スポンサーリンク


 

イメージ画像

このところ「表」の書き方とデザインがごちゃごちゃしてきたので
あらためて基本となるところをまとめておこうかと思います。
(あくまで私個人のやり方ですけどね)

 

ここに書いてあるのは普段私が使っている平易な表の作り方です。

各ボーダーの線を個別に太くしたり線の色を細かく変えたりする場合にはもう少し複雑な CSSとなるのでここでは割愛します。

シンプルな表

表例

商品名 SONY WALKMAN NW-757......SONY WALKMAN NW-757......SONY WALKMAN NW-757......SONY WALKMAN NW-757......WALKMAN NW-757
価格 598,000円

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円

このサンプルは頭に見出しが付けてありさらに色づけもしてあります。最後にはまとめ的な備考欄も付けてあります。

頭の見出しは 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円(黒)

納期欄のように複数の横セルを結合したい場合は当該 td に「colspan="2"(個数分)」を加筆します。

価格欄のように複数の縦セルを結合したい場合は当該 th と td に 「rowspan="2"(個数分)を加筆します。

複雑になればなるほどパズルを解く感じになるのでその辺りは何度も手直しするハメになるでしょう。

以上です。

スポンサーリンク

ブログランキングに参加してます。よろしければポチッとな。

お気軽にフォロー↓してください。

ブログ更新情報はこちらからどうぞ。

follow us in feedly

コメントを残す




日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)