親方.info
もっと楽しく!
インターネットショッピング!
便利なページを創りましょう!
CONTENTS
◆Top
◆Shopping
◆オンラインカジノ
◆アフィリエイトを始めよう!
◆ホームページ作成
◆フリー素材集
◆懸賞情報をチェック
◆Search&Link
◆ホームページ製作
◆Gallery
◆BBS
◆Fishing
◆リンク集
◆Profile
◆ゲームセンター
 
楽天フリマ
古本・ブランド・PC等300万商品を激安ショッピング!
サーチ:
Keyword:
Amazon.co.jpアソシエイト

 
簡単ホームページ作成講座

※用語解説のリンクにつきましては、「 IT用語辞典 e-Words (株式会社インセプト)」 様の許可を得てリンクしています。 下記の検索窓もご利用ください。
 
IT用語検索
 |INDEX|8|
テーブルを作ろう!(基本編)
 
 Webページを作っていくうえで、非常に重要なタグにTABLE タグがあります。元々は表を簡単に作るためのタグですが、複雑なレイアウトを作っていく上では必要不可欠なタグです。TABLE タグを上手く使えるかどうかが、Webデザイナーの腕の見せどころと言っても過言ではありません。
 難しく考えず、簡単なところから徐々に入っていきます。基本要素は、<TABLE> <TR> <TD> です。全てに終タグが付きます。
Sample
<HTML>
<HEAD>
<TITLE>テーブルを作る</TITLE>
</HEAD>
<BODY>
<TABLE BORDER="1">
<TR>
<TD>テーブルを作ってみよう</TD>
</TR>
</TABLE>
</BODY>
</HTML>
38.html
 これだけでは、ただ単に文字の周りに枠が付いただけです。(上記サンプルの場合<TR>と<TD>は省略してもかまいません)
 これに属性を付けていくわけですが、基本属性は以下の3つです。値が”0”でも、常に指定するようにしましょう。
<BORDER>
外枠の太さを指定します。0を指定すると、枠線は表示されません。  
<CELLSPACING>
表全ての線の太さを指定します。デフォルトは2です。上記サンプルでは、この属性を指定していないので、デフォルトの2で表示されています。線が太いなぁ?と感じた方もいらっしゃるのでは??
<CELLPADDING>
枠線と枠内のテキストのマージンを指定します。線と文字を離して見やすくしましょう。デフォルトは1です。
Sample
<HTML>
<HEAD>
<TITLE>テーブルを作る2</TITLE>
</HEAD>
<BODY>
<TABLE BORDER="5" CELLSPACING="5" CELLPADDING="10">
<TR>
<TD>テーブルを作ってみよう</TD>
</TR>
<BR>
<TABLE BORDER="1" CELLSPACING="0" CELLPADDING="0">
<TR>
<TD>テーブルを作ってみよう</TD>
</TR>
</TABLE>
</TABLE>
</BODY>
</HTML>
39.html
 上のサンプルは極端な例です。<BORDER>と<CELLSPACING>の指定で、見え方がかなり変わると思います。

 上のように、セルが一つだと、まだまだ表を作っているという感覚はないですね。表と言えば、何列も何行もあって、セルがいっぱいあるものだと思います。TABLEでも、何行も何列も作成可能です。ちなみに、列とか、行とか、セルというのは、下の画像で確認してください。
行・列・セルの説明
 上の例では、エクセルを参考に説明しました。では、実際に TABLE でこのような表を作ってみましょう。一番最初に出てきた<TR>と<TD>に注目してください。
