8. 表の作成 
 
ホームページは日記を書くだけだから表なんて関係ないわと思われた方も
多いかもしれませんね。でも、ホームページでは線を見えなくすることが
できるので、表と知らずに見ているページも多いものです。
例えばスプーンのトップページもレイアウトを整える為に表を使っています。

1.表の作成例


<エクセル97を使って>
まず、実際の表をつかった例をみてみましょう。
こちらはケナフの成長を昨年と比較した表です。

エクセル97で作成しましたので、表の枠線が立体的な二重線になっています。
こちらはセルを追加するのにソースからTDやTRのタグを書きました。

<エクセル2000を使って>
こちらはケナフの花がいくつくらい咲くものなのかを毎日集計した表です。
エクセル2000で作成しました。表の枠線がすっきりとした線になっています。
これのいいところはそのままエクセルから開いて数字を書き込み、
上書き保存すると合計のセルに入っている関数がちゃんと働いて
瞬時に縦横の集計をしてくれるのです。毎日のことですから、
電卓をたたくよりずっと楽です。もちろんもっと複雑な関数でも
エクセルの機能のままに使えます。
ちょっと困るのはファイルが大きくなりすぎて表示に時間がかかる
ことでしょうか。
 
2.デザインに使う


それではデザインに使うというのはどういうことなのか見ていきましょう。
前回作成した日記のページですが、自分ではウインドを大きくして作成する
ことが多いですね。でもみてくださる方はもっと小さな画面かもしれません。
するとレイアウトがずれるのです。画面右上の−□×とならんでいるボタン
の真中の□が一つになっているでしょうか、2つになっているでしょうか。
もし□が2つ重なったマークになっていたら、これを押してみてください。
で、ウインドの四隅のどこかにマウスを置いて、ウインドを小さくしてみて
ください。日付と本文の関係とか、クリップアートなどがずれてきませんか。
日記は毎日つけるものですから、決まったレイアウトにしておくといいですね。
クリップアートも同様にはりつけることが出来ます。

1)フロントページエクスプレスで開く
 日記のページを開きます。文書の一番最後にカーソルを置いてエンターで
 改行しておきます。

2)表を書く
 画面上のMAPゴシックと書かれた窓とAのフォントサイズ拡大ボタンの
 間の下あたりに表の挿入ボタンというのがあります。
 これを押して3列3行の表を挿入します。

   

3)文字を入れる
 2000.11.5の文字列を選択してその中で矢印に変わったら、
 一番下の左にセルまでドラッグします。本文も同様に下真中のセルへ、
 帳面の絵は下右のセルまでドラッグして移動します。
 本文の途中で改行など入っていたら取っておきます。
 これは画面を小さくしたときに見ていただいている方の画面の大きさに
 応じて表示してもらう為です。

         

 左の列の上にマウスを持っていくと↓に変わりますから、列を選択して
 セルのプロパテイーから横位置を右に縦位置を上に直しておきます。
 真中の列は横位置左、縦位置上に、右の列は横位置中央、縦位置中央です。
 11.5の上のセルに11.20といれ、その右に表挿入の勉強をしました、などと
 今日の日記を書きます。その右にはお好きな絵をペイントで書いたり、
 クリップアートを入れたりして楽しんでくださいね。

4)上書き保存する
 そのままで保存すると枠線が見えません。
 これでもいいのですが、今回は表示からHTMLにして
 <table border="0">を<table border="1">に変更しておます。
 上のフロッピのマーク、上書き保存のボタンで上書きしておきます。
 順序はそのままで上書き保存して、HTMLで開いて表示のソースから
 border="1"に変更してもどちらでもお好きなほうでどうぞ。

 なお、行を挿入する場合はフロントページエキスプレスで開いて
 挿入から行を選び、上に挿入するを選んでOKを押して下さいね。

次回はいよいよ「リンクをはる」です。

********  一口HTML   ***********

<html><head><title>私の日記</title></head><body background="flower.gif" >

<p align="center"><img src="nikki.2.jpg" width="412" height="69">
<!--これはタイトル文字です--></p>

<table width="680" border="1"><!--ここから表がはじまります-->
<tr><!--ここから行がはじまります-->
<td align="right" valign="top"><!--tdから/tdまでがセルです--> </td>
<td valign="top"> </td>
<td align="center"> </td>
</tr><!--ここで行がおわります-->
<tr>
<td align="right" valign="top">11.20</td>
<td valign="top">表挿入の勉強をしました</td>
<td align="center"><img src="hyo.gif" width="198"
height="86"><!--ここに毎日絵をいれると絵日記になります--></td>
</tr>
<tr>
<td align="right" valign="top">2000.11.5</td>
<td valign="top">今日はワードアートとクリップアートをホームページに貼りつける練習をしました。
やってみたら、意外と簡単なので、ほっとしました。アップする日が楽しみです。</td>
<td align="center"><img src="nikki.1.jpg" width="156"
height="121"></td>
</tr>
</table><!--ここで表が終わります--></body></html>


出来あがりはこちらです

=========================== ご質問コーナー =======================

パソコン初心者の方から文字の入力についてのご質問です。単語を一つずつ
変換していくのと、文章を全部打ってから一括で変換するのとどちらが
効率がいいでしょうかということですが、これは一概にはいえませんね。
ポピュラーな単語だと日本語変換ソフトはおりこうですから、そんなに
まちがえずにきちんと変換してくれますが、人名や地名などややこしいのは
パソコン君も悩むみたいです。単語を一つずつ打つ場合はてにをはや句読点を
つけて変換し、確定せずにそのまま打つと早いかもしれません。一括変換では
文字の区切りなおしが重要です。シフトを押してカーソルキーで文字のくぎり
をパソコン君に教えてあげます。詳しくはこちらです。

なお、ATOKをつかってらっしゃる方は文節の移動がシフト+カーソルキー
で文節の区切りなおしがカーソルキーとMS-IMEとは逆だそうです。

HPtop   back   next