Qiita のテーブル記法についての試行錯誤

markdown ではテーブル（表）をとても簡単に記述することができる。偶数行と奇数行の色分けも自動的に行ってくれるが，逆に色塗りを止めさせようと思うと非常に苦労した・・・という備忘録である。

:::note warn

2024年4月18日現在，Qiitaの仕様変更によりテーブルの偶数行と奇数行の色分けが無くなっているようです。

2024年5月28日現在，色分けが復活したようです。
:::

:::note
Qiita の仕様変更に右往左往されたくない方は下記の記事を参照下さい。
[PlantUMLのテーブルを極める - Qiita](https://qiita.com/TETSURO1999/items/d831148f3dae1bf332f9)
:::

# markdown によるテーブルの書き方
こういうシンプルな表はとても簡単に書くことができる。強制的に偶数行と奇数行の色分けがされてしまうが，これが嫌でなければこの書き方が一番楽だと思う。
```markdown
|発売日|出版社|書名|著者|価格| 
|:--:|:--:|:--:|:--:|:--:|
|07/04|集英社|青の祓魔師(29)|加藤和恵|594円|
|07/06|講談社|ザ・ヒステリックトリガー(3)|加納万太郎|759円|
|07/06|秋田書店|ヤンキーJKクズハナちゃん(17)|宗我部としのり|550円|
|07/10|マッグガーデン|ふかふかダンジョン攻略記(11)|KAKERU|693円|
|07/10|KADOKAWA|コードギアス 復活のルルーシュ(4)|小笠原智史|未定|
|07/12|SQUARE ENIX|英雄教室(17)|岸田こあら|730円|
|07/12|SQUARE ENIX|ばらかもん(19)|ヨシノサツキ|730円|
|07/12|SQUARE ENIX|とある魔術の禁書目録(29)|近木野中哉|550円|
```
|発売日|出版社|書名|著者|価格|
|:--:|:--:|:--:|:--:|:--:|
|07/04|集英社|青の祓魔師(29)|加藤和恵|594円|
|07/06|講談社|ザ・ヒステリックトリガー(3)|加納万太郎|759円|
|07/06|秋田書店|ヤンキーJKクズハナちゃん(17)|宗我部としのり|550円|
|07/10|マッグガーデン|ふかふかダンジョン攻略記(11)|KAKERU|693円|
|07/10|KADOKAWA|コードギアス 復活のルルーシュ(4)|小笠原智史|未定|
|07/12|SQUARE ENIX|英雄教室(17)|岸田こあら|730円|
|07/12|SQUARE ENIX|ばらかもん(19)|ヨシノサツキ|730円|
|07/12|SQUARE ENIX|とある魔術の禁書目録(29)|近木野中哉|550円|

# html タグを用いた場合
html タグを用いても書ける。記述量は少し増えるがタグを閉じなくても良いので，それなりに省力化が図られている。あと caption が使えるのも嬉しい。ただ align 指定ができないし，bgcolor も指定できない。
```html
<table>
<caption>2023年7月発売のコミックス
<thead>
<tr><th>発売日<th>出版社<th>書名<th>著者<th>価格 
<tbody>
<tr><td>07/04<td>集英社<td>青の祓魔師(29)<td>加藤和恵<td>594円
<tr><td>07/06<td>講談社<td>ザ・ヒステリックトリガー(3)<td>加納万太郎<td>759円
<tr><td>07/06<td>秋田書店<td>ヤンキーJKクズハナちゃん(17)<td>宗我部としのり<td>550円
<tr><td>07/10<td>マッグガーデン<td>ふかふかダンジョン攻略記(11)<td>KAKERU<td>693円
<tr><td>07/10<td>KADOKAWA<td>コードギアス 復活のルルーシュ(4)<td>小笠原智史<td>未定
<tr><td>07/12<td>SQUARE ENIX<td>英雄教室(17)<td>岸田こあら<td>730円
<tr><td>07/12<td>SQUARE ENIX<td>ばらかもん(19)<td>ヨシノサツキ<td>730円
<tr><td>07/12<td>SQUARE ENIX<td>とある魔術の禁書目録(29)<td>近木野中哉<td>550円
</table>
```
<table>
<caption>2023年7月発売のコミックス
<thead>
<tr><th>発売日<th>出版社<th>書名<th>著者<th>価格
<tbody>
<tr><td>07/04<td>集英社<td>青の祓魔師(29)<td>加藤和恵<td>594円
<tr><td>07/06<td>講談社<td>ザ・ヒステリックトリガー(3)<td>加納万太郎<td>759円
<tr><td>07/06<td>秋田書店<td>ヤンキーJKクズハナちゃん(17)<td>宗我部としのり<td>550円
<tr><td>07/10<td>マッグガーデン<td>ふかふかダンジョン攻略記(11)<td>KAKERU<td>693円
<tr><td>07/10<td>KADOKAWA<td>コードギアス 復活のルルーシュ(4)<td>小笠原智史<td>未定
<tr><td>07/12<td>SQUARE ENIX<td>英雄教室(17)<td>岸田こあら<td>730円
<tr><td>07/12<td>SQUARE ENIX<td>ばらかもん(19)<td>ヨシノサツキ<td>730円
<tr><td>07/12<td>SQUARE ENIX<td>とある魔術の禁書目録(29)<td>近木野中哉<td>550円
</table>

# &lt;thead&gt;&lt;tbody&gt; タグを省略した場合
&lt;thead&gt;&lt;tbody&gt; タグを省略すると偶数行と奇数行の色分けルールが崩れてしまう。Qiita の CSS では奇数行の &lt;td&gt; タグのみに着色するという設計になっている。&lt;thead&gt; から &lt;tbody&gt; の領域に変わると行数カウントがいったんリセットされ，以下の例では &lt;tbody&gt; タグを省略しているが，内部的にはすべて &lt;tbody&gt; の領域として扱われるため， &lt;tbody&gt; 領域の1行目は &lt;th&gt; タグのため着色されず，3行目以降の奇数行から着色される。
```html
<table>
<caption>2023年7月発売のコミックス
<tr><th>発売日<th>出版社<th>書名<th>著者<th>価格 
<tr><td>07/04<td>集英社<td>青の祓魔師(29)<td>加藤和恵<td>594円
<tr><td>07/06<td>講談社<td>ザ・ヒステリックトリガー(3)<td>加納万太郎<td>759円
<tr><td>07/06<td>秋田書店<td>ヤンキーJKクズハナちゃん(17)<td>宗我部としのり<td>550円
<tr><td>07/10<td>マッグガーデン<td>ふかふかダンジョン攻略記(11)<td>KAKERU<td>693円
<tr><td>07/10<td>KADOKAWA<td>コードギアス 復活のルルーシュ(4)<td>小笠原智史<td>未定
<tr><td>07/12<td>SQUARE ENIX<td>英雄教室(17)<td>岸田こあら<td>730円
<tr><td>07/12<td>SQUARE ENIX<td>ばらかもん(19)<td>ヨシノサツキ<td>730円
<tr><td>07/12<td>SQUARE ENIX<td>とある魔術の禁書目録(29)<td>近木野中哉<td>550円
</table>
```
<table>
<caption>2023年7月発売のコミックス
<tr><th>発売日<th>出版社<th>書名<th>著者<th>価格 
<tr><td>07/04<td>集英社<td>青の祓魔師(29)<td>加藤和恵<td>594円
<tr><td>07/06<td>講談社<td>ザ・ヒステリックトリガー(3)<td>加納万太郎<td>759円
<tr><td>07/06<td>秋田書店<td>ヤンキーJKクズハナちゃん(17)<td>宗我部としのり<td>550円
<tr><td>07/10<td>マッグガーデン<td>ふかふかダンジョン攻略記(11)<td>KAKERU<td>693円
<tr><td>07/10<td>KADOKAWA<td>コードギアス 復活のルルーシュ(4)<td>小笠原智史<td>未定
<tr><td>07/12<td>SQUARE ENIX<td>英雄教室(17)<td>岸田こあら<td>730円
<tr><td>07/12<td>SQUARE ENIX<td>ばらかもん(19)<td>ヨシノサツキ<td>730円
<tr><td>07/12<td>SQUARE ENIX<td>とある魔術の禁書目録(29)<td>近木野中哉<td>550円
</table>

# &lt;th&gt;タグを省略した場合
先頭行を &lt;th&gt; タグではなく &lt;td&gt; タグにすると偶数行と奇数行の色分けは正常に戻るが，テーブル上端の境界線が消えてしまう。CSS を見てみると &lt;td&gt; セルの上端の境界線は描画しないようになっており，先頭行には必ず &lt;th&gt; タグを配置しなさいという設計指針なのだろう。なお，&lt;td&gt; セル内では太字にするために &lt;b&gt; タグを使う必要がある。これもタグを閉じなくて良いのは便利だが。
```html
<table>
<caption>2023年7月発売のコミックス
<tr><td><b>発売日<td><b>出版社<td><b>書名<td><b>著者<td><b>価格 
<tr><td>07/04<td>集英社<td>青の祓魔師(29)<td>加藤和恵<td>594円
<tr><td>07/06<td>講談社<td>ザ・ヒステリックトリガー(3)<td>加納万太郎<td>759円
<tr><td>07/06<td>秋田書店<td>ヤンキーJKクズハナちゃん(17)<td>宗我部としのり<td>550円
<tr><td>07/10<td>マッグガーデン<td>ふかふかダンジョン攻略記(11)<td>KAKERU<td>693円
<tr><td>07/10<td>KADOKAWA<td>コードギアス 復活のルルーシュ(4)<td>小笠原智史<td>未定
<tr><td>07/12<td>SQUARE ENIX<td>英雄教室(17)<td>岸田こあら<td>730円
<tr><td>07/12<td>SQUARE ENIX<td>ばらかもん(19)<td>ヨシノサツキ<td>730円
<tr><td>07/12<td>SQUARE ENIX<td>とある魔術の禁書目録(29)<td>近木野中哉<td>550円
</table>
```
<table>
<caption>2023年7月発売のコミックス
<tr><td><b>発売日<td><b>出版社<td><b>書名<td><b>著者<td><b>価格 
<tr><td>07/04<td>集英社<td>青の祓魔師(29)<td>加藤和恵<td>594円
<tr><td>07/06<td>講談社<td>ザ・ヒステリックトリガー(3)<td>加納万太郎<td>759円
<tr><td>07/06<td>秋田書店<td>ヤンキーJKクズハナちゃん(17)<td>宗我部としのり<td>550円
<tr><td>07/10<td>マッグガーデン<td>ふかふかダンジョン攻略記(11)<td>KAKERU<td>693円
<tr><td>07/10<td>KADOKAWA<td>コードギアス 復活のルルーシュ(4)<td>小笠原智史<td>未定
<tr><td>07/12<td>SQUARE ENIX<td>英雄教室(17)<td>岸田こあら<td>730円
<tr><td>07/12<td>SQUARE ENIX<td>ばらかもん(19)<td>ヨシノサツキ<td>730円
<tr><td>07/12<td>SQUARE ENIX<td>とある魔術の禁書目録(29)<td>近木野中哉<td>550円
</table>

# 偶数行と奇数行の強制的な色分けを止めさせる方法
これまでの実験で分かったことだが，奇数行の &lt;td&gt; タグが着色されてしまうので中身のない &lt;tr&gt; タグを挿入してすべて偶数行とすればよい。タグを閉じる必要はないので下記のように &lt;tr&gt; タグを連続して打つことになる。
```html
<table>
<caption>2023年7月発売のコミックス
<thead>
<tr><th>発売日<th>出版社<th>書名<th>著者<th>価格 
<tbody>
<tr><tr><td>07/04<td>集英社<td>青の祓魔師(29)<td>加藤和恵<td>594円
<tr><tr><td>07/06<td>講談社<td>ザ・ヒステリックトリガー(3)<td>加納万太郎<td>759円
<tr><tr><td>07/06<td>秋田書店<td>ヤンキーJKクズハナちゃん(17)<td>宗我部としのり<td>550円
<tr><tr><td>07/10<td>マッグガーデン<td>ふかふかダンジョン攻略記(11)<td>KAKERU<td>693円
<tr><tr><td>07/10<td>KADOKAWA<td>コードギアス 復活のルルーシュ(4)<td>小笠原智史<td>未定
<tr><tr><td>07/12<td>SQUARE ENIX<td>英雄教室(17)<td>岸田こあら<td>730円
<tr><tr><td>07/12<td>SQUARE ENIX<td>ばらかもん(19)<td>ヨシノサツキ<td>730円
<tr><tr><td>07/12<td>SQUARE ENIX<td>とある魔術の禁書目録(29)<td>近木野中哉<td>550円
</table>
```
<table>
<caption>2023年7月発売のコミックス
<thead>
<tr><th>発売日<th>出版社<th>書名<th>著者<th>価格 
<tbody>
<tr><tr><td>07/04<td>集英社<td>青の祓魔師(29)<td>加藤和恵<td>594円
<tr><tr><td>07/06<td>講談社<td>ザ・ヒステリックトリガー(3)<td>加納万太郎<td>759円
<tr><tr><td>07/06<td>秋田書店<td>ヤンキーJKクズハナちゃん(17)<td>宗我部としのり<td>550円
<tr><tr><td>07/10<td>マッグガーデン<td>ふかふかダンジョン攻略記(11)<td>KAKERU<td>693円
<tr><tr><td>07/10<td>KADOKAWA<td>コードギアス 復活のルルーシュ(4)<td>小笠原智史<td>未定
<tr><tr><td>07/12<td>SQUARE ENIX<td>英雄教室(17)<td>岸田こあら<td>730円
<tr><tr><td>07/12<td>SQUARE ENIX<td>ばらかもん(19)<td>ヨシノサツキ<td>730円
<tr><tr><td>07/12<td>SQUARE ENIX<td>とある魔術の禁書目録(29)<td>近木野中哉<td>550円
</table>

# 全部 &lt;th&gt; タグにしてしまう
これは第二案である。全部 &lt;th&gt; タグにしても背景は真っ白になる。全部太字になってしまうが，これでも良ければこれでいい。
```html
<table>
<caption>2023年7月発売のコミックス
<tr><th>発売日<th>出版社<th>書名<th>著者<th>価格 
<tr><th>07/04<th>集英社<th>青の祓魔師(29)<th>加藤和恵<th>594円
<tr><th>07/06<th>講談社<th>ザ・ヒステリックトリガー(3)<th>加納万太郎<th>759円
<tr><th>07/06<th>秋田書店<th>ヤンキーJKクズハナちゃん(17)<th>宗我部としのり<th>550円
<tr><th>07/10<th>マッグガーデン<th>ふかふかダンジョン攻略記(11)<th>KAKERU<th>693円
<tr><th>07/10<th>KADOKAWA<th>コードギアス 復活のルルーシュ(4)<th>小笠原智史<th>未定
<tr><th>07/12<th>SQUARE ENIX<th>英雄教室(17)<th>岸田こあら<th>730円
<tr><th>07/12<th>SQUARE ENIX<th>ばらかもん(19)<th>ヨシノサツキ<th>730円
<tr><th>07/12<th>SQUARE ENIX<th>とある魔術の禁書目録(29)<th>近木野中哉<th>550円
</table>
```
<table>
<caption>2023年7月発売のコミックス
<tr><th>発売日<th>出版社<th>書名<th>著者<th>価格 
<tr><th>07/04<th>集英社<th>青の祓魔師(29)<th>加藤和恵<th>594円
<tr><th>07/06<th>講談社<th>ザ・ヒステリックトリガー(3)<th>加納万太郎<th>759円
<tr><th>07/06<th>秋田書店<th>ヤンキーJKクズハナちゃん(17)<th>宗我部としのり<th>550円
<tr><th>07/10<th>マッグガーデン<th>ふかふかダンジョン攻略記(11)<th>KAKERU<th>693円
<tr><th>07/10<th>KADOKAWA<th>コードギアス 復活のルルーシュ(4)<th>小笠原智史<th>未定
<tr><th>07/12<th>SQUARE ENIX<th>英雄教室(17)<th>岸田こあら<th>730円
<tr><th>07/12<th>SQUARE ENIX<th>ばらかもん(19)<th>ヨシノサツキ<th>730円
<tr><th>07/12<th>SQUARE ENIX<th>とある魔術の禁書目録(29)<th>近木野中哉<th>550円
</table>

# &lt;th&gt; セルの太字を解除する方法
インライン型の数式 `$...$` を使うといったん太字属性が解除されるが，フォントも変わってしまう。TeX コマンドを用いてフォントを指定することもできるが，元のフォントとは一致しない。表に数式しか書かない場合は，これで良いかもしれない。

```html
<table>
<tr><th>07/12<th>SQUARE ENIX<th>とある魔術の禁書目録(29)<th>近木野中哉<th>550円
<tr><td>07/12<td>SQUARE ENIX<td>とある魔術の禁書目録(29)<td>近木野中哉<td>550円
<tr><th>$07/12$<th>$SQUARE ENIX$<th>$とある魔術の禁書目録(29)$<th>$近木野中哉$<th>$550円$
<tr><th>$\textrm{07/12}$<th>$\textrm{SQUARE ENIX}$
    <th>$\textrm{とある魔術の禁書目録(29)}$
    <th>$\textrm{近木野中哉}$<th>$\textrm{550円}$
<tr><th>$\textsf{07/12}$<th>$\textsf{SQUARE ENIX}$
    <th>$\textsf{とある魔術の禁書目録(29)}$
    <th>$\textsf{近木野中哉}$<th>$\textsf{550円}$
<tr><th>$\texttt{07/12}$<th>$\texttt{SQUARE ENIX}$
    <th>$\texttt{とある魔術の禁書目録(29)}$
    <th>$\texttt{近木野中哉}$<th>$\texttt{550円}$
</table>
```
<table>
<tr><th>07/12<th>SQUARE ENIX<th>とある魔術の禁書目録(29)<th>近木野中哉<th>550円
<tr><td>07/12<td>SQUARE ENIX<td>とある魔術の禁書目録(29)<td>近木野中哉<td>550円
<tr><th>$07/12$<th>$SQUARE ENIX$<th>$とある魔術の禁書目録(29)$<th>$近木野中哉$<th>$550円$
<tr><th>$\textrm{07/12}$<th>$\textrm{SQUARE ENIX}$
    <th>$\textrm{とある魔術の禁書目録(29)}$
    <th>$\textrm{近木野中哉}$<th>$\textrm{550円}$
<tr><th>$\textsf{07/12}$<th>$\textsf{SQUARE ENIX}$
    <th>$\textsf{とある魔術の禁書目録(29)}$
    <th>$\textsf{近木野中哉}$<th>$\textsf{550円}$
<tr><th>$\texttt{07/12}$<th>$\texttt{SQUARE ENIX}$
    <th>$\texttt{とある魔術の禁書目録(29)}$
    <th>$\texttt{近木野中哉}$<th>$\texttt{550円}$
</table>

# style 指定で text-align 属性だけは変更できる
先に align 指定はできないと言ったがあれは嘘だ。style 指定で text-align 属性を変更できる。下記の例では &lt;th&gt; タグのみ変更したが &lt;td&gt; タグも変更できる。markdown と異なり，セル毎に個別指定できるというのも利点だ。
```html
<table>
<caption>2023年7月発売のコミックス
<thead>
<tr><th style="text-align:center;">発売日
    <th style="text-align:center;">出版社
    <th style="text-align:center;">書名
    <th style="text-align:center;">著者
    <th style="text-align:center;">価格
<tbody>
<tr><td>07/04<td>集英社<td>青の祓魔師(29)<td>加藤和恵<td>594円
<tr><td>07/06<td>講談社<td>ザ・ヒステリックトリガー(3)<td>加納万太郎<td>759円
<tr><td>07/06<td>秋田書店<td>ヤンキーJKクズハナちゃん(17)<td>宗我部としのり<td>550円
<tr><td>07/10<td>マッグガーデン<td>ふかふかダンジョン攻略記(11)<td>KAKERU<td>693円
<tr><td>07/10<td>KADOKAWA<td>コードギアス 復活のルルーシュ(4)<td>小笠原智史<td>未定
<tr><td>07/12<td>SQUARE ENIX<td>英雄教室(17)<td>岸田こあら<td>730円
<tr><td>07/12<td>SQUARE ENIX<td>ばらかもん(19)<td>ヨシノサツキ<td>730円
<tr><td>07/12<td>SQUARE ENIX<td>とある魔術の禁書目録(29)<td>近木野中哉<td>550円
</table>
```
<table>
<caption>2023年7月発売のコミックス
<thead>
<tr><th style="text-align:center;">発売日
    <th style="text-align:center;">出版社
    <th style="text-align:center;">書名
    <th style="text-align:center;">著者
    <th style="text-align:center;">価格
<tbody>
<tr><td>07/04<td>集英社<td>青の祓魔師(29)<td>加藤和恵<td>594円
<tr><td>07/06<td>講談社<td>ザ・ヒステリックトリガー(3)<td>加納万太郎<td>759円
<tr><td>07/06<td>秋田書店<td>ヤンキーJKクズハナちゃん(17)<td>宗我部としのり<td>550円
<tr><td>07/10<td>マッグガーデン<td>ふかふかダンジョン攻略記(11)<td>KAKERU<td>693円
<tr><td>07/10<td>KADOKAWA<td>コードギアス 復活のルルーシュ(4)<td>小笠原智史<td>未定
<tr><td>07/12<td>SQUARE ENIX<td>英雄教室(17)<td>岸田こあら<td>730円
<tr><td>07/12<td>SQUARE ENIX<td>ばらかもん(19)<td>ヨシノサツキ<td>730円
<tr><td>07/12<td>SQUARE ENIX<td>とある魔術の禁書目録(29)<td>近木野中哉<td>550円
</table>

# 数少ない html タグ直打ちの利点
html タグを使うと記述量は増えるのに表現力はさほど変わらない。数少ない利点としては以下のように rowspan 指定が使えてセルの連結ができるということであろうか。もちろん colspan 指定も使える。
```html
<table>
<caption>2023年7月発売のコミックス
<thead>
<tr><th>発売日<th>出版社<th>書名<th>著者<th>価格 
<tbody>
<tr><td>07/04<td>集英社<td>青の祓魔師(29)<td>加藤和恵<td>594円
<tr><td rowspan=2>07/06<td>講談社<td>ザ・ヒステリックトリガー(3)<td>加納万太郎<td>759円
<tr><td>秋田書店<td>ヤンキーJKクズハナちゃん(17)<td>宗我部としのり<td>550円
<tr><td rowspan=2>07/10<td>マッグガーデン<td>ふかふかダンジョン攻略記(11)<td>KAKERU<td>693円
<tr><td>KADOKAWA<td>コードギアス 復活のルルーシュ(4)<td>小笠原智史<td>未定
<tr><td rowspan=3>07/12<td rowspan=3>SQUARE ENIX<td>英雄教室(17)<td>岸田こあら<td>730円
<tr><td>ばらかもん(19)<td>ヨシノサツキ<td>730円
<tr><td>とある魔術の禁書目録(29)<td>近木野中哉<td>550円
</table>
```
<table>
<caption>2023年7月発売のコミックス
<thead>
<tr><th>発売日<th>出版社<th>書名<th>著者<th>価格 
<tbody>
<tr><td>07/04<td>集英社<td>青の祓魔師(29)<td>加藤和恵<td>594円
<tr><td rowspan=2>07/06<td>講談社<td>ザ・ヒステリックトリガー(3)<td>加納万太郎<td>759円
<tr><td>秋田書店<td>ヤンキーJKクズハナちゃん(17)<td>宗我部としのり<td>550円
<tr><td rowspan=2>07/10<td>マッグガーデン<td>ふかふかダンジョン攻略記(11)<td>KAKERU<td>693円
<tr><td>KADOKAWA<td>コードギアス 復活のルルーシュ(4)<td>小笠原智史<td>未定
<tr><td rowspan=3>07/12<td rowspan=3>SQUARE ENIX<td>英雄教室(17)<td>岸田こあら<td>730円
<tr><td>ばらかもん(19)<td>ヨシノサツキ<td>730円
<tr><td>とある魔術の禁書目録(29)<td>近木野中哉<td>550円
</table>

# おまけ　文字の大きさを変える方法
Qiita の markdown では文字の大きさを変えることはできないが，インライン型の数式 `$...$` を使い，その中で TeX コマンドを用いることで文字の大きさを変えることができる。※フォントも変えられる。

<table>
<tr>
<th></th>
<th>\\textrm</th>
<th>\\textsf</th>
<th>\\texttt</th>
</tr>
<tr>
<th>\\tiny</th>
<th>$\tiny\textrm{禁書目録}$</th>
<th>$\tiny\textsf{禁書目録}$</th>
<th>$\tiny\texttt{禁書目録}$</th>
</tr>
<tr>
<th>\\small</th>
<th>$\small\textrm{禁書目録}$</th>
<th>$\small\textsf{禁書目録}$</th>
<th>$\small\texttt{禁書目録}$</th>
</tr>
<tr>
<th>\\normalsize</th>
<th>$\textrm{禁書目録}$</th>
<th>$\textsf{禁書目録}$</th>
<th>$\texttt{禁書目録}$</th>
</tr>
<tr>
<th>\\large</th>
<th>$\large \textrm{禁書目録}$</th>
<th>$\large\textsf{禁書目録}$</th>
<th>$\large\texttt{禁書目録}$</th>
</tr>
<tr>
<th>\\Large</th>
<th>$\Large \textrm{禁書目録}$</th>
<th>$\Large\textsf{禁書目録}$</th>
<th>$\Large\texttt{禁書目録}$</th>
</tr>
</table>

# おまけ２ ♟♜♞♝♛♚♙♖♘♗♕♔
色分けルールが分かると，こういうこともできる。

<table>
<caption><b>チェスの駒の初期配置</b></caption>
<tr><th>$\Large\texttt♜$</th>
    <td>$\Large\texttt♞$</td>
    <th>$\Large\texttt♝$</th>
    <td>$\Large\texttt♛$</td>
    <th>$\Large\texttt♚$</th>
    <td>$\Large\texttt♝$</td>
    <th>$\Large\texttt♞$</th>
    <td>$\Large\texttt♜$</td></tr>
<tr></tr>
<tr><td>$\Large\texttt♟$</td>
    <th>$\Large\texttt♟$</th>
    <td>$\Large\texttt♟$</td>
    <th>$\Large\texttt♟$</th>
    <td>$\Large\texttt♟$</td>
    <th>$\Large\texttt♟$</th>
    <td>$\Large\texttt♟$</td>
    <th>$\Large\texttt♟$</th></tr>
<tr></tr>
<tr><th>$\Large　$</th>
    <td>$\Large　$</td>
    <th>$\Large　$</th>
    <td>$\Large　$</td>
    <th>$\Large　$</th>
    <td>$\Large　$</td>
    <th>$\Large　$</th>
    <td>$\Large　$</td></tr>
<tr></tr>
<tr><td>$\Large　$</td>
    <th>$\Large　$</th>
    <td>$\Large　$</td>
    <th>$\Large　$</th>
    <td>$\Large　$</td>
    <th>$\Large　$</th>
    <td>$\Large　$</td>
    <th>$\Large　$</th></tr>
<tr></tr>
<tr><th>$\Large　$</th>
    <td>$\Large　$</td>
    <th>$\Large　$</th>
    <td>$\Large　$</td>
    <th>$\Large　$</th>
    <td>$\Large　$</td>
    <th>$\Large　$</th>
    <td>$\Large　$</td></tr>
<tr></tr>
<tr><td>$\Large　$</td>
    <th>$\Large　$</th>
    <td>$\Large　$</td>
    <th>$\Large　$</th>
    <td>$\Large　$</td>
    <th>$\Large　$</th>
    <td>$\Large　$</td>
    <th>$\Large　$</th></tr>
<tr></tr>
<tr><th>$\Large\texttt♙$</th>
    <td>$\Large\texttt♙$</td>
    <th>$\Large\texttt♙$</th>
    <td>$\Large\texttt♙$</td>
    <th>$\Large\texttt♙$</th>
    <td>$\Large\texttt♙$</td>
    <th>$\Large\texttt♙$</th>
    <td>$\Large\texttt♙$</td></tr>
<tr></tr>
<tr><td>$\Large\texttt♖$</td>
    <th>$\Large\texttt♘$</th>
    <td>$\Large\texttt♗$</td>
    <th>$\Large\texttt♕$</th>
    <td>$\Large\texttt♔$</td>
    <th>$\Large\texttt♗$</th>
    <td>$\Large\texttt♘$</td>
    <th>$\Large\texttt♖$</th></tr>
</table>

テーブルの中にテーブルを置ける。なお，こういう使い方をするときは，きちんとタグを閉じたほうがいい。

<table>
<caption><b>チェスの駒の動かし方</b></caption>
<tr>
<th style="text-align:center;">ポーンの場合</th>
<th style="text-align:center;">ルークの場合</th>
</tr>
<tr></tr>
<tr>
<td>
<table>
<tr><th style="text-align:center;">$\Large　$</th>
    <th style="text-align:center;">$\Large　$</th>
    <th style="text-align:center;">$\Large\circ$</th>
    <th style="text-align:center;">$\Large　$</th>
    <th style="text-align:center;">$\Large　$</th></tr>
<tr><th style="text-align:center;">$\Large　$</th>
    <th style="text-align:center;">$\Large\times$</th>
    <th style="text-align:center;">$\Large\bullet$</th>
    <th style="text-align:center;">$\Large\times$</th>
    <th style="text-align:center;">$\Large　$</th></tr>
<tr><th style="text-align:center;">$\Large　$</th>
    <th style="text-align:center;">$\Large　$</th>
    <th style="text-align:center;">$\Large♟$</th>
    <th style="text-align:center;">$\Large　$</th>
    <th style="text-align:center;">$\Large　$</th></tr>
<tr><th style="text-align:center;">$\Large　$</th>
    <th style="text-align:center;">$\Large　$</th>
    <th style="text-align:center;">$\Large　$</th>
    <th style="text-align:center;">$\Large　$</th>
    <th style="text-align:center;">$\Large　$</th></tr>
<tr><th style="text-align:center;">$\Large　$</th>
    <th style="text-align:center;">$\Large　$</th>
    <th style="text-align:center;">$\Large　$</th>
    <th style="text-align:center;">$\Large　$</th>
    <th style="text-align:center;">$\Large　$</th></tr>
</table>
</td>
<td>
<table>
<tr><th style="text-align:center;">$\Large　$</th>
    <th style="text-align:center;">$\Large　$</th>
    <th style="text-align:center;">$\Large\uparrow$</th>
    <th style="text-align:center;">$\Large　$</th>
    <th style="text-align:center;">$\Large　$</th></tr>
<tr><th style="text-align:center;">$\Large　$</th>
    <th style="text-align:center;">$\Large　$</th>
    <th style="text-align:center;">$\Large\uparrow$</th>
    <th style="text-align:center;">$\Large　$</th>
    <th style="text-align:center;">$\Large　$</th></tr>
<tr><th style="text-align:center;">$\Large\leftarrow$</th>
    <th style="text-align:center;">$\Large\leftarrow$</th>
    <th style="text-align:center;">$\Large♜$</th>
    <th style="text-align:center;">$\Large\rightarrow$</th>
    <th style="text-align:center;">$\Large\rightarrow$</th></tr>
<tr><th style="text-align:center;">$\Large　$</th>
    <th style="text-align:center;">$\Large　$</th>
    <th style="text-align:center;">$\Large\downarrow$</th>
    <th style="text-align:center;">$\Large　$</th>
    <th style="text-align:center;">$\Large　$</th></tr>
<tr><th style="text-align:center;">$\Large　$</th>
    <th style="text-align:center;">$\Large　$</th>
    <th style="text-align:center;">$\Large\downarrow$</th>
    <th style="text-align:center;">$\Large　$</th>
    <th style="text-align:center;">$\Large　$</th></tr>
</table>
</td>
</tr>
<tr>
<th style="text-align:center;">ナイトの場合</th>
<th style="text-align:center;">ビショップの場合</th>
</tr>
<tr>
<td>
<table>
<tr><th style="text-align:center;">$\Large　$</th>
    <th style="text-align:center;">$\Large\bullet$</th>
    <th style="text-align:center;">$\Large　$</th>
    <th style="text-align:center;">$\Large\bullet$</th>
    <th style="text-align:center;">$\Large　$</th></tr>
<tr><th style="text-align:center;">$\Large\bullet$</th>
    <th style="text-align:center;">$\Large　$</th>
    <th style="text-align:center;">$\Large　$</th>
    <th style="text-align:center;">$\Large　$</th>
    <th style="text-align:center;">$\Large\bullet$</th></tr>
<tr><th style="text-align:center;">$\Large　$</th>
    <th style="text-align:center;">$\Large　$</th>
    <th style="text-align:center;">$\Large♞$</th>
    <th style="text-align:center;">$\Large　$</th>
    <th style="text-align:center;">$\Large　$</th></tr>
<tr><th style="text-align:center;">$\Large\bullet$</th>
    <th style="text-align:center;">$\Large　$</th>
    <th style="text-align:center;">$\Large　$</th>
    <th style="text-align:center;">$\Large　$</th>
    <th style="text-align:center;">$\Large\bullet$</th></tr>
<tr><th style="text-align:center;">$\Large　$</th>
    <th style="text-align:center;">$\Large\bullet$</th>
    <th style="text-align:center;">$\Large　$</th>
    <th style="text-align:center;">$\Large\bullet$</th>
    <th style="text-align:center;">$\Large　$</th></tr>
</table>
</td>
<td>
<table>
<tr><th style="text-align:center;">$\Large\nwarrow$</th>
    <th style="text-align:center;">$\Large　$</th>
    <th style="text-align:center;">$\Large　$</th>
    <th style="text-align:center;">$\Large　$</th>
    <th style="text-align:center;">$\Large\nearrow$</th></tr>
<tr><th style="text-align:center;">$\Large　$</th>
    <th style="text-align:center;">$\Large\nwarrow$</th>
    <th style="text-align:center;">$\Large　$</th>
    <th style="text-align:center;">$\Large\nearrow$</th>
    <th style="text-align:center;">$\Large　$</th></tr>
<tr><th style="text-align:center;">$\Large　$</th>
    <th style="text-align:center;">$\Large　$</th>
    <th style="text-align:center;">$\Large♝$</th>
    <th style="text-align:center;">$\Large　$</th>
    <th style="text-align:center;">$\Large　$</th></tr>
<tr><th style="text-align:center;">$\Large　$</th>
    <th style="text-align:center;">$\Large\swarrow$</th>
    <th style="text-align:center;">$\Large　$</th>
    <th style="text-align:center;">$\Large\searrow$</th>
    <th style="text-align:center;">$\Large　$</th></tr>
<tr><th style="text-align:center;">$\Large\swarrow$</th>
    <th style="text-align:center;">$\Large　$</th>
    <th style="text-align:center;">$\Large　$</th>
    <th style="text-align:center;">$\Large　$</th>
    <th style="text-align:center;">$\Large\searrow$</th></tr>
</table>
</td>
</tr>
<tr>
<th style="text-align:center;">キングの場合</th>
<th style="text-align:center;">クイーンの場合</th>
</tr>
<tr>
<td>
<table>
<tr><th style="text-align:center;">$\Large　$</th>
    <th style="text-align:center;">$\Large　$</th>
    <th style="text-align:center;">$\Large　$</th>
    <th style="text-align:center;">$\Large　$</th>
    <th style="text-align:center;">$\Large　$</th></tr>
<tr><th style="text-align:center;">$\Large　$</th>
    <th style="text-align:center;">$\Large\bullet$</th>
    <th style="text-align:center;">$\Large\bullet$</th>
    <th style="text-align:center;">$\Large\bullet$</th>
    <th style="text-align:center;">$\Large　$</th></tr>
<tr><th style="text-align:center;">$\Large　$</th>
    <th style="text-align:center;">$\Large\bullet$</th>
    <th style="text-align:center;">$\Large♚$</th>
    <th style="text-align:center;">$\Large\bullet$</th>
    <th style="text-align:center;">$\Large　$</th></tr>
<tr><th style="text-align:center;">$\Large　$</th>
    <th style="text-align:center;">$\Large\bullet$</th>
    <th style="text-align:center;">$\Large\bullet$</th>
    <th style="text-align:center;">$\Large\bullet$</th>
    <th style="text-align:center;">$\Large　$</th></tr>
<tr><th style="text-align:center;">$\Large　$</th>
    <th style="text-align:center;">$\Large　$</th>
    <th style="text-align:center;">$\Large　$</th>
    <th style="text-align:center;">$\Large　$</th>
    <th style="text-align:center;">$\Large　$</th></tr>
</table>
</td>
<td>
<table>
<tr><th style="text-align:center;">$\Large\nwarrow$</th>
    <th style="text-align:center;">$\Large　$</th>
    <th style="text-align:center;">$\Large\uparrow$</th>
    <th style="text-align:center;">$\Large　$</th>
    <th style="text-align:center;">$\Large\nearrow$</th></tr>
<tr><th style="text-align:center;">$\Large　$</th>
    <th style="text-align:center;">$\Large\nwarrow$</th>
    <th style="text-align:center;">$\Large\uparrow$</th>
    <th style="text-align:center;">$\Large\nearrow$</th>
    <th style="text-align:center;">$\Large　$</th></tr>
<tr><th style="text-align:center;">$\Large\leftarrow$</th>
    <th style="text-align:center;">$\Large\leftarrow$</th>
    <th style="text-align:center;">$\Large♛$</th>
    <th style="text-align:center;">$\Large\rightarrow$</th>
    <th style="text-align:center;">$\Large\rightarrow$</th></tr>
<tr><th style="text-align:center;">$\Large　$</th>
    <th style="text-align:center;">$\Large\swarrow$</th>
    <th style="text-align:center;">$\Large\downarrow$</th>
    <th style="text-align:center;">$\Large\searrow$</th>
    <th style="text-align:center;">$\Large　$</th></tr>
<tr><th style="text-align:center;">$\Large\swarrow$</th>
    <th style="text-align:center;">$\Large　$</th>
    <th style="text-align:center;">$\Large\downarrow$</th>
    <th style="text-align:center;">$\Large　$</th>
    <th style="text-align:center;">$\Large\searrow$</th></tr>
</table>
</td>
</tr>
</table>

$\circ$最初のみ移動可能，$\bullet$移動可能，$\times$相手の駒を取るときだけ移動可能，$\rightarrow$ずっと進める

# おまけ３

別の記事にしました。

https://qiita.com/TETSURO1999/items/fe3675f11ae05f412520