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

元開発職→社内SE→派遣で営業支援→開発戻り浦島太郎状態の三流プログラマのIT技術メモ書き。 このメモが忘れっぽい自分とググってきた技術者の役に立ってくれれば幸いです。

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

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

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

その方法が

タグを使えないExciteブログの記事内に表を挿入する方法

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

そして、一番の欠点は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:"MS ゴシック","IPAゴシック",monospace,sans-serif;

。MacとLinuxの等幅フォントがわからなかったので、とりあえず、MSゴシックとIPAゴシックだけ指定しました。monospaceでも等幅になりますが、スペースが等幅にならなかったりします。

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