Sample
<HTML>
<HEAD>
<TITLE>テーブルを作る3</TITLE>
</HEAD>
<BODY>
3行3列の表を作ろう!<BR>
<TABLE BORDER="1" CELLSPACING="0" CELLPADDING="5">
<TR>
<TD>1行1列</TD>
<TD>1行2列</TD>
<TD>1行3列</TD>
</TR>
<TR>
<TD>2行1列</TD>
<TD>2行2列</TD>
<TD>2行3列</TD>
</TR>
<TR>
<TD>3行1列</TD>
<TD>3行2列</TD>
<TD>3行3列</TD>
</TR>
</TABLE>
</TABLE>
</BODY>
</HTML>
40.html
 <TR>〜</TR>で行を作ります。
 <TD>〜</TD>で列を作ります。
 TABLEは奥の深いタグです。元々、軍事利用のために作られたインターネットの世界では、文字が見れれば良いという考えだったので、ごく少数のタグとテキストだけで十分でした。一般に開放され、現在のように誰もが見れる環境になり、Webサイトは絶対的な広告・告知手段として広く利用されるようになりました。もし、文字だけの羅列で終わっていれば、今のようにみんなが見るものまでは発展しなかったと思います。
 Webサイトを作る側も、楽しく見てもらいたいし、作って楽しいものを作りたいと常に思い、考えています。単なる表を構成するタグ、TABLEをどんどん変形させて見やすいものを作る。TABLEの中にTABLEを入れたらどーなるんだろう?なんていう発送が、今のWebページを生んだんだと思います。TABLEの章はまだまだ続きます。Web サイトにとってのレイアウトの救世主!とまで言われるTABLEを使いこなすことが、見やすいページ作りの基本です。

 <BORDER>を”0”にすると、表の感覚がなくなりますよね?表と言えば、罫線で区切られて、見やすいように整列されているものです。Web上のレイアウトでは、ワープロソフトや、本を作るDTPソフト、illustrator等のグラフィックソフトのように、自由に書きたい位置に文字や画像を置くのは困難です。ところで、みなさんが見ているWebページは、自在にテキストの位置や、画像の位置を配置しています。TABLEを使いこなすとは、このような事を指しています。
  多くのWebページは全体をTABLEで囲い、その中にも多数のTABLEが多く配置されています。レイアウトとして使うTABLEでは大概BORDERは0に設定されています。枠があったら、逆に変ですよね?
 みなさんがこれからページを作っていく上では、既存のページを参考にするのが一番です。優秀なWebデザイナーがどのようにTABLEを使い、構成しているか良く見てみましょう。気に入ったページを見つけたら、ブラウザの画面上で右クリック→「ソースの表示」を選べばHTMLファイルが表示されます。そのファイルを任意な場所にHTML ファイルとして保存して、BORDERを1に変更して見てみましょう。あらゆるところにTABLEが使われている事がわかるはずです。(ファイル→「名前を付けて保存」でも可)
 セルの色を変えて表示したり、見せる方法は色々あります。慣れてきたらページを見るだけでどのような構成をしているか分かるようになってきますよ。
 
  次は、<WIDTH>属性です。
 <WIDTH>属性は、横幅の指定に使います。第5章のイメージの幅の指定でも出てきました。テーブルの横幅を指定します。
  <HEIGHT>属性も使用可能ですが、あまり薦められない属性に指定されているので、使用しない方が無難です。使うのであれば、<HEIGHT="1000">のように使ってください。どうしても枠の高さを確保したい時には有効な属性です。
Sample
<HTML>
<HEAD>
<TITLE>テーブルの幅を指定</TITLE>
</HEAD>
<BODY>
<TABLE BORDER="1" CELLSPACING="0" CELLPADDING="10" WIDTH="500">
<TR>
<TD>幅を500ピクセル</TD>
<TD>テーブルの幅だけに指定</TD>
</TR>
</TABLE>
<TABLE BORDER="1" CELLSPACING="0" CELLPADDING="10" WIDTH="500">
<TR>
<TD WIDTH="150">セルにも</TD>
<TD WIDTH="350">幅を指定しました</TD>
</TR>
</TABLE>
</BODY>
</HTML>
41.html
 サンプルを見て下さい。上のテーブルは、<TD>に<WIDTH>属性を設定していません。ほぼ真ん中で2つに分かれているようにも見えますが、若干右のセルの方が広く感じます。<TD>に指定しない場合、ブラウザが適当にテキストの量などを判断して、分割します。極端にしてみると…。
