はじめに
どうもしゅんです！
今日はブログに表を追加する方法をご紹介します！
プラグインを入れる必要もないし、何よりとても簡単なので是非試してみてください◎
方法はExcelからコピー。ひと手間加えるだけでレスポンシブに◎
まずはExcelで表を作成
ちなみにこの表は下の記事で使用したもの。
| 記号 | 入力方法 | 記号 | 入力方法 |
| α | \alpha | ρ | \rho |
このまま投稿ページに貼り付けると、ご覧の通りレスポンシブにはなりません。
レスポンシブにするためには
レスポンシブにするためには、セルとセルの間にポインタを持っていきダブルクリック。
セル内の文字の長さに合わせてセル幅が変化すればオッケーです◎
そして貼り付け。するとレスポンシブになってくれます！
| 記号 | 入力方法 | 記号 | 入力方法 |
| α | \alpha | ρ | \rho |
続いて表のデザイン。（ちなみにエクセル上で枠線や背景色を追加しても反映されません。今回は見やすさのために追加してます。）
セルの背景色を変えよう！
セルの背景色を変えるためには、HTMLを触る必要があります。
が、決して難しくないので安心してください◎
まず投稿画面を「ビジュアル」から「テキスト」に変えます。（タイトルの右下にあります。）
エクセルから貼り付けた表のHTMLはこんな感じになってます！
変更前<table width="256">
<tbody>
<tr>
<td width="48">記号</td>
<td width="80">入力方法</td>
<td width="48">記号</td>
<td width="80">入力方法</td>
</tr>
<tr>
<td>α</td>
<td>\alpha</td>
<td>ρ</td>
<td>\rho</td>
</tr>
</tbody>
</table>
変更後<table width="256">
<tbody> <tr bgcolor="#d3d3d3"> <td width="48">記号</td>
<td width="80">入力方法</td>
<td width="48">記号</td>
<td width="80">入力方法</td>
</tr>
<tr>
<td>α</td>
<td>\alpha</td>
<td>ρ</td>
<td>\rho</td>
</tr>
</tbody>
</table>
背景色を入れたい場合はタグ内に bgcolor=”#d3d3d3″ を追加するだけ！
#d3d3d3はカラーコードで、原色大辞典などを見ることで好きな色を選択できます◎
| 記号 | 入力方法 | 記号 | 入力方法 |
| α | \alpha | ρ | \rho |
一行目に背景色を追加したものがこちら。
表全体に追加したいときは<tbody>タグ、行なら<tr>タグ、セルなら<td>タグに bgcolor=”#d3d3d3″を追加してくださいね！
さいごに
プラグインに頼りすぎるとサイトが重くなるってことを考えても表はExcelで十分ですね！
最後まで読んでくれてありがとう！質問等あればお気軽にコメントください！
コメント