| TOP > コラム > HTML入門 | ||||||||||||
| --- <TABLE>タグを使いこなそう！ 其の壱 --- | ||||||||||||
| ■ はじめに | ||||||||||||
|
HTML全体を解説するのはイヤです。大変過ぎます。ってゆうか無理です。私が使って
いるHTMLタグ辞典は、639ページもあります。ですから、もの凄くたくさん
飛ばして<TABLE>から入ることにします。かなり強引ですが、きっと支持してくれる
人がいると信じてすすめることにしましょう。（と、自分に言い聞かせる。） 私はホームページ製作ソフトを持っていません。HTMLを少しだけ勉強しようと思い、サンプルと して作り始めたHPがいつの間にかFLUGGEになったので、その後も手で書き続けています。 ソフトを使うと、誰にでも早く簡単にHPが作れるらしいです。テンプレートが たくさんあったり、プレビューが出来たりするらしいです。 ホームページ製作ソフトを使っている人も、タグを覚えることによってより有効にソフトが 使いこなせるようになると思います。これからタグを勉強しようとしている人に、タグ組みの 面白さと便利さのエキスをお伝え出来たらと思ってこのページを書きました。 | ||||||||||||
| ■ <TABLE>タグとは | ||||||||||||
|
<TABLE>とは、“表”です。つまり、縦横に並んだ桝目のことです。
ページ上に文字や写真をレイアウトする際、大きさや位置や配置を決めるのにとても便利な
タグです。<TABLE>タグを使うと、簡単に美しいレイアウトを作ることが出来ます。
応用範囲が極めて広く、ほぼ“自由自在”と言っても過言ではありません。 実は、このページも<TABLE>タグによって、“たった1列の表”として書かれています。 枠線が無いので“表”に見えませんが、こうするとちゃんと“表”に 見えますね。(^^ゞ | ||||||||||||
| ■ 表の基本から | ||||||||||||
|
■まず、シンプルな2×2の表を作ってみましょう。 表の始まりが<TABLE>、表の終りが</TABLE>です。 行の始まりが<TR>、行の終りが</TR>です。 セルの始まりが<TD>、セルの終りが</TD>です。 <TR>と</TR>の 間に、列の数だけ<TD></TD>が入り、 全体を<TABLE>と</TABLE>で挟めば完成です。 実際の構成はこんな感じになります。 <TABLE> <TR><TD>Aのセル</TD><TD>Bのセル</TD></TR> <TR><TD>Cのセル</TD><TD>Dのセル</TD></TR> </TABLE> ↑これが、↓こうなります。
どうです？簡単でしょっ！これが“表”の基本です。 読み進む気になりましたか？ ↑上の緑色の部分を「タグ」と言います。「タグ」は必ず半角で書きます。 大文字でも小文字でもかまいません。 このページでは、「タグ」を全て 大文字で書きます。 | ||||||||||||
| ■ 表のサイズを指定する | ||||||||||||
|
表のサイズは、幅も高さも自由に指定することが出来ます。まず、幅から行ってみましょう。 表のサイズは、ピクセル数（絶対値）かパーセンテージ（相対値）で指定します。 ピクセル数で指定すると、必ずその大きさで表示します。パーセンテージで指定すると、 モニターやウインドウの大きさによって、表の大きさが変化します。 どちらも、やり方はほとんど同じです。 ■先程作った表を、「幅300ピクセル」で表示して みましょう。 <TABLE width="300"> <TR><TD>Aのセル</TD><TD>Bのセル</TD></TR> <TR><TD>Cのセル</TD><TD>Dのセル</TD></TR> </TABLE>
widthの部分を、「属性」と言います。「属性」にはいろいろな 種類があって、様々な効果によって「タグ」を補助してくれます。「属性」は必ず半角で書きます。 大文字でも小文字でもかまいません。このページでは、「属性」を全て小文字で書き ます。見やすくするために「属性」を太字にしていますが、そうする 必要はありません。 上のサンプルの場合は、表全体の幅を300ピクセルに指定しています。 列の幅を指定しない場合は、各セル内の文字の幅によって自動調整されます。サンプルでは、 「Aのセル」と「Bのセル」が同じ文字幅なので列の幅も同じになっています。 ■今度は、「幅80%」で表示してみましょう。 <TABLE width="80%"> <TR><TD>Aのセル</TD><TD>Bのセル</TD></TR> <TR><TD>Cのセル</TD><TD>Dのセル</TD></TR> </TABLE>
パーセンテージで指定した場合は、表示可能な最大の幅に対する相対的な大きさで 表示されます。ちなみに100%以上の数値を入れると、はみ出した部分が表示されません。 まあ、ピクセルの指定で全て事足りるので、こちらは忘れていただいてOKかと･･･。 ■次に、「高さ160ピクセル」で表示してみましょう。 <TABLE height="160"> <TR><TD>Aのセル</TD><TD>Bのセル</TD></TR> <TR><TD>Cのセル</TD><TD>Dのセル</TD></TR> </TABLE>
この場合も、各行の高さは自動調整されます。 幅と高さの両方指定する場合は、<TABLE width="300" height="160">と 書きます。 ちょっと簡単過ぎますか？ 心配ご無用ーっ！どんどん難しくなりますから･･･。(-_-;) | ||||||||||||
| ■ セルのサイズを指定する | ||||||||||||
|
■「表のサイズを300×160ピクセル」「Aのセルのサイズを200×100ピクセル」に
指定します。 セルのサイズを指定する方法は、表のサイズを指定する方法と同じです。 <TABLE width="300" height="160"> <TR><TD width="200" height="100">Aのセル</TD><TD>Bのセル</TD></TR> <TR><TD>Cのセル</TD><TD>Dのセル</TD></TR> </TABLE>
「B,C,Dのセル」のサイズは、自動的に決まっています。 | ||||||||||||
| ■ セル内での文字の配置を指定します | ||||||||||||
|
セルの中で、文字や画像をどこに配置するかを指定する「属性」です。
良く使うし、応用が利くので覚えてしまいましょう。左右と上下の組み合わせで、
9通りの指定が出来ます。 ■「左右方向の配置」を指定します。 <TABLE width="450"> <TR> <TD align="left">Aのセル</TD> <TD align="center">Bのセル</TD> <TD align="right">Cのセル</TD> </TR> </TABLE>
■「上下方向の配置」を指定します。 <TABLE height="100"> <TR> <TD valign="top">Aのセル</TD> <TD valign="middle">Bのセル</TD> <TD valign="bottom">Cのセル</TD> </TR> </TABLE>
| ||||||||||||
| ■ 表の配置を指定します | ||||||||||||
|
ここまでの応用です。簡単です。 この「属性」を指定しないと、自動的に左に配置されます。 ■「左に配置」します。 <TABLE align="left"> <TR><TD>Aのセル</TD><TD>Bのセル</TD></TR> <TR><TD>Cのセル</TD><TD>Dのセル</TD></TR> </TABLE>
■「中央に配置」します。 <TABLE align="center"> <TR><TD>Aのセル</TD><TD>Bのセル</TD></TR> <TR><TD>Cのセル</TD><TD>Dのセル</TD></TR> </TABLE>
■「右に配置」します。 <TABLE align="right"> <TR><TD>Aのセル</TD><TD>Bのセル</TD></TR> <TR><TD>Cのセル</TD><TD>Dのセル</TD></TR> </TABLE>
| ||||||||||||
| ■ 枠線の太さを指定します | ||||||||||||
|
<TABLE>をレイアウトとして使う場合は、ほとんど
「枠線無し」に指定します。また、“表”として見せたい場合は、「枠線1ピクセル」にします。
太い枠線を使うのは、特殊な効果を期待するときだけです。 この「属性」を指定しないと、 自動的に「枠線無し」になります。ここまでに使ったサンプルは、見やすくするために 「枠線1ピクセル」に指定していました。レイアウトとして使う場合も、ページが完成するまで 「枠線1ピクセル」を指定しておくと、自分自身で表の状態が見やすくなって便利です。 ■「枠線無し」にします。 <TABLE border="0"> <TR><TD>Aのセル</TD><TD>Bのセル</TD></TR> <TR><TD>Cのセル</TD><TD>Dのセル</TD></TR> </TABLE>
■「枠線の太さを1ピクセル」にします。 <TABLE border="1"> <TR><TD>Aのセル</TD><TD>Bのセル</TD></TR> <TR><TD>Cのセル</TD><TD>Dのセル</TD></TR> </TABLE>
■「枠線の太さを10ピクセル」にします。 <TABLE border="10"> <TR><TD>Aのセル</TD><TD>Bのセル</TD></TR> <TR><TD>Cのセル</TD><TD>Dのセル</TD></TR> </TABLE>
| ||||||||||||
| ■ 終わりに | ||||||||||||
|
お疲れ様でした。ここまでが「基本偏」です。「タグ」と「属性」の説明と、簡単な「属性」の
使い方を解説しました。これで、簡単な表の作成、大きさの指定、文字や画像の配置、くらい
までは出来ると思われます。 次回作の「応用編」では、複雑な表の作り方、複数の表を組み合わせる手法、より見やすく 美しくレイアウトするコツ、などを書きますので興味のある方はご期待下さい。 更に一部のマニアックな方向けに、「テクニック偏」を作ります。表に関係するHTMLの要所、 閲覧者の0.1秒を大切にする掟、タグの間違いや重複をブラウザがどう判断するか、などを テーマにします。ではまた！(^_^)v | ||||||||||||
| TOP > コラム > HTML入門 |