テーブルタグを使わない、表作り。

質問

テーブルタグを使わない、表作りの方法を探しています。

<xhtml>
<p>
<span>テキスト</span><span>テキスト</span><span>テキスト</span><br/>
<span>テキスト</span><span>テキスト</span><span>テキスト</span>
</p>

{css}
span {
width: 100px;
border: medium solid blue;
}

　自分で考えて、上記のタグを書きました。
ＩＥだときれいな表ができるのですが、Firefoxだとボックスの幅を指定するｃｓｓのタグを読み取らず、表が崩れてしまいました。
　テーブルタグを使わずに表を作成する方法を教えてください。

回答No.3

koutarou504 · ベストアンサー

<div>テキスト</div><div>テキスト</div><div>テキスト</div><br/>
<div id="sidKodvTable01">テキスト</div><div>テキスト</div><div>テキスト</div>

div{
width: 100px;
border: medium solid blue;
float:left;
}
#sidKodvTable01{
clear:both;
}

（OS : Windows XP SP2
ブラウザ : IE6, Opera8.5 Firefox1.5 Netscape7.1, Mozilla1.7.12
などで検証。）

span というインライン要素にボックス幅というブロック要素に有効な指定をしているから、Firefox の様に正しい解釈をして幅の指定が無効になるのです。

という事で、span の代わりに div などブロック要素を用いましょう。
その上で改行されるのも困るので、float:left; を追記します。逆に改行に対しては clear:both; となりますが・・・。

IE は結構、勝手な解釈をする事があるので、IE で望む結果が得られているとしても、記述として誤っている事が多々ありますので、その辺は意識しておいた方が良いと思います。

尚、今回の対応例は技術的な面のみを考えての事なので、意味的に適切かどうか不明です。
なにより、CSS が無効にされて閲覧されたりする場合を想定すると、HTML は span のままで、display:block; とする発想もあります。
ただ、意図が不明の為、詳細は明記できまんが・・・。
（いろんな手法があるという事です・・・。）

回答No.4

snow_fish_ff

<pre><tt>
テキスト、改行、ハイフン、空白などで表の内容
</tt></pre>

<table>タグを読めないブラウザがあった時代は、一般的な表の作り方でした。

この回答が役に立つかどうかは、質問の意図によっても違います。

回答No.2

cyokokichi

参考URLを見てください。
テーブルを使わずに表ができます。
xml+xslです。
xhtmlだからOKですよね。

参考URL：

http://www.stackasterisk.jp/tech/java/xml03_03.jsp#4_1

回答No.1

partita

＞ボックスの幅を指定するｃｓｓのタグを読み取らず
spanはボックスではありません。

補足要求です。
なぜ、テーブルタグを使わずに表の作成をするのですか？