Markdownの表でセルのバックグラウンドにカラーを

# はじめに
Markdownの表でセルのバックグランドにカラーをつけるやりかたです。
VSCodeのプレビューやPDF出力に反映できます。
忘れないうちに記事にしておきます。
※2020/11/06 MarkDown Preview (v0.5.13)の動作が少し変更されたようで全体に見直しました。

# 前提
* Windows 7 以上のOS
* VSCode(Visual Studio Code)インストール済み
* VSCode拡張機能 Markdown Preview Enhancedインストール済み (2020/11/16 v0.5.13)
* VSCode拡張機能 Markdown PDFインストール済み

# 元ネタの表
## Markdownの記述

|№|色|値|
|:--:|:--:|:--:|
|1|white|#ffffff|
|2|black|#000000|
|3|red|#ff0000|
|4|blue|#0000ff|
|5|yellow|#ffff00|
|6|gree|#008000|
|7|orange|#ffa500|
|8|pink|#ffc0cb|

[Markdown]

```markdown
|№|色|値|
|:--:|:--:|:--:|
|1|white|#ffffff|
|2|black|#000000|
|3|red|#ff0000|
|4|blue|#0000ff|
|5|yellow|#ffff00|
|6|gree|#008000|
|7|orange|#ffa500|
|8|pink|#ffc0cb|
```

## htmlの記述
Markdownの記述をhtmlで表現すると下記のようにります。

<table>
<tr><td>№<td>色<td>値
<tr><td>1<td>white<td>#ffffff
<tr><td>2<td>white<td>#000000
<tr><td>3<td>red<td>#ff0000
<tr><td>4<td>blue<td>#0000ff
<tr><td>5<td>yellow<td>#ffff00
<tr><td>6<td>green<td>#008000
<tr><td>7<td>orange<td>#ffa500
<tr><td>8<td>pink<td>#ffc0cb
</table>

[html]
\<table>～\</table>で表を定義します。
行は\<tr>でセルは\<td>で定義します。
\<td>にbgcolorを定義すれば、colorを指定できます。

```html
<table>
<tr><td>№<td>色<td>値
<tr><td>1<td>white<td>#ffffff
<tr><td>2<td>white<td>#000000
<tr><td>3<td>red<td>#0000ff
<tr><td>4<td>blue<td>#ffff00
<tr><td>5<td>yellow<td>#ffff00
<tr><td>6<td>green<td>#ffff00
<tr><td>7<td>orange<td>#ffff00
<tr><td>8<td>pink<td>#ffff00
</table>
```

[修正後のhtml]

```html
<table>
<tr><td>№<td>色<td>値
<tr><td>1<td bgcolor=white>white<td>#ffffff
<tr><td>2<td bgcolor=black><font color=white>black<td>#000000
<tr><td>3<td bgcolor=red><font color=white>red<td>#ff0000
<tr><td>4<td bgcolor=blue><font color=white>blue<td>#0000ff
<tr><td>5<td bgcolor=yellow>yellow<td>#ffff00
<tr><td>6<td bgcolor=green><font color=white>green<td>#008000
<tr><td>7<td bgcolor=orange>orange<td>#ffa500
<tr><td>8<td bgcolor=pink>pink<td>#ffc0cb
</table>
```
これをそのまま、VSCodeのMarkdownの中に貼り付けると表のセルに色を付けることができます。
**Qitta**のMarkdownプレビューではbgcolorが対応していないようなので、Markdown Preview Enhancedのプレビュー結果を貼り付けます。

![2019-05-21-15-16-00.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/239597/2661b8a6-52e1-6b39-0c0b-53ffa592ba98.png)

これはhtmlの普通のやりかたです。

## Markdownミックスhtml
Markdownとhtmlのミックスを試してみました。

```markdown
|№|色|値|
|:-:|:-:|:-:|
|1<td bgcolor=white>white|#ffffff|
|2<td bgcolor=black><font color=white>black|#000000|
|3<td bgcolor=red><font color=white>red|#0000ff|
|4<td bgcolor=blue><font color=white>blue|#ffff00|
|5<td bgcolor=yellow>yellow|#ffff00|
|6<td bgcolor=green><font color=white>green|#ffff00|
|7<td bgcolor=orange>orange|#ffff00|
|8<td bgcolor=pink>pink|#ffff00|
```
[Markdown Preview Enhanced プレビュー]  
~~右に一列ブランクが挿入されます。\<td>タグ分が付加されます。~~
~~見栄えをすてれば、これでもバックグラウンドにカラーが付いてます。~~
右のブランク列がなくなりました。

![2020-11-06-18-53-16.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/239597/a5b7f742-4322-8dea-6cc4-4d0e3ac0b3d3.png)

# PDFの出力結果
VSCode拡張機能 Markdown PDFの出力結果です。
上がMarkdownとhtmlミックスの結果、下がhtmlのみ記述結果です。
**ほぼいけてませんか？**

![2019-05-21-15-48-00.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/239597/201f0d8c-5997-3340-fc9e-d7c62f9e8bfa.png)

# まとめ
Markdownの表のセルに色をどうやって付けるのか、自己研究してみました。
もっと簡単でグッドな方法がありそうです。
とりあえず、**\<td>タグにbgcolorでもいいんじゃない**程度の話ですいません。
[2020/11/06追記]
・MarkDownの場合、\</td>、\</tr>、\</font>はなくてもいけてる。
・htmlの場合、VScodeの構文チェックで\<td bgcolor="white">などの色指定はダブルクォーテーションでカラーを閉じる、また\</td>、\</tr>、\</font>も記述しないとエラーになる。