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