Emacs org-modeを使ってみる: (32) HTML表のスタイル設定

emacs org-mode html

このエントリーをはてなブックマークに追加

今回は，HTMLにエクスポートした表のスタイル設定についてまとめてみる．
なおUbuntu 8.04 LTSとEmacs22上で， org-6.34c (2010年1月10日リリース)の利用を前提にしている．

リンク

HTMLにエクスポートした表のスタイル設定

CSSにおける隣接セレクタを用いて，以下のように記述する．

#+BEGIN_HTML
<style type="text/css">
table { margin: 0.5em 2em; }
th { background-color: lightyellow;
     border-style: solid; border-color: black; border-width: thin; }
td { background-color: #eeeeee;
     border-style: solid; border-color: black; border-width: thin; }
td+td { background-color: white; }
#table1 td { text-align: left; }
#table1 td+td { text-align: right; }
</style>
#+END_HTML

すると，以下のように id を table1 と設定した表について， HTMLエクスポートした場合，左端の欄は左寄せになり，その他の欄は右寄せになる．

#+CAPTION: パソコン代金
#+ATTR_HTML: id="table1"
|----+----------+--------+------|
|    | パソコン | ソフト | 通信 |
|----+----------+--------+------|
| Q1 |       30 |      5 |    2 |
| Q2 |        0 |     15 |    2 |
| Q3 |       50 |     20 |    2 |
| Q4 |        0 |      3 |    2 |
|----+----------+--------+------|

追記 (2010-12-25)

  • </style> が抜けていたのを修正しました． iwahataさん，ありがとうございました．
  • 以下のようにしてもOKです．
#+STYLE: <style type="text/css">
#+STYLE: #table1 td.left { text-align: left; }
#+STYLE: #table1 td.right { text-align: right; }
#+STYLE: </style>

#+CAPTION: パソコン代金
#+ATTR_HTML: id="table1"
|-----+----------+--------+------|
|     | パソコン | ソフト | 通信 |
|-----+----------+--------+------|
| <l> |      <r> |    <r> |  <r> |
| Q1  |       30 |      5 |    2 |
| Q2  |        0 |     15 |    2 |
| Q3  |       50 |     20 |    2 |
| Q4  |        0 |      3 |    2 |
|-----+----------+--------+------|


「Emacs org-modeを使ってみる」の目次