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


[PR]
by as-o2 | 2007-02-08 17:19 | eXciteBlog-HowTo | Comments(15)
Commented by ghostbass at 2007-02-09 01:35 x
参考にします。
.hyoumodoki br{clear:both;}って、自力で<br />を入れなくて大丈夫なのでしたっけ?
Commented by fenomenoblaugrana at 2007-02-09 02:43
早速アップして頂きまして有難うございます!
初心者なので少し時間がかかりそうですが、頑張ります。私のブログにもお知らせ下さって有難うございました。
m(_ _)m
Commented by fenomenoblaugrana at 2007-02-09 03:42
続け様にコメントすみません。
とても丁寧にわかりやすく説明して頂けたお陰で簡単にできました。
一つ、質問があります。
表全体を記事欄でセンタリングするにはどうしたら良いのですか?素人ながら色々やってみたのですが、どうも及ばなくて。
宜しくお願いします。
Commented by as-o2 at 2007-02-09 12:37
ghostbassさん、《eXcite》もおもちなのですか。
投稿時に自動挿入される<br>で改行されるようです。

fenomenoblaugranaさん
センタリングを記事中に紫で追記してみました。
Commented by fenomenoblaugrana at 2007-02-09 14:34
ありがとうございました。思った通りにできあがりました。
これからも遊びに来させてもらいますね♪
本当にお世話様でしたm(_ _)m
Commented by HarryBlog at 2007-02-09 21:59
なるほど、右と下のマージンを空けるのかぁ。
以前やった時は重なる部分の線を消したりしたっけ。
http://harryblog.exblog.jp/3621188/
Commented by as-o2 at 2007-02-10 02:19
fenomenoblaugranaさん、おつでした。。

Harryさん!!Harryさんところで拝見したとおもって、いっしょけんめ検索したんだけどうまく当たらなかったです(TーT
これだぁ。。。。
Commented by junktds at 2007-02-11 02:07
一応あります。……スペースだけ。いえ、普通にhtml書く場合にも使えるな、と思いました。
Commented by junktds at 2007-02-11 02:20
うぎゃjunktds = ghostbassでした。ログアウトできてねーじゃんorz
Commented by as-o2 at 2007-02-11 02:35
普通にHTMLをお書きになる場合は、Tableタグでよいかと^^
Commented by 通りがかり at 2011-03-18 19:34 x
古いネタにすいません。
divでテーブル作成検討中です。
上記を参考にさせてもらっていますが、内容が長い場合にあふれてしまいます。
対応可能でしょうか?
Commented by as-o2 at 2011-03-18 23:10
通りがかりさま
記事に少し足しました。「対応可能」と言い切って良いかどうか、微妙なレベルです。
Commented by as-o2 at 2011-04-05 19:44
1コメント削除。

Google翻訳で「ポルトガル語」を選択して翻訳してみたら

ポルトガル語から日本語に翻訳
)笑:こんにちは非常によく構成のトピック、私はFCARの友達のブログをsecalhar可能性が、多くを追加しました!
離れて遊んでから私の名前は、レイモンドですあなたはブログを書く私のブログのメインテーマは非常にこの異なっているように....
私はあなたの資本を危険にさらすことなくポーカーをプレーするポーカー無料でお金の話ブログを書く......
私は書かれて見たものが好き!

ま、きちんとした日本語じゃないけど、だいたいのことはわかるw
Commented by at 2011-04-08 21:30 x
詐欺師レイモンドの陰謀。麻生さんちの執事にブン殴られてそうですね。
Commented by as-o2 at 2011-04-09 13:25
林さんどもども。陰謀っていうのはお粗末だけどなぁ。執事は最近、文句も言わずにおとなしく働いてますw