CSSで<table>を横に並べるように指定する方法

締切済

質問者：iko204
質問日時：2008/04/07 19:52
回答数：3件

今までは、テーブルを入れ子にしてデザインしていたものを
できる範囲でCSSに変更したく思っています。

本体が２カラムにしてあるページのメイン部分に、
小さなテーブルが横に４つ、縦に10から50個ほど入っています。
今まではテーブルが４つ入りのテーブルを縦にずらっとならべていました。

ブロック要素であるテーブルをスタイルシートでインライン要素に変える
http://himajin.moo.jp/html/table/table3.html

上記サイトさんにあるような方法でやるとしたら具体的にどのようなCSSを書けばよいのでしょうか？

また、他に方法ありましたら宜しくご教授願います。

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (3件)

最新から表示
回答順に表示

No.3

回答者： abril
回答日時：2008/04/15 13:35

> 例えばyahooオークションの商品画像を一覧で見るようなイメージの、同サイズの商品テンプレートが規則正しく並んでいるページを作りたいのです。

http://special.auctions.yahoo.co.jp/whatshot/ele …
の様なイメージでしょうか？上記は、幅を固定した<div>によるボックスをフロートさせて並べている様ですね。それを3列の場合、4列の場合とスタイルを分けて、それぞれ親要素の幅の1/3以下、1/4以下となるwidthを定義しています。4分割の場合をイメージにするとこんな感じです（テキストですので多少のグリッドのずれは無視して下さい。
■■■■■■■■【親<div>】■■■■■■■
■【子<div>】【子<div>】【子<div>】【子<div>】 ■
■■■■■■■■■■■■■■■■■■■■
あとはこの親ごとの単位でコピペしていくので、子要素の高さが流動的であっても4コラム毎に頭が揃うことになります。

この様なフロートによるコラムの場合は、各コラム（子要素）の高さが固定できない場合、上記の様にコラム全体を親要素で囲んでその単位での編集にするか、親要素で囲まない場合は4コラム毎に"clear: both;"を仕込んだ要素（"display: hidden;"にした<hr>など）を挿入してフロートを解除する、という処理がないと、行ごとの頭が揃わなくなります。子要素のheightを固定してしまえばこの処理は不要となり、編集の手間が更に省けるのですが、その場合ははみ出した場合のoverflowによるスクロール表示の定義が必須となり、見栄え的にスクロールを許すか許さないか、という問題が出てきます。
しかしその何れかの処理が採用できるのであれば：

> 途中部分に１つ追加する・１つ削る、ということが「横４つ入りのテーブル」という構成だと難しい為"display: inline"という形にできないかな。と。

仮に<table>に"display: inline"を定義したとしても、「行を揃える為の処理」を考慮しなければならないのが必須であれば、上記の様な<div>をフロートさせる構成の方がメンテナンス（編集）が楽になるのではないかと思います。

> 他の方法を何かご存知でしたら、図々しくもご教授願えれば幸いです！！

上記と類似の考え方（<div>を使わず、<ul>にしていますが基本は同じです）をまとめたものが別スレッドでありますので、宜しければそちらを参考になさって見て下さい。
http://oshiete1.goo.ne.jp/qa3870470.html

- 0
- 件

通報する

No.2

回答者： abril
回答日時：2008/04/08 18:08

> ブロック要素であるテーブルをスタイルシートでインライン要素に変える

> http://himajin.moo.jp/html/table/table3.html

"display: inline"に変更する事で、本来のtableプロパティが持ち合わせている性質が変質し、<table>内の構成によってはかなり珍妙な表示結果（IE以外の主要モダン・ブラウザで）になる様ですのであまりお奨めできないですね。

> 本体が２カラムにしてあるページのメイン部分に、
> 小さなテーブルが横に４つ、縦に10から50個ほど入っています。
> 今まではテーブルが４つ入りのテーブルを縦にずらっとならべていました。

