アイキャッチ画像
HOME > ウェブデザイン > 表をHTMLで記述しCSSでレイアウトする際の基本ケース
公開日:2010.11.22
この記事は約4分で読めます。

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

この記事は最終更新日から8年以上経過しているため現状にそぐわない可能性もあります。

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

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

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

このところ「表」の書き方とデザインがごちゃごちゃしてきたのであらためて基本となるところをまとめておこうかと思います。

(あくまで私個人のやり方ですけどね)

SIRIUSレビューイメージ画像

いろいろな表の作り方

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

各ボーダーの線を個別に太くしたり線の色を細かく変えたりする場合にはもう少し複雑な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″(個数分)を加筆します。

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

以上です。

スポンサーリンク

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

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

 ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓

コメントはお気軽にどうぞ

メールアドレスは公開されません。
* が付いている欄は必須項目です。

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

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