エクセルなどで作った表をブログなどに掲載したい場合はないだろうか。
普通では、あまり必要性がないかもしれないが、例えば自作パソコンを作った時の費用などを書きたい時には、表になっているほうが見やすい。
ブログや、ホームページで表を掲載しようとすると、htmlのテーブルの知識が必要になる。それを知ってしまえば、それはそれでとても便利なのだが、あまり使う機会のないことに時間をさくのももったいない。
番号 | 品物 |
1 | パソコン |
2 | 本 |
3 | 飲み物 |
4 | 食べ物 |
5 | タブレット |
6 | 時計 |
例えば、このような簡単な表であっても、htmlのタグの記述は面倒だ。
表計算のエクセルのように、列や行を指定してセンターに文字を持っていくこともできない。
しかし、世の中には、抜け道がある。
多少の手間はかかるが、htmlのタグの記述を自分でしなくても表を掲載できる。
まずは、エクセルなどの慣れた表計算ソフトを使って表を作る。
文字や背景の色や大きさ、センターリング、右寄せ、左寄せもここで全てやってしまう。罫線も指定しておく。
にゃん吉は、フリーのオフィスソフト、オープンオフィスを使う。

こんな単純で簡単な表ならタグを記述してもいいのだが、これだけでも指定しなければならない項目は多い。後で、ソースを見たらびっくりする。

表が出来上がれば、「ファイル」→「名前をつけて保存」をクリックする。

保存する場所は、後でわからなくならない場所でなければ、どこでもいい。
デスクトップでも、マイドキュメントでも好きなところを指定する。

大切なのは、ファイルの種類である。
ここで、
(html) または、
(htm) を指定する。これは、ホームページを作る時の拡張子なのだ。慣れないうちは拡張子を表示する設定にして使ったほうがいいかもしれない。
ちゃんと保存できたら、ウエブページのファイルができあがる。

にゃん吉の場合は、htmlファイルはクロームで開く設定にしてある。IE(インターネットエクスプローラー)で開く設定にしてあれば、IEのファイルができる。アイコンも、IEのアイコンになる。

そのまま開くと、エクスプローラーで開いたファイルが見える。
罫線が途絶えているように見えるが、ご愛嬌である。
じつは、ウエブページ上の縦線は、けっこう難しい。
横線は、比較的簡単に引けるのだ。
ここで、表を作っているタグをコピーしてブログに貼り付ければ、表を掲載することができる。
ここで、設定から、「ソース」を表示させてコピーすればいい。
クロームの場合だと、右上の横線三本の所をクリックすれば、「Google Chromeの設定」に進める。
下のほうに、「その他のツール」がある。ここをクリック。
「ソースを表示」をクリックする。
すると、htmlのソース(タグの記述)が出てくる。

これが、ソースなのである。決して醤油ではない。
上の方に書かれた記述は、ページの決まりごとなどなので、関係ない。
表の部分は、 <table> から始まって、</table> までの部分になる。
大文字と小文字は関係ない。半角英字での記述となっている。
これを、そのままブログに貼り付ければ、上のように表が表示される。
ブログなどで、自動で改行の設定にしている場合は、ソースの中に改行があれば、ページに反映してしまう。
htmlでは改行は、<br>という命令のみで行われる。
これがなければ、いくら改行しても改行しないのだ。
htmlの記述では、わかりやすくするために、改行やスペースを多用している。
これは、htmlでは反映されないが、自動で改行をする設定にしていると反映されてしまうのだ。
ソースの改行やスペースをとっぱらってしまうか、自動改行をオフにするか、それはおまかせする。
ソースを表示させる方法は、他にもある。
ファイルの(.html) の部分を (.txt)と書きかえて、ファイルを開く。
そうすれば、ソースがそのまま出てくる。
ファイルの記述が大きすぎる場合、ワードか、ワードパットで開いてもいい。
こうすれば、自分でタグの記述をすることなく、ブログなどに表を掲載できる。
ただし、この方法では、写真などをそのまま表の中に入れて掲載することは難しいだろう。
そのあたりは、<table>タグの使い方を少し勉強しよう。
YOUTUBE チャンネル登録お願いします。
PR
テーマ : つぶやき
ジャンル : ブログ