2010年10月13日

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

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

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

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

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

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

 @ WORDで表をつくります

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

cuadro001.gif


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

 C Wordを終了します。

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

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

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

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

動物

不要なもの

必要なもの

小判

猫じゃらし

飼い主




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

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

@「alphaEDIT」を起動します。

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

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

edit_samp.jpg


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


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

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

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

cuadro003.jpg


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

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

cuadro004.gif


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

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

 動物

 不要なもの

必要なもの 

 猫

 小判

 猫じゃらし

 犬

 棒

 飼い主






posted by ネコ師 at 01:00 | Comment(0) | 役立つ知識(web編) | このブログの読者になる | 更新情報をチェックする
この記事へのコメント
記事に関係ないコメント、宣伝的なコメントは削除させていただきます。
コメントを書く
お名前: [必須入力]

メールアドレス:

ホームページアドレス:

コメント: [必須入力]

認証コード: [必須入力]


※画像の中の文字を半角で入力してください。
※ブログオーナーが承認したコメントのみ表示されます。

▲ このページのTOPに戻る