エキサイトブログで表(罫線)を表現したい

普通のHTMLであれば、tableタグを用いることで表(テーブル)を表現できるのですが、エキサイトブログは table タグが使えません。

で、いろいろ探してみたところ、CSSでborderを設定することで罫線を引くことができるようです。

その方法が

ただ、この方法だと列幅が固定になってしまいます。

そして、一番の欠点はDBのテーブル例とかで列数が多い時に表示しきれないうえ、列幅を超える文字数を指定すると次の列とダブってしまうということです。

こんな感じになってしまいます。

あいうえおあいうえお

かきくけこかきくけこ

行1-1

行1-2

行1-3

行1-4

行2-1

行2-2

行2-3

行2-4

で、考えたのは結局シンプルにテキスト記述の罫線表を作ることです。

これもいちいち手で書いてると時間かかるので、mkTableなどのツールを使って表を作ります。

これを普通にエキサイトブログに張り付けるとフォントが等幅じゃないので崩れます。

で pre タグで囲ってやると意図どおりになります。

こんな感じです。

┌──────────┬──────────┬──────────┬──────────┐

│あいうえおあいうえお│かきくけこかきくけこ│さしすせそさしすせそ│たちつてとたちつてと│

├──────────┼──────────┼──────────┼──────────┤

│行1-1 │行1-2 │行1-3 │行1-4 │

├──────────┼──────────┼──────────┼──────────┤

│行2-1 │行2-2 │行2-3 │行2-4 │

└──────────┴──────────┴──────────┴──────────┘

追記:

preタグを使ってやる場合、フォントを等幅にしないとうまく表示されません。

スタイルシートで下記のように等幅をフォントを指定してやりましょう

font-family:"ＭＳゴシック","IPAゴシック",monospace,sans-serif;

。ＭａｃとＬｉｎｕｘの等幅フォントがわからなかったので、とりあえず、ＭＳゴシックとＩＰＡゴシックだけ指定しました。monospaceでも等幅になりますが、スペースが等幅にならなかったりします。

また、IE8,Chrome,Firefox3ではＯＫだったんですが、Firefox4ではわずかにずれます。

3流プログラマのメモ書き