たけちゃんのあんなことこんなこと

50代家族持ち♂が普段の出来事を気ままに書いています。基本コンテンツは レシピ 食レポ お散歩記事 その他小技 となっております。


スポンサードリンク

 

自己紹介と本ブログのコンテンツとプライバシーポリシー

小技 ブログに表を埋め込む方法


僕のブログではレシピでの材料とかせんべろ店でのお会計とか、表を埋め込みたいシーンが結構あります。デザインをレスポンシブにしているため、テキスト表示だと表示が崩れるため、何とか表形式で埋め込みたいと思っていました。

 

 方法1 エクセルで埋め込む方法

表は別途Excelで作り、見たままモードの編集画面にカットアンドペーストをすると、画像形式で貼り付けが出来ます。レスポンシブの場合、画面サイズに合わせて画像の表示サイズが変わりますので、これはこれで使える方法です。しかし、表中のテキストが画像になってしまいますので、SEO的には不利なような気がします。

f:id:take--chan:20170305131148p:plain

 

方法2 エクセルからhtmlへの変換サイトを使う

tech-unlimited.com

 このサイトを使うと、Excelをテーブルタグに変換してくれます。

材料1 分量
材料2 分量

ここで生成されているHTMLは

<table>
<tr>
<td>材料1</td>
<td>分量</td>
</tr>
<tr>
<td>材料2</td>
<td>分量</td>
</tr>

</table>

という非常に単純なものです。

このHTMLコードをHTML編集モードで記事中に埋め込みます。

 

方法3.テーブルタグ作成ツールを使う

このサイトも行数・列数を指定するとテーブルタグを作成してくれます

www.tagindex.com

こちらの出力はこんな感じ 

材料1 分量
材料2 分量

出力されるHTMLはこんな感じです

<table border>
<tr>
<td>材料1</td>
<td>分量</td>
</tr>
<tr>
<td>材料2</td>
<td>分量</td>
</tr>
</table>

これらはテーブルタグを出してくれるのは良いのですが、テーブルの幅や右のセルと左のセルの比率を指定できません。

このHTMLコードをHTML編集モードで記事中に埋め込みます。

方法4.HTMLのテーブルタグで幅や比率を指定する

最終的に参考にしたのはこちら

mbsupport.dip.jp

ここに提示されているサンプルコードで

<table border="1" width="100%">

で画面幅いっぱいの表が描画でき、

<td width="30%">ホームズの思い出</td> 
<td width="70%">ホームズの事件簿</td>

で右と左の幅の比率を指定できることがわかります。これを参考に、左を70%、右を30%とした表がこちら。

材料1 分量
材料2 分量

このHTMLはこのように記載しています。 

<table border="1" width="100%">
<tbody>
<tr>
<td width="70%">材料1</td>
<td width="30%">分量</td>
</tr>
<tr>
<td width="70%">材料2</td>
<td width="30%">分量</td>
</tr>
</tbody>
</table>

<tr>と</tr>に挟まれている部分の行を増やすと列が、<tr>と</tr>に挟まれるユニットを増やすと行が増えます。

このHTMLコードをHTML編集モードで記事中に埋め込みます。

 

 

HTMLが書ける人には釈迦に説法の簡単な記述ですが、ご参考になれば幸いです。

過去のTIPS 

www.take--chan.tokyo

www.take--chan.tokyo