table.elを使ったHTMLテーブル生成

Emacs

以下のようなテキストをHTMLテーブル化する。

,単位,最小,最大,平均
CPU使用率,%,10,90,50
ディスク使用率,Gb,100,200,150
メモリ使用率,Mb,200,500,250

罫線によるテーブル化

CSVのテキストをリージョンで選択し、M-x table-capture を実行。ミニバッファで入力が求められるので、例えば以下のように入力する。

  • Column delimiter regexp: , (デリミタ。今回はカンマ一文字)
  • Row delimiter regexp: Ctrl-q,Ctrl-j (改行)
  • Justify: center (他にright, left)
  • Minimum cell width: 15 (適当)

そうすると以下のような表ができる。

+---------------+---------------+---------------+---------------+---------------+
|               |     単位      |     最小      |     最大      |     平均      |
+---------------+---------------+---------------+---------------+---------------+
|   CPU使用率   |       %       |      10       |      90       |      50       |
+---------------+---------------+---------------+---------------+---------------+
|ディスク使用率 |      Gb       |      100      |      200      |      150      |
+---------------+---------------+---------------+---------------+---------------+
| メモリ使用率  |      Mb       |      200      |      500      |      250      |
+---------------+---------------+---------------+---------------+---------------+

HTMLによるテーブル化

罫線でできたセルにフォーカスがあると、モードラインがTableとなる(罫線上ではなくセルにフォーカスがあること)。ここで、Ctrl-^を実行すると、ミニバッファで出力するファイルが聞かれるので適当に入力すると以下のようなHTMLができる。nbspがあるので必要なければ削除する。

<!-- This HTML table template is generated by emacs 22.2.1 -->
<table border="1">
  <caption>Table</caption>
  <tr>
    <td align="center" valign="top">
      &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
    </td>
    <td align="center" valign="top">
      &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;単位&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
    </td>
    <td align="center" valign="top">
      &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;最小&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
    </td>
    <td align="center" valign="top">
      &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;最大&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
    </td>
    <td align="center" valign="top">
      &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;平均&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
    </td>
  </tr>
  <tr>
    <td align="center" valign="top">
      &nbsp;&nbsp;&nbsp;CPU使用率&nbsp;&nbsp;&nbsp;
    </td>
    <td align="center" valign="top">
      &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;%&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
    </td>
    <td align="center" valign="top">
      &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;10&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
    </td>
    <td align="center" valign="top">
      &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;90&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
    </td>
    <td align="center" valign="top">
      &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;50&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
    </td>
  </tr>
  <tr>
    <td align="center" valign="top">
      ディスク使用率&nbsp;
    </td>
    <td align="center" valign="top">
      &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Gb&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
    </td>
    <td align="center" valign="top">
      &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;100&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
    </td>
    <td align="center" valign="top">
      &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;200&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
    </td>
    <td align="center" valign="top">
      &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;150&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
    </td>
  </tr>
  <tr>
    <td align="center" valign="top">
      &nbsp;メモリ使用率&nbsp;&nbsp;
    </td>
    <td align="center" valign="top">
      &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Mb&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
    </td>
    <td align="center" valign="top">
      &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;200&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
    </td>
    <td align="center" valign="top">
      &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;500&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
    </td>
    <td align="center" valign="top">
      &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;250&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
    </td>
  </tr>
</table>

メモ

  • 前は日本語が入っているとテーブルがくずれてしまったような気がした。Emacsバージョンが古いと表示がくずれるかも。
  • table.elが役に立つのはHTML化することより、メール、テキスト、ソースファイルにテーブルを簡単に書けること
  • 特に、RFCで書かれているようなパケット構造やバイナリデータの構造を書くとき便利
  • 他の人も編集するファイルでテーブルを多用すると、Emacsを使っていない人から編集しづらいと苦情がくることがある
;; ---------------------------------------------------------
;; テーブルモード
;; ---------------------------------------------------------
;; [元ネタ]
;; http://www.emacswiki.org/emacs/TableMode
;; http://murakan.cocolog-nifty.com/blog/2009/01/emacs-tips-27c2.html
;; http://wassr.jp/user/dummy/statuses/B50uQibW2u
;;
;; [使い方]
;; M-x table-insert
;;  テーブルを挿入する。ミニバッファにカラム数なとが問われる
;;  Number of columns (default 3): (横方向のセル数)
;;  Number of rows (default 3):    (縦方向のセル数)
;;  Cell width(s) (default 5):     (セルの横幅)
;;  Cell height(s) (default 1):    (セルの高さ)
;;
;; M-x table-unrecognize-table
;;  カーソル位置のテーブルの編集モードを抜ける
;;
;; M-x table-recognize-table
;;  カーソル位置のテーブルの編集モードに入る
;;
;; C->, C-c C-c > (table-widen-cell)
;;  カーソル位置のセルを横拡張
;; C-<, C-c C-c < (table-shorten-cell)
;;  カーソル位置のセルを横収縮
;; C-:, C-c C-c : (table-justify)
;;  セル中の文字列の位置を操作 (left/center/right)
;;
;; 縦と横方向の分割と結合
;; M-x table-split-cell
;;  セルの分割 (vertically, horizontally)
;; C--, C-c C-c - (table-split-cell-vertically)
;;  セルの横分割
;; C-|, C-c C-c | (table-split-cell-horizontally)
;;  セルの縦分割
;; C-*, C-c C-c * (table-span-cell)
;;  セルの結合。(left/right/below/above)
;;
;; C-^ (table-generate-source)
;;  HTML, LaTeX, CALS (DocBook DTD) に変換
;;
;; M-x table-capture
;;  リージョンをテーブル化
;; M-x table-releas
;;  カーソル位置にあるテーブルモードのテーブルの罫線を削除

参照

EmacsWiki: Table Mode
【Emacs】 テーブル編集: 日々此精進
table-insert で表を書いて，Ctrl + ^ で html or l...