人気ブログランキング |

2007年 02月 08日 ( 2 )

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指定」を増やしていくと、表の列数を増やし、かつ幅を指定することができます。

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

More
タグ:

色文字機能と文字サイズ機能ができた。

http://blog.excite.co.jp/staff/5090033/
《eXcite》にも、色文字機能と文字サイズ機能ができました。
ちなみに色文字は、こんなタグを吐きます。
<span style="color:rgb(153,153,153);"></span>
rgbって珍しくね??

でもサイズは、
<font size="1"></font>
<font size="2"></font>
<span style="line-height: 1.2;"><font size="5"></font></span>
<span style="line-height:1.4;"><font size="7"></font></span>
……フォントタグなの^^

行間を考えてくださったのは、ありがたいことではあります。

色文字/文字サイズがないから、《eXcite》ブログはどこへいっても上品で読みやすかったのにな。って、心の中で思っているのは、絶対に秘密w
タグ: