【はてなブログで簡単に表を作る】エクセルの表を貼る

はてなブログで表を作るのに、今まで普通にHTMLを使って表を作っていました。

雛形を作ると簡単にできるので、これでいいやと思っていたのですが、先日「エクセルからコピペで作れるよ」ってきいて、目からウロコでした。

 

 

とりあえずやってみましょう。

まず試しにこのエクセルに入力したデータでやってみます。

850のところは、300+300+250の計算式(SUM)が入力されています。

 

エクセルをコピペして「編集見たまま」に貼り付ける

▼ 貼り付けた結果がこちら。表になってる…。

test  
3月 300
4月 300
5月 250
  850

 

次に「HTML編集」を確認します。中はこうなっていました。

<table width="152">
<tbody>
<tr>
<td width="82">test</td>
<td width="70"> </td>
</tr>
<tr>
<td>3月</td>
<td>300</td>
</tr>
<tr>
<td>4月</td>
<td>300</td>
</tr>
<tr>
<td>5月</td>
<td>250</td>
</tr>
<tr>
<td> </td>
<td>850</td>
</tr>
</tbody>
</table>

すごいな。ちゃんと表のHTMLになってる。。エクセルに記入されている計算式は無視で、そのまま文字がコピペされているようです。

 

少し編集して「HTML編集」に貼り付ける

3月 300
4月 300

▲ こちらでやってみましょう。

コピペして「編集見たまま」に貼り付け、「HTML編集」から該当箇所をコピペ。

赤字部分を少し追記しました。

<table width="152" border="3" bgcolor="#ccff99">
<tbody>
<tr>
<td width="82" align="center">3月</td>
<td width="70" align="right">300</td>
</tr>
<tr>
<td align="center">4月</td>
<td align="right">300</td>
</tr>
</tbody>
</table>

 

これを、再度「HTML編集」に貼り付けた結果がこちら。

 

3月 300
4月 300

 

ちゃんと色がついたり、位置が調整されていますね。エクセルから貼り付けることで、表の骨格ができているので、あとはそこに少し手を加えるだけで、簡単に作りたい表を作ることができそうです。

 

なにこれ、便利すぎる!

 

連結している表はどうなるのか

エクセルで、連結したものを作ってみました。

 

先ほど同様、コピペして、「編集見たまま」に貼り付けます。

 

test
3月 300
4月 300
600

 

えっ (*´Д`)

 

できた

 

かなりびっくり。連結もきちんと反映されました。

HTML編集はこうなっていました。

<table style="border-collapse: collapse; width: 106pt;" border="0" width="140" cellspacing="0" cellpadding="0">
<tbody>
<tr style="height: 18.0pt;">
<td class="xl65" style="height: 18.0pt; width: 106pt;" colspan="2" width="140" height="24">test</td>
</tr>
<tr style="height: 18.0pt;">
<td style="height: 18.0pt;" height="24">3月</td>
<td align="right">300</td>
</tr>
<tr style="height: 18.0pt;">
<td style="height: 18.0pt;" height="24">4月</td>
<td align="right">300</td>
</tr>
<tr style="height: 18.0pt;">
<td class="xl65" style="height: 18.0pt;" colspan="2" height="24">600</td>
</tr>
</tbody>
</table>

高さとかも記載があるからなんか文字数がすごいことになっていますが、表の作りの部分はシンプルで、ちゃんと連結させるHTMLが入力されていました。

 

複雑な表ほどエクセルで作成してから貼り付けたら時間短縮になるね!

 

 

表の作り方の基本はこちらをどうぞ。

表の作り方の基本、色の付け方などをまとめています。今回使ったタグもこちらに記載しています。

csshtml.mikanusagi.com

 

最後に

ということで、はてなブログでは、簡単に表を作ることができる話でした。

私、はてなブログの定型文作成に「表」の雛形をいれていたのですが…エクセルからのコピペが便利なので、もういらないですね。笑