Sample
<HTML>
<HEAD>
<TITLE>テーブルの幅を指定</TITLE>
</HEAD>
<BODY>
<TABLE BORDER="1" CELLSPACING="0" CELLPADDING="10" WIDTH="500">
<TR>
<TD>幅は</TD>
<TD>テキストの量によって、勝手に広さを変えて表示します。綺麗に分割するには、セルにも幅を指定しましょう。</TD>
</TR>
</TABLE>
<br><br>
<TABLE BORDER="1" CELLSPACING="0" CELLPADDING="10" WIDTH="500">
<TR>
<TD WIDTH="250">幅は</TD>
<TD WIDTH="250">テキストの量によって、勝手に広さを変えて表示します。綺麗に分割するには、セルにも幅を指定しましょう。</TD>
</TR>
</TABLE>
真ん中から分割されてますね?
</BODY>
</HTML>
41_2.html
  次は、<ALIGN>と<VALIGN>をみていきましょう。
 <ALIGN>は、左・中・右寄せの指定です。第6章のテキストの位置の指定でも出てきました。指定しなければ、左寄せになります。
 <VALIGN>は、上・中・下寄せの指定です。指定しなければ、中寄せになります。

 <ALIGN>は、<TABLE>と<TD>に設定するのとでは、かなり意味合いが違います。
  <TABLE>に設定すれば、そのテーブル全体の位置が変わります。<LEFT>は設定しなくても良いのですが、表の右側にテキスト等を置きたい時は指定してください。表の左にテキスト等を置きたい時は、<RIGHT>を指定します。<CENTER>を指定した場合は、表は、真ん中に表示されるだけで、テキスト等は置けません。
  <TD>に設定した場合は、セルひとつに影響します。
Sample
<HTML>
<HEAD>
<TITLE>テーブルの位置を指定</TITLE>
</HEAD>
<BODY>
<TABLE BORDER="1" WIDTH="500" ALIGN="CENTER">
<TR>
<TD>幅を500ピクセル</TD>
<TD>ページの中央にテーブルを表示したよ</TD>
</TR>
<TR>
<TD ALIGN="CENTER">セルに</TD>
<TD ALIGN="CENTER">ALIGN="CENTER"でセル中央に表示</TD>
</TR>
<TR>
<TD ALIGN="RIGHT">右にするには</TD>
<TD ALIGN="RIGHT">ALIGN="RIGHT"で右寄せです</TD>
</TR>
<TR>
<TD>
例えばここが<BR>
数行だと<BR>
右の行は
</TD>
<TD>VALIGNを指定しないと中央に表示されます</TD>
</TR>
<TR>
<TD>
例えばここが<BR>
数行だと<BR>
右の行は
</TD>
<TD VALIGN="TOP">VALIGN="TOP"で上揃えになります</TD>
</TR>
<TR>
<TD>
例えばここが<BR>
数行だと<BR>
右の行は
</TD>
<TD VALIGN="BOTTOM">VALIGN="BOTTOM"で下揃えになります</TD>
</TR>
</TABLE>
<BR>
<TABLE BORDER="1" WIDTH="500" ALIGN="LEFT">
<TR>
<TD>TABLEにALIGN=&quot;LEFT&quot;を指定</TD>
</TR>
<TR>
<TD>テキストが右側に書けます</TD>
</TR>
</TABLE>
テキストが表の右側に回りこみます。
<BR CLEAR="ALL">
元に戻すには、<BR CLEAR=&quot;ALL&quot;>で回りこみが解除されます。
<BR>
<BR>
<TABLE BORDER="1" WIDTH="500" ALIGN="RIGHT">
<TR>
<TD>TABLEにALIGN=&quot;RIGHT&quot;を指定</TD>
</TR>
<TR>
<TD>テキストが左側に書けます</TD>
</table>
テキストが表の左側に回りこみます。
<BR CLEAR="ALL">
元に戻すには<BR CLEAR="ALL"> ここは表の下です。
<BR>
<BR>
<TABLE BORDER="1" WIDTH="500">
<TR>
<TD>TABLEにALIGNを指定しなければ、左寄せの表ができます。</TD>
</TR>
<TR>
<TD>表の横にテキストは書けません。</TD>
</TR>
</TABLE>
テキストは下に続きます。
</BODY>
</HTML>
42.html
 上の例では<TABLE>に、<ALIGN>を指定しました。表の横に文字が書けるので、なんとなく幅が広がってきたような気がします。簡単なWebページを作る上では、有効な属性ですが、残念ながら、複雑なページを作っていく上では、あまり利用されない属性です。ここでは、このようなタグも有る位に思っておいてください。
 実際にレイアウトを組んでいくには、次章で説明するように、テーブルの中にテーブルを入れていく方法を使います。言葉で書くと「なんのこっちゃ?」と思うかもしれませんが、やってみれば簡単です。テーブルタグに早く慣れていきましょう!

 次は、セルを結合してみましょう。
 <COLSPAN>:セルの横方向(列)を結合
 <ROWSPAN>:セルの下方向(行)を結合
