Blogger 表を使おう (1) 利用の基本

Blogger の投稿に表を使って、見た目を綺麗で分り易くしましょう。
標準状態でサポートされていない表ですが、使い方は割と簡単です。
投稿作成時には、作成画面だけでなく、HTML 画面も使って実現します。


早速、表を出します。

列 1	列 2	列 3	列 4
Text 1-1	Text 1-2	Text 1-3 あいう	Text 1-4
Text 2-1	Text 2-2	Text 2-3　えおか	Text 2-4
Text 3-1	Text 3-2	Text 3-3　　きくけ ... ん	Text 3-4

これが HTML の基本的な表です。　 縦・横の出だしが揃ったもの　です。
一般的な表形式で表示するには、スタイルを指定します。
そう、よく聞く ＣＳＳ って奴ですね。
その前に、上の表はこのような HTML の記述になっています。

<table class="table-z900">
<tbody>
<tr>
<th width="10%">列 1</th>
<th width="20%">列 2</th>
<th width="55%">列 3</th>
<th width="15%">列 4</th>
</tr>
<tr>
<td>Text 1-1</td>
<td>Text 1-2</td>
<td>Text 1-3 あいう</td>
<td>Text 1-4</td>
</tr>
<tr>
<td>Text 2-1</td>
<td>Text 2-2</td>
<td>Text 2-3　えおか</td>
<td>Text 2-4</td>
</tr>
<tr>
<td>Text 3-1</td>
<td>Text 3-2</td>
<td>Text 3-3　　きくけ ... ん</td>
<td>Text 3-4</td>
</tr>
</tbody>
</table>

th タグが見出し文字　tr タグがデータ１行分　td タグが各文字　です。
赤い字は適当な値に変えて下さい。　青い字は変更も可能です。注釈参照。　以下同様。



ＣＳＳで定義していない表を使うと、最初の表のような罫線のない形式での表示となります。
さて、枠線のスタイルを指定しましょう。
ＣＳＳ　の定義で　Blog 内の表形式を固定するのがお勧めです。
　　　　テンプレート > カスタマイズ > 上級者向け > スクロールバーで最後へ > ＣＳＳを追加 > 入力 > ブログに適応
　　　　なお、各投稿のページ内で独自のスタイル（別名称の Class 定義）を指定することも可能です。
ＣＳＳ　の内容はこのようなものです。

.table-z901 {
 border-collapse: collapse; /*  枠線 collapse:1本 separate:2本分離 */
}
.table-z901 th {
 border: solid 1px #c1c1c1; /* 線種 solid：実線 dashed：破線 ...　線幅　線色 HTML16 進数 */
 padding: 0.3em; /* 余白 単位 em：文字　px：ピクセル */
}
.table-z901 td {
 border: solid 1px #cccccc;  /* 線種 solid：実線 dashed：破線 ...　線幅　線色 HTML16 進数 */
 padding: 0.3em; /* 余白  単位 em：文字　px：ピクセル */
}

スタイルを指定するとこうなります。　　　　　HTML で最初の一行を　table class="table-z901" に変えて下さい。

列 1	列 2	列 3	列 4
Text 1-1	Text 1-2	Text 1-3 あいう	Text 1-4
Text 2-1	Text 2-2	Text 2-3　えおか	Text 2-4
Text 3-1	Text 3-2	Text 3-3　　きくけ ... ん	Text 3-4

さて、使い方ですが。

投稿文では　HTML　に切り替えて、最上段の記述を表の位置に挿入します。
　　　　　メモ帳や下書き投稿にこの HTML を貼り付けておいて、そこから、コピーペーストが便利です。
列の横幅の割り振りは%単位で指定し、合計値が 100 になるように。
もし、横幅を越える行がある場合、対象行は改行文字がなくても自動的に改行されます。

データ（新規行）の追加・列の追加削除は　HTML　モードで、追加後の文字の修正・加工は　作成　　モードで行えます。
編集時点でテーブル構造が壊れる恐れもありますので、HTML モードからメモ帳などに貼り付けてから作業される事をお勧めします。
作成　モードから、文字としてリンクを埋め込む事も可能ですが、表ですので簡略な表記でどうぞ。

投稿画面の表示は、ＣＳＳでスタイルを指定していても、一番上の表のように、罫線なしです。　
プレビューや公開後はＣＳＳに基づいた罫線付きとなります。


では　幅を指定は、　　
HTML モードで最初の一行を　table class="table-z901"　から　table class="table-z901" style="width: 300px;"　と書き換えます。
この方法は、HTML 全般の書き方では非推奨のようなのですが、2013/06 現在 IE10 で動作確認済みです。
う～ん、ＣＳＳで直接指定したのを幾つか用意するのが普通ですけど ... 。
おまかせベースを table-a 、小を table-a300 、大をtable-a700 とし、CSS上に width の値を変えた 3 個を定義するのが一般的かな。


文字の編集と幅を縮めた表がこれです。

列 1	列 2	列 3	列 4
Text 1-1	Text 1-2	Text 1-3 あいう 外部リンク例：MTT#0032	Text 1-4
Text 2-1	Text 2-2	Text 2-3　えおか（直し）	Text 2-4
Text 3-1	Text 3-2	Text 3-3　　きくけ ... ん	Text 3-4

どうでしたでしょうか？
次回は表形式の色々をご紹介します。　　こちらの投稿　Blogger 表を使おう (2) 色々なＣＳＳ　をご覧下さい。



[2013/07/01] ＣＳＳ / HTML 関連では　この Blog の次の投稿もご覧下さい。　　　Blogger の引用をそれらしく　
[2013/07/05] 次回の投稿リンクを追加
[2013/07/27] 語句訂正　ブロックをタグに　要素や element の方が良かったのかな