2010年10月13日

ブログで表を簡単につくる方法

 HPやブログに記事を書く時、表を使いたい時があります。

 HPの場合は、HPエディタの中に表作成機能があるので、それを使います。

 ブログの場合は、どうしましょう? そこで二つの方法をご紹介します。ちょっとしたコツが必要です。

1. WORDで表をつくり、ブログに貼る方法

  この方法は、複雑で様々な装飾をした表の場合に役立ちます。

 ① WORDで表をつくります

 ② 表の前後に目印をつけます(下の画像では、「ここから」「ここまで」)。

cuadro001.gif


 ③ この文書をhtml形式で保存します。
   [オフィスボタン]⇒[名前を付けて保存]⇒[ファイルの種類]で[web ページ(フィルタ後)]を選択 ⇒ ファイル名の拡張子を[html]にして保存。

 ④ Wordを終了します。

 ⑤ html形式で保存したファイルを右クリックし、メモ帳で開きます。

 ⑥ 目印の[ここから][ここまで]の間に書かれている<table> </table>を見つけ、それ以外の部分を全て削除します。目印はもう使わないので一緒に削除します。

 ⑦ このtableタグに改行が入ると、表の上部に巨大な空欄が表示されてしまいます。そこで、<table>と</table>の間に書かれているタグを全てつなげて1行にします。
  (1) このとき、メモ帳の[書式]⇒[右端で折り返す]のチェックを外しておきます。改行されている部分が直ぐ分かります。
(2) この作業は結構大変なので、実際には、WORDに貼り付けて作業した方がよいでしょう。簡単に改行位置を見つけることができます。

⑧ これをブログにコピーぺすれば表の完成です。

動物

不要なもの

必要なもの

小判

猫じゃらし

飼い主




2.フリーのホームページエディタ(alphaEDIT)を使った表作成

 この方法が最も簡単です。このソフトはVISTAでは使えなくなったのですが、これをVISTAでも使える方法を過去記事に掲載しています。

①「alphaEDIT」を起動します。

② <body>の下に空白をつくります。

③ メニューバーの[テーブル]アイコンをクリックすると、[テーブルの作成]ダイアログが表示されます。

edit_samp.jpg


④ ここに必要な行の数と列の数を入力します。


⑤ [WYSIWYG]タブに切り替えます。

⑥ 表にデータを入力します。

⑦ データ部分を選択し、センタリングします。

cuadro003.jpg


⑧ [HTMLソース]タブを開きます。

⑨ <table>から</table>までを選択し、右クリックしてコピー。

cuadro004.gif


⑩ これをブログに貼り付けます。

⑪ このままでは表の上部に広い空白ができるので、改行させずに<table>から</table>までを1行にします。

 動物

 不要なもの

必要なもの 

 猫

 小判

 猫じゃらし

 犬

 棒

 飼い主






posted by ネコ師 at 01:00| Comment(0) | 役立つ知識(web編) | 更新情報をチェックする
この記事へのコメント
コメントを書く
コチラをクリックしてください