標準状態でサポートされていない表ですが、使い方は割と簡単です。
投稿作成時には、作成画面だけでなく、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 の基本的な表です。 縦・横の出だしが揃ったもの です。
一般的な表形式で表示するには、スタイルを指定します。
そう、よく聞く CSS って奴ですね。
その前に、上の表はこのような 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 タグがデータ1行分 td タグが各文字 です。
赤い字は適当な値に変えて下さい。 青い字は変更も可能です。注釈参照。 以下同様。
赤い字は適当な値に変えて下さい。 青い字は変更も可能です。注釈参照。 以下同様。
CSSで定義していない表を使うと、最初の表のような罫線のない形式での表示となります。さて、枠線のスタイルを指定しましょう。
CSS の定義で Blog 内の表形式を固定するのがお勧めです。
テンプレート > カスタマイズ > 上級者向け > スクロールバーで最後へ > CSSを追加 > 入力 > ブログに適応
なお、各投稿のページ内で独自のスタイル(別名称の Class 定義)を指定することも可能です。
CSS の内容はこのようなものです。
.table-z901 {スタイルを指定するとこうなります。 HTML で最初の一行を table 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:ピクセル */
}
列 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 モードからメモ帳などに貼り付けてから作業される事をお勧めします。
作成 モードから、文字としてリンクを埋め込む事も可能ですが、表ですので簡略な表記でどうぞ。
投稿画面の表示は、CSSでスタイルを指定していても、一番上の表のように、罫線なしです。
プレビューや公開後はCSSに基づいた罫線付きとなります。
では 幅を指定は、
HTML モードで最初の一行を table class="table-z901" から table class="table-z901" style="width: 300px;" と書き換えます。
この方法は、HTML 全般の書き方では非推奨のようなのですが、2013/06 現在 IE10 で動作確認済みです。
う~ん、CSSで直接指定したのを幾つか用意するのが普通ですけど ... 。
おまかせベースを 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) 色々なCSS をご覧下さい。
[2013/07/01] CSS / HTML 関連では この Blog の次の投稿もご覧下さい。 Blogger の引用をそれらしく
[2013/07/05] 次回の投稿リンクを追加
[2013/07/27] 語句訂正 ブロックをタグに 要素や element の方が良かったのかな
0 件のコメント:
コメントを投稿