Sample
<HTML>
<HEAD>
<TITLE>セルを結合する1</TITLE>
</HEAD>
<BODY>
<TABLE BORDER="1" CELLSPACING="0" CELLPADDING="10" WIDTH="500" ALIGN="CENTER">
<TR>
<TD>結合</TD>
<TD>なし</TD>
<TD>3列です</TD>
</TR>
<TR>
<TD COLSPAN="2">横2つを結合</TD>
<TD>一つはそのまま</TD>
</TR>
<TR>
<TD COLSPAN="3">横3つを結合</TD>
</TR>
<TR>
<TD>逆もあり</TD>
<TD COLSPAN="2">横2つを結合</TD>
</TR>
</TABLE>
</BODY>
</HTML>
43.html
 上の例では、横方向に結合してみました。同じように縦方向です。
Sample
<HTML>
<HEAD>
<TITLE>セルを結合する2</TITLE>
</HEAD>
<BODY>
<TABLE BORDER="1" CELLSPACING="0" CELLPADDING="10" WIDTH="500" ALIGN="CENTER">
<TR>
<TD ROWSPAN="3">縦に結合</TD>
<TD>左が</TD>
<TD>縦に</TD>
</TR>
<TR>
<TD>つながり</TD>
<TD>ました</TD>
</TR>
<TR>
<TD>いかが</TD>
<TD>ですか?</TD>
</TR>
</TABLE>
</BODY>
</HTML>
44.html
 組み合わせるとこんな感じです。色々なパターンを試してみましょう!
Sample
<HTML>
<HEAD>
<TITLE>セルを結合する3</TITLE>
</HEAD>
<BODY>
<TABLE BORDER="1" CELLSPACING="0" CELLPADDING="10" WIDTH="500" ALIGN="CENTER">
<TR>
<TD COLSPAN="3">横に結合</TD>
</TR>
<TR>
<TD ROWSPAN="3">縦に結合</TD>
<TD>左が</TD>
<TD>縦に</TD>
</TR>
<TR>
<TD>つながり</TD>
<TD>ました</TD>
</TR>
<TR>
<TD>いかが</TD>
<TD>ですか?</TD>
</TR>
</TABLE>
</BODY>
</HTML>
45.html
 複雑になっても考えればできます。慣れるためにいろいろな表を作って見ましょう。一度作ったら、その表をさらに変形させてみるのが勉強になります。一度結合したものを戻してみるとかね。頑張りましょう!(Sampleを見て、作ってみよう!答えは下のソースです。)
Sample
<HTML>
<HEAD>
<TITLE>セルを結合する4</TITLE>
</HEAD>
<BODY>
<TABLE WIDTH="500" BORDER="1" CELLSPACING="0" CELLPADDING="0">
<TR>
<TD> </TD>
<TD COLSPAN="4"> </TD>
</TR>
<TR>
<TD ROWSPAN="4"> </TD>
<TD COLSPAN="2"> </TD>
<TD ROWSPAN="3"> </TD>
<TD> </TD>
</TR>
<TR>
<TD> </TD>
<TD> </TD>
<TD ROWSPAN="2"> </TD>
</TR>
<TR>
<TD ROWSPAN="2"> </TD>
<TD> </TD>
</TR>
<TR>
<TD> </TD>
<TD COLSPAN="2"> </TD>
</TR>
</TABLE>
</BODY>
</HTML>
46.html

INDEX|8|

Copyright(c)2004 oyakat All rights reserved