【続】MkDocsでテーブルのセル結合がしたい(mdx_tableau編)

結論： [mdx_tableau](#mdx_tableau)がいい感じ。


[前回の記事](https://qiita.com/nicoyanagi/items/94ddd00ecadf0e2c3eb6)ではtable.pyを直接編集してmarkdownのテーブルセル結合を実現したが、
よくよくPython-Markdownのドキュメントを見てたら
Third Party Extensionsにすでにセル結合できるやつがあったわ。

https://github.com/Python-Markdown/markdown/wiki/Third-Party-Extensions#generic--structure

 * [Table cell and row spans](https://github.com/Neepawa/cell_row_span): Provides spanned cells and columns in tables. Works with Python Markdown versions 2.6 and 3 under both Python 2 and Python 3.
 * [mdx_spantables](https://github.com/Griffon26/mdx_spantables): Provides spanned table columns and rows. Works with Python Markdown 2.6; fails with ImportError on Python Markdown 3.
     これはPython Markdown 2.6専用のようだ
 * [mdx_tableau](https://github.com/pragdave/mdx_tableau): Table markup with row and column spans, per-cell formatting, optional or multiple headers, ….

既にあるならそっちを使った方が良いよね。
というわけで試してみる。


# Table cell and row spans
* インストール方法
```
$ pip install git+https://github.com/Neepawa/cell_row_span
```

mkdocs.ymlに
```
markdown_extensions:
 - cell_row_span
```
を追加

* 実行してみる

```
| Column 1                | Col 2 | Big row span   |
|:-----------------------:|-------| -------------- |
| r1_c1 spans two cols           || One large cell |
| r2_c1 spans two rows    | r2_c2 |                |
|_^                      _| r3_c2 |                |
|    ______ &#20;         | r4_c2 |_              _|
```

![実行例](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3143045/44624001-0314-19a8-4ca9-345c77228280.png)

rowspanはできてるけどcolspanがダメですね…

# mdx_tableau
* インストール方法

```
$ pip install git+https://github.com/tableau-tables/python-tableau-parser
```

* python-markdownを*.pyから直接起動するには

```
markdown.markdown(your_documenti, extensions=[..., 'python-tableau-parser', ...])
```

<del>MkDocsから使用するにはmkdocs.ymlに次の記述を追加する</del>

  > <del>markdown_extensions:
  >  <del> - def_list
  >  <del> - python-tableau-parser
  >  <del> - pymdownx.superfences
  >  <del> :       :

<del>とtableau-tablesのREADME.mdには書かれてあったが、</del>
```
$ mkdocs serve
ERROR    -  Config value 'markdown_extensions': Failed to load extension 'python-tableau-parser'.
            ModuleNotFoundError: No module named 'python-tableau-parser'
Aborted with 1 Configuration Errors!
```

<del>となり実行できなかった。</del>

<del>cell_row_spanもtableau-tablesもダメでした。
うまくいかないもんである。</del>

<del>tableau-tablesを動くようにするか、
table.pyの変更をThird Party Extension化するか…</del>

<del>tableau-tablesのほうが色々機能がありそうなんだけどね。</del>

# 追記

[tableau-tablesのissues](https://github.com/tableau-tables/python-tableau-parser/issues/1)にそのものズバリ書いてあった

* [string-scanner](https://pypi.org/project/string-scanner/)が必要
```
pip install string-scanner
```
* extension が python-tableau-parser → mdx_tableauに変更
mkdocs.ymlに書くのはpython-tableau-parserではなくmdx_tableau を書く。
つまり

```mkdocs.yml
markdown_extensions:
 - mdx_tableau
```
を追加

# 使い方
https://tableau-tables.github.io/

文法はVSCodeのMarkdown Preview Enhancedで使われているセル結合と異なっているが、色々柔軟性があるようだ。
いいじゃん！


| 記号 | 説明　| 説明(原文) |
| ---- | ---- | --------- |
| ^ | 上のセルと結合 | Merge this cell with the one above it. Multiple cells in a column may be merged　|
| { | 左のセルと結合 | Merge this cell with the one to its left. Multiple cells in a row may be merged |
| < | 左寄せ| Left align this cell |
| = | 中央寄せ| Center this cell |
| > | 右寄せ | Right align this cell |
| # | 見出しセル| Make this cell a header (use \<th\>) |
| .class | | Apply the CSS class to this cell |


サンプルも載っている。よさげ。

https://tableau-tables.github.io/samples/

## 試しに使う

* 従来の標準的な記法はもちろん使える

```
| 見出し1 | 見出し2  | 見出し3 |
| ------- | -------- | ------- |
|  a      | b        | c       |
|  d      | e        | f       |
|  g      | h        | i       |
```

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3143045/c15e53de-df62-31c3-773c-8978df39c6b6.png)

* セル結合

```
| 見出し1 | 見出し2  | 見出し3 |
| ------- | -------- | ------- |
|  a      |{         | c       |
|  d      | e        |{        |
|^        | h        |{        |
```

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3143045/bfc370f4-2b99-dd43-b7e6-040d66059944.png)

* 複数行の見出し

```
| 見出し1 | 見出し2  | 見出し3 |
| ------- | -------- | ------- |
|# 見出し4|# 見出し5 |^        |
|  d      | e        |{        |
|^        | h        |{        |
```

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3143045/dc5b0acd-48ea-f0fe-077a-3e107b27682b.png)

* 最初の行を |! で始めるとキャプションも付けられる
```
|! 表１ サンプル |
| 見出し1 | 見出し2  | 見出し3 |
| ------- | -------- | ------- |
|# 見出し4|# 見出し5 |^        |
|  d      | e        |{        |
|^        | h        |{        |
```

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3143045/1d7864d2-f4ad-41d5-728b-a101cf9d4d45.png)


うん、いい感じ:relaxed: