僕のブログではレシピでの材料とかせんべろ店でのお会計とか、表を埋め込みたいシーンが結構あります。デザインをレスポンシブにしているため、テキスト表示だと表示が崩れるため、何とか表形式で埋め込みたいと思っていました。
方法１ エクセルで埋め込む方法
表は別途Excelで作り、見たままモードの編集画面にカットアンドペーストをすると、画像形式で貼り付けが出来ます。レスポンシブの場合、画面サイズに合わせて画像の表示サイズが変わりますので、これはこれで使える方法です。しかし、表中のテキストが画像になってしまいますので、SEO的には不利なような気がします。
方法２ エクセルからhtmlへの変換サイトを使う
このサイトを使うと、Excelをテーブルタグに変換してくれます。
| 材料１ | 分量 |
| 材料２ | 分量 |
ここで生成されているHTMLは
<table>
<tr>
<td>材料１</td>
<td>分量</td>
</tr>
<tr>
<td>材料２</td>
<td>分量</td>
</tr>
</table>
という非常に単純なものです。
このHTMLコードをHTML編集モードで記事中に埋め込みます。
方法３．テーブルタグ作成ツールを使う
このサイトも行数・列数を指定するとテーブルタグを作成してくれます
こちらの出力はこんな感じ
| 材料１ | 分量 |
| 材料２ | 分量 |
出力されるHTMLはこんな感じです
<table border>
<tr>
<td>材料１</td>
<td>分量</td>
</tr>
<tr>
<td>材料２</td>
<td>分量</td>
</tr>
</table>
これらはテーブルタグを出してくれるのは良いのですが、テーブルの幅や右のセルと左のセルの比率を指定できません。
このHTMLコードをHTML編集モードで記事中に埋め込みます。
方法４．HTMLのテーブルタグで幅や比率を指定する
最終的に参考にしたのはこちら
ここに提示されているサンプルコードで
<table border="1" width="100%">
で画面幅いっぱいの表が描画でき、
<td width="30%">ホームズの思い出</td> <td width="70%">ホームズの事件簿</td>
で右と左の幅の比率を指定できることがわかります。これを参考に、左を７０％、右を３０％とした表がこちら。
| 材料１ | 分量 |
| 材料２ | 分量 |
このHTMLはこのように記載しています。
<table border="1" width="100%">
<tbody>
<tr>
<td width="70%">材料１</td>
<td width="30%">分量</td>
</tr>
<tr>
<td width="70%">材料２</td>
<td width="30%">分量</td>
</tr>
</tbody>
</table>
<tr>と</tr>に挟まれている部分の行を増やすと列が、<tr>と</tr>に挟まれるユニットを増やすと行が増えます。
このHTMLコードをHTML編集モードで記事中に埋め込みます。
HTMLが書ける人には釈迦に説法の簡単な記述ですが、ご参考になれば幸いです。
過去のTIPS
