徒然なるままに京都: Bloggerで「表」を使う

Bloggerで「表」を使う

ブログ(Blogger)で
「写真を上手く横に並べられなくて困った」ことはありませんか？

このような時には「表」を使うと簡単に実現できますが、
困ったことにブログ(Blogger)には「表」を作成するためのボタンがありません。

しかし簡単な表であれば、 [HTML]を使っていとも簡単に作成できますので

是非チャレンジしてみて下さい。難しい話は抜きです。

★HTMLについて少し復習しておきましょう。
1.HPやブログは[HTML]で記述されていることはご承知の通り。見方は、
　①FireFox：[ツール]=>[ウェブ開発]=>[ページのソース]
　②Internet Explorer：[表示]=>[ソース]
　③MicroSoft Edge：[設定]=>[開発者ツール]

　④Blogger：ツールバー左端の編集モード切替で[HTML]ビュー
2.各タグはセットで使われます。
　①<center>～</center>：中央に配置します。中央配置が不要の時は削除。
　②<table>～</table>：「表」であることを示します。
　③<tr>～</tr>：行であることを示します。
　④<td>～</td>：列であることを示します。
3.<br>：改行であることを示します。

★2行3列の表を作りたい場合は、以下の[HTML]となります。
　①メモ帳を使って以下のHTMLを入力して下さい(コピーして貼り付けも可)
　②適当な名前を付け、デスクトップなどに保存しておきます。
　③<td>～</td>に挟まれた[A～F]はダミーデーターです。
　　この[HTML]で作成した表には枠線がありません。
　　表のセルがわかりやすいようにダミーデータ(A～F)を入れてあります。
　　最終的にはダミーデータは不要なので削除します。
　④行を増やしたい時は<tr>～</tr>部分を、列を増やしたい時は<td>～</td>部分をコピーし使います。

HTML

解説

<br>：改行
<center>～</center>：「表」を中央に配置します。不要時は削除。
<table>～</table>：「表」を意味します
<tr>～</tr>：「行」を意味します
<td>～</td>：「列」を意味します

以下は、1行3列を意味します
<tr>　　　　　　　　 1行　
    <td>A</td>　　　　1列
    <td>B</td>　　　　1列
    <td>C</td>　　　　1列
</tr>

最後の<br>は表の下にも入力出来るようにするためです

★[HTML]を貼り付ける
　①上記[HTML]をコピーします。
　②ブログ(Blogger)の編集モードで[HTML]ボタンをクリックします。
　③表を配置したい位置でクリックしてカーソルをセットし貼り付けます。
　④[作成ビュー]ボタンをクリックします。
　⑤以下のように表示されます([A]～[F]はダミーデータです)。

A	B	C
D	E	F

⑥[A]～[F]が表示されたセルに画像を貼り付けたり、文字を入力します。
　入力が完了すればダミーデータの[A]～[F]は削除します。

　<div align=""center> ～　</div>は「中央揃え」

★その他
　①「表」に枠線をつけたい時は、<table border="1">とします。以下のように表示されます。

A	B	C
D	E	F

因みに、<table border="10">にすると　

A	B	C
D	E	F

HTML初心者でも簡単に出来ます。是非、チャレンジしてみて下さい。

実は、Wordで作成した表の「表全体をコピー」し「貼り付け」ても表は作れます。

「作成ビュー」のままで貼り付け「可」です。

2017年6月25日日曜日

Bloggerで「表」を使う

Bloggerで「表」を使う