Excelの表をブログに貼り付ける。その２。
以前の記事、
Excelの表をブログに貼り付けるのは、これが一番スマートかな？ - namjun's blog
ではExcelで作成した表をブログやHPに貼り付けるため、Excel上でhtmlタグを入れてしまうという方法を紹介しました。
もう少し手間をかけて体裁を整える方法を試しましたので、紹介します。
（１）表に枠線をつける。
次のような表をExcelで作り、全体をコピーして、ブログのhtml編集画面に貼り付けることにより、
表が表示されます。
| 氏名 | 背番号 | ポジション | 出身 |
|---|---|---|---|
| 松井 裕樹 | 1 | 投手 | 桐光学園 |
| 塩見 貴洋 | 11 | 投手 | 八戸大学 |
| 濱矢 廣大 | 13 | 投手 | ホンダ鈴鹿 |
| 則本 昂大 | 14 | 投手 | 三重中京大学 |
| トラビス・ブラックリー | 15 | 投手 | レンジャーズ |
| 森 雄大 | 16 | 投手 | 東福岡高校 |
このはてなブログでは勝手に枠線が表示されますが、 Jimdoホームページでは枠線が表示されませんでした。
<table>タグを枠線付きの表を指定するタグ<table border="1">に書き換えます。
これをコピーしてhtmlとして貼り付けると、このように表示されます。
| 氏名 | 背番号 | ポジション | 出身 |
|---|---|---|---|
| 松井 裕樹 | 1 | 投手 | 桐光学園 |
| 塩見 貴洋 | 11 | 投手 | 八戸大学 |
| 濱矢 廣大 | 13 | 投手 | ホンダ鈴鹿 |
| 則本 昂大 | 14 | 投手 | 三重中京大学 |
| トラビス・ブラックリー | 15 | 投手 | レンジャーズ |
| 森 雄大 | 16 | 投手 | 東福岡高校 |
（２）セルを結合する
下の表のように、Excelで作る表ではしばしば、セルが結合させることがあります。 これをブログで表示させる方法です。
一番上の行にあるセル（この場合、松井裕樹のポジション）に対する<td>タグを< td rowspan="結合する行数（この場合は6）">にして、それより下の行にあるセルには何も入れません。
タグ用の列をセル結合してしまうと、わかりやすいかと思います。
| 氏名 | 背番号 | ポジション | 出身 |
|---|---|---|---|
| 松井 裕樹 | 1 | 投手 | 桐光学園 |
| 塩見 貴洋 | 11 | 八戸大学 | |
| 濱矢 廣大 | 13 | ホンダ鈴鹿 | |
| 則本 昂大 | 14 | 三重中京大学 | |
| トラビス・ブラックリー | 15 | レンジャーズ | |
| 森 雄大 | 16 | 東福岡高校 |
行内での横方向へのセル結合は一番左のセルに対する<td>タグを< td colspan="結合する列数">にします。下の例は見出し行なので、<td>ではなく、<th>です。
| 氏名と背番号 | ポジション | 出身 | |
|---|---|---|---|
| 松井 裕樹 | 1 | 投手 | 桐光学園 |
| 塩見 貴洋 | 11 | 八戸大学 | |
| 濱矢 廣大 | 13 | ホンダ鈴鹿 | |
| 則本 昂大 | 14 | 三重中京大学 | |
| トラビス・ブラックリー | 15 | レンジャーズ | |
| 森 雄大 | 16 | 東福岡高校 | |
（３）行揃え
中央揃えにすると見栄えが良くなりますし、数字など右揃えにしたい時もあります。
（このような表示関連の設定はスタイルシートを使うべきであり、非推奨だそうです。）
中央揃えしたいセルは<td >タグを<td align="center”> に換えます。右揃えはcenterの代わりにrightです。
大抵、列ごと行揃えの形式を揃えるものですが、htmlは基本、行単位のまとめ（<tr>の下に<td>がある）になっています。その点、Excelは下方向へのコピーが容易なのが良いですね。
垂直方向の文字の位置は、真ん中に置きたい時は<td valign="middle”>とします。 上に置くときはmiddleの代わりにtop、下はbottomです。
↓こうなりました。
| 氏名 | 背番号 | ポジション | 出身 |
|---|---|---|---|
| 松井 裕樹 | 1 | 投手 | 桐光学園 |
| 塩見 貴洋 | 11 | 八戸大学 | |
| 濱矢 廣大 | 13 | ホンダ鈴鹿 | |
| 則本 昂大 | 14 | 三重中京大学 | |
| トラビス・ブラックリー | 15 | レンジャーズ | |
| 森 雄大 | 16 | 東福岡高校 |
（４）タイトルをつける
タイトルをつけるには<table>タグの直後に<caption>タイトル</caption>と入れます。
| 氏名 | 背番号 | ポジション | 出身 |
|---|---|---|---|
| 松井 裕樹 | 1 | 投手 | 桐光学園 |
| 塩見 貴洋 | 11 | 八戸大学 | |
| 濱矢 廣大 | 13 | ホンダ鈴鹿 | |
| 則本 昂大 | 14 | 三重中京大学 | |
| トラビス・ブラックリー | 15 | レンジャーズ | |
| 森 雄大 | 16 | 東福岡高校 |
（５）まとめ
| 枠線付きの表 | <table border="1"> |
| セル結合（縦方向） | < td rowspan="行数"> |
| セル結合（縦方向） | < td colspan="列数"> |
| 行揃え | <td align="center”> 左left、右right |
| 上下位置揃え | <td valign="middle”> 上top、下bottom |
| 見出し | <caption>タイトル</caption> |
