↑作成ソフトがあればテーブルも簡単!↑

Endless Dream!-超〜簡単HP作り
11.テーブル
ちょっとインチキテーブル作り!

 このページではテーブルについて書きます。慣れないとちょっと難しいので別に使わなくてもいいんだけど、うまく使うとかなりおしゃれなページになるよ。簡単な作り方もあるので、それも参考にしよう!


<テーブルって何?>

 テーブルというのはのこと。別になくても十分いいページは作れるけど、テーブルを使うと複雑なレイアウトが作れる。

 僕のHPでは表紙などで、左がリンク、右が説明のコメントを表の形で書いてある部分があるよね?ああいう風に線で分けるのが一番普通のテーブル。(外枠は太さも変えられるよ)

 また僕はあまり使ってないけど、見えない線のテーブルを組み合わせることで、複雑なレイアウトを作ることもできる。僕のHPのように簡単なタグしか使ってないページは、よく見ると横に輪切り構造になってる。だけど、うまくテーブルを使うと、同じ高さに右と左で違うものがおけるようになる。

 ただ最初は難しいので、簡単なテーブルを使ったものを作り、余裕があったらテーブルを組み合わせて複雑なレイアウトにしてみるのがいいかな。


<基本のテーブルのタグ!>

 テーブルのタグは自分で書くのはとっても面倒。ということで基本のタグを書いておくので、それを切り貼りして使っちゃおう!!

   <table border="外枠の太さ">
   <tr><td>左・1列目の文章</td><td>中央・1列目の文章</td><td>右・1列目の文章</td></tr>
   <tr><td>左・2列目の文章</td><td>中央・2列目の文章</td><td>右・2列目の文章</td></tr>
   <tr><td>左・3列目の文章</td><td>中央・3列目の文章</td><td>右・3列目の文章</td></tr>
   </table>

 上のタグを使ってテーブルを作るとこうなる。(外枠の太さは"2"。)見やすいように中央寄せしてあります。

左・1段目の文章中央・1段目の文章右・1段目の文章
左・2段目の文章中央・2段目の文章右・2段目の文章
左・3段目の文章中央・3段目の文章右・3段目の文章

 タグのポイントとなるのは、<tr> が大きく横の列を決め、<td> が列の中のそれぞれの小さい部分(コマというと分かりやすいかな?)を決めるということ。あと外枠の太さの数字を "0" にすると線の見えないテーブルを作れる。

 この中の文章の部分を書き換えれば簡単にテーブルができるよ。


<ちょっといんちきテーブル作り!>

 テーブルは一つならそんなに難しくないけど、テーブルの中にテーブルを組み込むなど複雑なものを作ろうとするとかなり難しい。またコマの中を分割したり、文字をよせるのも面倒。

 そういう時は作成ソフトで作ってしまおう!ここでは FrontPage Express を使ったいんちきテーブル作りを紹介します。

 1.一番上の「表」→「表の挿入」を順にクリック。
 2.「行」(縦)や「列」(横)の数等を決め、一番大きいテーブルを作る。
 3.コマの中を分割したいときは、「表」→「セルの分割」をクリックし分割することもできる。
 4.テーブルの中にテーブルを入れたいときは、いれたい部分をクリックしカーソルを点滅させた後、1・2の作業を繰り返す。
 5.後で分かりやすいように大元となる文章も書き込むと分かりやすい。
 6.その他いろいろと修正して出来上がったら、一番上の「ファイル」→「名前をつけて保存」→右下の「ファイルとして保存」をクリックしデータを保存する。(名前は "table" がいいかな。)
 7.保存したデータをメモ帳で呼び出し、必要ある部分をコピーし、今作っているページの必要なところに貼り付ける。後は普段のページの作り方と同じ。

 ちょっと難しく感じるかもしれないけど実は簡単。要はテーブルの基本となる部分だけを作成ツールで作って、そのデータを利用するだけ。この方法はテーブルに限らず他の場合にも応用できるよ!

 *FrontPage Express のくわしい使い方はヘルプを参照にしてね。うまくやれば、外枠の線の太さ、文字の寄せ方など事細かに作れるよ!!


<ポイント>

 テーブルはタグを覚えるのは面倒だけど、一つ作ってしまえばそれを利用してコピー&ペースト、文章だけ修正すれば簡単に作れるよ。とにかく最初のを作ってしまおう。

 文章のそれぞれの文字の色や大きさを変えたり、リンクをはることもできる。その際は文章の部分に基本タグで覚えたものを書き加えよう!<td>の中の部分を書き換えればOK。)

 コマ(行や列)を増やしたいときは、その分のタグを増やせばOK!

 テーブルはちょっとむずかしめのテクだけど、使えるようになると便利だし、格段におしゃれなHPが作れるよ。困ったときは人のHPのソースを見て研究しよう!!