今日の日和

日常の気になったことや覚書とか

はてなブログに表をいれたい

スポンサーリンク

f:id:ariakesumire:20181108003703j:plain

ブログに表をいれたいなあ、どうするんだろうなあと調べてみたところ、いくつか方法があるみたいだけど、「エクセルで作った表をコピー&ペーストする」が簡単そうでいいなと思ったので、そうすることにしました。

 

例として、こういう表をいれたいとする。
このように画像として貼り付ける方法もありかなあと思いますが。

f:id:ariakesumire:20190224151546p:plain 

エクセルからそのままコピー&ペーストしてみる。

エクセルで表を作成した後、コピーして、ブログにペーストしました。

種類 値段
イチゴ 498
バナナ 198
みかん 398

が、文字揃えが違う、背景色がついてない。

コピー&ペーストの後にHTML編集で修正する

上の表はHTML編集モードでは、

<table width="220">
<tbody>
<tr>
<td width="116">種類</td>
<td width="104">値段</td>
</tr>
<tr>
<td>イチゴ</td>
<td>498</td>
</tr>
<tr>
<td>バナナ</td>
<td>198</td>
</tr>
<tr>
<td>みかん</td>
<td>398</td>
</tr>
</tbody>
</table>

このようになってます。

 

☆trとtdの違い、そしてth

 「tr」は行単位、「td」は個々のデータかなと。
 見出しにしたい所は、「td」を「th」に変更することで、自動的に文字が中央揃えになり、太文字になるようです。

 

☆背景色をグレー(#eee)に変える方法

 背景を変えたい行に style="background:#eee"を入れる。
 <tr style="background:#eee"> 

 

☆文字揃えの方法

 左揃え  align="left"
 中央揃え align="center"
 右揃え  align="right"

 表全体で中央揃えしたい場合
 <tbody align="center">

 行単位で中央揃えしたい場合
 <tr align="center">  

 

これが編集してみた結果です。

種類 値段
イチゴ 498
バナナ 198
みかん 398

列単位での文字揃え方法を模索しているのですが、うまくできません。

ツールを使う

エクセルの表をHTMLのテーブルタグに変換するというツールがあるそうです。
エクセルからツールへコピー&ペースト、ツールからブログのHTML編集モードにコピー&ペーストするだけ。
これも便利ですね。

エクセルシートをHTMLテーブルに変換しちゃう君 (ββ)

種類 値段
イチゴ 498
バナナ 198
みかん 398

スマホで表が見切れてしまう場合

表のサイズが大きくなると、小さなスマホの画面では右側が切れて表示されていなかったことがわかりました。

横向きにしたら、表示されるサイズに設定したつもりなんですが…。

表サイズをピクセルにしていたのをパーセンテージに変更したら、スマホが縦でも横でも納まるようになりました。

表全体
<table width="600">は表全体の幅が600pxで固定ですが
<table width=100%>だとデバイスに合わせてくれます。

各データの列幅もパーセンテージで合計100になるように変更します。
<td width="200">データ1</td>
<td width="400">データ2</td> 
 ↓ ↓ ↓
<td style="width: 33%">データ1</td>
<td style="width: 67%">データ2</td>