テーブルをcssでどうやる？

質問

<table border="1">
<tr>
<td>あ</td>
<td>い</td>
<td>う</td>
<td>え</td>
<td>お</td>
</tr>
<tr>
<td>かか</td>
<td>き</td>
<td>く</td>
<td> け け け </td>
<td>こ</td>
</tr>
<tr>
<td>ささ</td>
<td>ししし</td>
<td>す</td>
<td>せせ</td>
<td>そ</td>
</tr>
</table>

横にも長く、縦にも長く
セルに入る文字も１文字限定ではない場合、
テーブルで表現するのは簡単ですが
これをcssでできるのでしょうか？

セルに入る文字数が同じならば、なんとかできそうな気もするんですが
そうじゃない場合、
縦の列を並べるというか事はできるんでしょうか？

回答No.2

noname#19206 · ベストアンサー

ANo.1 でかなり威勢のいい事を言ってみたものの、
本当に脱テーブルレイアウトを試みている場合を考慮していませんでした(^^;
一応脱テーブルレイアウトのためのテーブルもどき CSS の例を掲載しておきます。

.box_a {
width:15%;
float:left;
}

.box_b {
clear:both;
}

<div class="box_b">
<div class="box_a">あ</div>
<div class="box_a">い</div>
<div class="box_a">う</div>
<div class="box_a">え</div>
<div class="box_a">お</div>
</div>

<div class="box_b">
<div class="box_a">かか</div>
<div class="box_a">き</div>
<div class="box_a">く</div>
<div class="box_a">け</div>
<div class="box_a">ここ</div>
</div>

<div class="box_b">
<div class="box_a">ささ</div>
<div class="box_a">し</div>
<div class="box_a">す</div>
<div class="box_a">せせ</div>
<div class="box_a">そ</div>
</div>

<div class="box_b"> </div>

お礼

参考になりました。
ありがとうございました。

回答No.1

noname#19206

何のためにテーブルを CSS で代用するのでしょうか？
脱テーブルとはよく言われますが、テーブルそのものを使うなという意味ではありません。
ページレイアウトの整形にテーブルを使うなということです。

テーブルが本来持つ意味合いは図表・複雑なリストであり、
それを表現するのにテーブルを使うことは全く問題がありません。
例示されているのは単純な図表であり、テーブルレイアウトではないように見えます。

不要なテーブルを CSS で代用することはユーザー側のパソコンへ負担を減らすことともなりますが、
必要なテーブルまで CSS で代用してしまうと、CSS が無効な環境やテキストブラウザなどでその部分が持つ情報を利用できなくなり逆効果です。