はじめに
記事の中に表を埋め込みたい、っていうこと、よくありますよね。
「クッキング記事での食材と分量」とか、「買い物記事での商品名と値段」とか、簡単に表が埋め込めたら記事も見やすくなるのになーと思っている方も多いのではないでしょうか。
私もそう思って、やり方を調べてみたんですが、三つほど代表的な方法があるようです。
■ エクセルで作成してコピペする
（メリット）
エクセル知ってれば簡単！
（デメリット）
画像として貼り付くので、SEOには不利
画像として貼り付くので、端末の画面サイズで自動調整されない
■ はてな記法を使う
（メリット）
慣れてしまうと簡単！
（デメリット）
ブログ執筆途中で「見たまま記法」と「はてな記法」の切り替えができない
■ 専用サイトで表のHTMLコードを取得する
（メリット）
慣れてしまうと簡単！
（デメリット）
とっつきにくい！
それぞれ、メリットもデメリットもあるようですね。
自分がやりやすいと思う方法でやるのが一番いいと思いますが、「イマイチよくわからないなー」という方のために、コピペで簡単に表が作れるテンプレートを作成してみましたので、ご紹介したいと思います。
テンプレートで表を簡単に作成しよう！
（表サンプル）
| NO | 地名 | 名物 | 価格 | 備考 |
|---|---|---|---|---|
| 1 | 仙台 | 萩の月 | 1,200 | フワフワ |
| 2 | 宇都宮 | 餃子 | 480 | アツアツ |
| 3 | 鎌倉 | 鳩サブレ | 600 | サクサク |
（テンプレート）
<table>
<caption>名物一覧表サンプル</caption>
<tbody>
<tr>
<th>NO</th>
<th>地名</th>
<th>名物</th>
<th>価格</th>
<th>備考</th>
</tr>
<tr>
<td>1</td>
<td>仙台</td>
<td>萩の月</td>
<td>1,200</td>
<td>フワフワ</td>
</tr>
<tr>
<td>2</td>
<td>宇都宮</td>
<td>餃子</td>
<td>480</td>
<td>アツアツ</td>
</tr>
<tr>
<td>3</td>
<td>鎌倉</td>
<td>鳩サブレ</td>
<td>600</td>
<td>サクサク</td>
</tr>
</tbody>
</table>
このテンプレートの使い方ですが、ブログを「HTML編集」に切り替えて、表を挿入したい場所にこのテンプレートをコピペするだけ！
あとは、表の中身をご自身のブログの内容にあわせて書き換えてもらえれば、表ができちゃいます！
表の書き換え方を説明しますね。
| 表タイトル | <caption>は表のタイトルになります。ご自身の表にあわせて、書き換えてください。不要であれば、この行を削除してください。 |
|---|---|
| 横の列 | <tr>から</tr>までが、横一列になります。 |
| セル | <th>、<td>が表のひとつひとつのセルになります。ご自身の表にあわせて、書き換えてください。 |
| セルの種類 | <th>はタイトルのセル、<td>はデータのセルです。 |
| 行の増やし方 | <tr>から</tr>までの塊をコピーして、追加してください。 |
| 行の減らし方 | <tr>から</tr>までの塊を削除してください。 |
| 列の増やし方 | <th>、<td>を、すべての行について各行増やしたい個数だけ追加してください。 |
| 列の減らし方 | <th>、<td>を、すべての行から各行減らしたい数だけ削除してください |
ちなみに、この状態ではCSSを修正していないので、表の形式はデフォルト状態になります。
・表のタイトル：
文字サイズ＝100%、配置＝中央
・項目タイトル：
背景色＝グレー、文字種類＝太文字、文字サイズ＝100%
特定のセルだけカスタマイズ！
CSSに定義を追加すれば、表全体をもう少しドレスアップできるのですが、それはまた別の機会に詳しくご説明したいと思います。
とりあえず、特定のセルの表示をカスタマイズする方法を載せておきます。
セル内に値段や個数などの数字を見せたい場合、そのセルだけは右寄せにしたいですよね。
その場合は、右寄せにしたいセルの「<td>」を、
<td style="text-align: right">
に書き換えてみてください。
（右寄せ：right、中央：center、左寄せ：left）
同様に、個別のセルの背景色や文字色を変えたい場合は、該当のセルの「<td>」を
■ 背景色を水色に
■ 文字色を黄色に
というように書き換えれば、OKです！
色の指定については、こちらのサイトのカラーコード表を参考しにてください。
まとめ
いかがでしたでしょうか。
記事内に表が作れれば、ブログが見やすくなること間違いなし！
ぜひこのテンプレートを活用してみてください！
また、「表をこんな風にしたいんだけど・・・」みたいな要望があれば、コメントくださいね！
あわせて、こちらの記事もどうぞ！