loading
 読み込み中...
ウェブの触手-日々の生活に新たなスパイスを-
アイキャッチ画像
Home > [ウェブデザイン] > 表をXHTMLで記述しCSSでレイアウトする際の基本ケース
この記事は約4分で読めます。
この記事は最終更新日から5年以上経過しているため現状にそぐわない可能性もあります。

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

投稿日:2010.11.22

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

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

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

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

 

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

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

↓↓↓簡単にサイトが作れる次世代ツール↓↓↓

SIRIUSレビューイメージ画像

シンプルな表

表例

商品名 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″(個数分)を加筆します。

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

以上です。

記事はお役にたてましたか?

記事にご興味をもっていただけましたら
下のソーシャルボタンで共有していただけると嬉しいです^^

 ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓

スポンサーリンク

おススメTCDテーマ

WordPressテーマ「Logue (tcd020)」 

コメント(0件)

コメントをどうぞ

入力いただいたメールアドレスは公開されません。

内容に問題なければ、下記の「コメントを送信する」ボタンを押してください。

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

先頭へ