横4つのテーブル毎に各行を頭揃えにするのであればtableにfloatプロパティを定義し、<table>～</table>を4つ毎に"clear: both;"を仕込んだ<hr>でフロート解除する、というのを繰り返す構成で基本形はできます。
以下は、テーブルを配置する「メイン部分」の幅が500px、各テーブルの幅は125px、という仮定です。各テーブルのデータ量の違いによるデコボコ感を認識して頂く為、各テーブルの構成内容は適当にバリエーションを持たせています。また、本件はCSSにて「２カラム」レイアウトをする方法についての質問ではない為、その部分のスタイルについては一切考慮していません。
----------------------------------------------------------------------
【HTML】
----------------------------------------------------------------------
<?xml version="1.0" encoding="EUC-JP"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja">
<head>
<link rel="stylesheet" href="./css/common.css" type="text/css" media="all" />
<title>サンプル</title>
</head>

<body>

（省略：「メイン部分」のマークアップ開始）
<table class="sample" cellspacing="0" cellpadding="0" border="0" summary="サンプル">
<tr>
<th>見出し</th>
<td>データ</td>
</tr>
<tr>
<th>見出し</th>
<td>データ</td>
</tr>
</table>

<table class="sample" cellspacing="0" cellpadding="0" border="0" summary="サンプル">
<tr>
<th>見出し</th>
<td>データデータデータデータデータデータデータデータ</td>
</tr>
</table>

<table class="sample" cellspacing="0" cellpadding="0" border="0" summary="サンプル">
<tr>
<th>見出し</th>
<td>データ</td>
</tr>
</table>

<table class="sample" cellspacing="0" cellpadding="0" border="0" summary="サンプル">
<tr>
<th>見出し</th>
<td>データ</td>
<td>データ</td>
<td>データ</td>
</tr>
</table>

<hr class="sample" />

<table class="sample" cellspacing="0" cellpadding="0" border="0" summary="サンプル">
<tr>
<th>見出し</th>
<td>データ</td>
</tr>
<tr>
<th>見出し</th>
<td>データ</td>
</tr>
</table>

<table class="sample" cellspacing="0" cellpadding="0" border="0" summary="サンプル">
<tr>
<th>見出し</th>
<td>データデータデータデータデータデータデータデータ</td>
</tr>
</table>

<table class="sample" cellspacing="0" cellpadding="0" border="0" summary="サンプル">
<tr>
<th>見出し</th>
<td>データ</td>
</tr>
</table>

<table class="sample" cellspacing="0" cellpadding="0" border="0" summary="サンプル">
<tr>
<th>見出し</th>
<td>データ</td>
<td>データ</td>
<td>データ</td>
</tr>
</table>

<hr class="sample" />

※以下、同様に繰り返し
（省略：「メイン部分」のマークアップ終了）
----------------------------------------------------------------------
【CSS】
----------------------------------------------------------------------
table.sample {
float: left;
width: 125px;
border-collapse: collapse;
}
table.sample th, table.sample td {
font-size: 12px;
border: solid 1px #000000;
line-height: 140%;
}
hr.sample {
visibility: hidden;
clear: both;
padding: 0;
margin: 0;
}
----------------------------------------------------------------------

以上は大まかなサンプルですので、例えば各<table>毎の余白であるとか4行毎の間隔であるとか、詳細部分のスタイルはニーズに応じてプロパティの定義を調整します。上記構成が質問者様の実現したいイメージと違う様であれば、詳細なイメージを補足して下さい。
あと、基本的な質問ですが、ずらっと並べたいテーブルの内容は、本当に<table>でなければならない／<table>でのマークアップが相応しいものですか？<table>でマークアップされている必然性がないコンテンツであれば、別角度からのマークアップ＆スタイルを考える必要が出てきます。

この回答への補足

わかりやすい実例をありがとうございます！！
お返事遅くなってしまい申し訳ありません。
さっそく試させていただきたいと思います。

＞本当に<table>でなければならない／<table>でのマークアップが相応しいものか？
についてなのですが、
例えばyahooオークションの商品画像を一覧で見るようなイメージの、
同サイズの商品テンプレートが規則正しく並んでいるページを作りたいのです。
途中部分に１つ追加する・１つ削る、ということが「横４つ入りのテーブル」という構成だと難しい為"display: inline"という形にできないかな。と。

１つ１つの商品テンプレートがテーブルである必要性・・・
編集のしやすさということ、は言い訳ですね。
他の方法が思いつきませんでした。
CMSツールのようなものの導入も検討いたしましたが、それは諸事情で却下となり、現在の小さなテーブルがたくさん！！な構成になっています。

他の方法を何かご存知でしたら、図々しくもご教授願えれば幸いです！！