Ankiのフィールドに表を記述する

1. はじめに

Anki のフィールドに表を記述したい場合、テンプレートとして利用できる HTML を紹介します。

2. フィールド用の表テンプレート (HTML)

早速ですが、「表」のHTMLテンプレートは以下になります。

<table style=" 
   border-collapse: collapse; 
   border-spacing: 0; 
   box-sizing: border-box; 
   border: 1px solid #999; 
   margin-bottom: 20px; 
   font-size:90%;">
<caption>ギリシャ文字</caption>
<thead>
<tr style="background-color: #90ee90;">
  <th style="padding: 5px;border: 1px solid #999;">小文字</th>
  <th style="padding: 5px;border: 1px solid #999;">大文字</th>
  <th style="padding: 5px;border: 1px solid #999;">読み</th>
</tr>
</thead>
<tbody>
<tr>
  <td style="padding: 5px;border: 1px solid #999;text-align:center;">α</td>
  <td style="padding: 5px;border: 1px solid #999;text-align:center;">Α</td>
  <td style="padding: 5px;border: 1px solid #999;">alpha</td>
</tr>
<tr>
  <td style="padding: 5px;border: 1px solid #999;text-align:center;">β</td>
  <td style="padding: 5px;border: 1px solid #999;text-align:center;">Β</td>
  <td style="padding: 5px;border: 1px solid #999;">beta</td>
</tr>
</tbody>
</table>

これを編集して、目的の表にすることを想定しています。

フィールドに表を書く上で面倒なのは、「CSS (スタイル) も、この中で記述しないといけない」という点です。このテンプレートでは、style 属性にスタイルを書きまくっています。

3. フィールドに表を記述する

念の為、表を記述する手順を説明します。

予めデッキブラウザを開き、目的のカードを選択しておきます。

そして、目的のフィールドをクリックしてフォーカスを当て、右上のメニューの中にある「HTML を編集」を選択します。

すると、HTML エディタが開くので、ここに 表のHTMLを記述します。

記述を終えたら「閉じる」ボタンを押します。

以上の操作により、そのフィールドに表が表示されているはずです。

4. もっと複雑な表を書きたい場合

もっと複雑な表を書きたい場合は、以下のようなサービスを利用して、書きたい表のHTMLを生成させることをお勧めします。

• HTML Tables generator – TablesGenerator.com
• Table Tag Generator | rowspan? colspan? You don’t need to worry about them!

但し、CSS (スタイル) は後から追加する必要があります（必要であれば）。

5. おわりに

Anki ファンの皆様、是非ご活用ください?。