人気ブログランキング |

divタグで 表組もどき、再現

fenomenoblaugrana さんに、
>divタグで表もどきを作るというワザ
というリクエストをいただきまして。

《eXcite》では、tableタグが禁止語(入力しても保存すると消える)になっています。ですので、表は、divで「もどき」をつくるか、画像で貼るか、以前書いたようにスキンとして強引に表示するしかありません。

《eXcite》での表作成にdivを使うワザは、以前どこかで見たことがあるので、リンクで回答したかったのですが、検索にひっかかってくれません(ある、と断言なさっているブログさんは非公開ですし^^) 仕方ないので、自分でつくりなおしました。

仕上がりは、こんなでいいでしょうかね? (行数を増やすのは単にコピペで^^)
→真ん中置きにしたいとのご要望に対応

aaa
a1
a2

bbb
b1
b2

ccc
c1
c2


投稿時のタグはこんな感じ。
<div class="hyoumodoki">
<div class="t1">aaa</div><div class="t2">a1</div><div class="t3">a2</div>
<div class="t1">bbb</div><div class="t2">b1</div><div class="t3">b2</div>
<div class="t1">ccc</div><div class="t2">c1</div><div class="t3">c2</div>
</div>


スキンCSSに、下記のように追加しています。
/*表もどき*/
.hyoumodoki {margin:0 auto;
width:25em;
text-align:ceter;}

.hyoumodoki br{clear:both;}
div.t1{display:block;
float:left;
margin:0 0 1px 1px;
padding:4px;
width:5em;
border:1px solid #666;
}
div.t2{display:block;
float:left;
margin:0 0 1px 1px;
padding:4px;
width:10em;
border:1px solid #666;
}
div.t3{display:block;
float:left;
margin:0 0 1px 1px;
padding:4px;
width:7em;
border:1px solid #666;
}

「width:~em」(幅、何文字分)で列幅を調整してお使いください。
同じ幅のセルを何度も使う場合は、同じ行に、たとえば、t1を何度も使うのもOKです。
t4,t5など、「class指定」を増やしていくと、表の列数を増やし、かつ幅を指定することができます。

微調整など、不明点があったら、またコメントください^^



2011/3/18コメントより
>内容が長い場合にあふれてしまいます。
「内容が長い行」に「高さ」を手動で設定すれば、「通りいっぺん」な対応はできるのですが。文字サイズを変えてみている方はズレてしまいます。厄介ですね^^;
CSS
.th4{height:4em}

HTML
<div class="hyoumodoki">
<div class="t1 th4">aaa aaa aaa aaa</div><div class="t2 th4">a1</div><div class="t3 th4">a2</div>
<div class="t1">bbb</div><div class="t2">b1</div><div class="t3">b2</div>
<div class="t1">ccc</div><div class="t2">c1</div><div class="t3">c2</div>
</div>


aaa aaa aaa aaa
a1
a2

bbb
b1
b2

ccc
c1
c2


タグ: