| 【 １：テーブルとは】 | 【 ２：テーブルを表示する】 | 【 ３：テーブルを表示するタグ】 | |||||||||||||
| 【 ４：枠（セル）内の文字や画像の表示】 | 【 ５：枠について】 | 【 ６：ここはありません。】 | |||||||||||||
| 【 ７：ここまでのおさらい】 | 【 ８：】 | 【 ９：】 | |||||||||||||
【１：テーブルとは】 ホームページ作成で言う テーブル とは、 表 のことです。 時間表、売上表、カラーコード表、おいしいラーメン店一覧、○○一覧など、いろんな表がありますが、それをホームページ上で表現する手法です。 このテーブルは、いろいろな場面で使いますので、少しややこしいですが、ここに書いてあることだけでいいですので、必ず覚えてください。 ここでは、次の表を作ってみます。
このテーブルの特徴は、１行目に表題があり、２行目と３行目は近畿でまとめられ、４行目と５行目は関東でまとめられています。 近畿は枠の中央、関東は中央で枠の下側にあります。 大阪は左側で枠の中ほど、神戸は枠の右側、東京は左側で枠の上のほう、横浜は枠の中央に配置されています。 これを タグ で表してみましょう。 【頁ＴＯＰへ】 | |||||||||||||||
【 ２：テーブルを表示する】 それでは、「ホームページフォルダ」の index.html に前回から続けて次のとおりに改行しながら書いてください。 この画面で、<～～>の途中で改行されていても、<～～>は一行で書いてください。 <table width="300" border="1" cellpadding="0" cellspacing="0" align="CENTER"> <tr> <td colspan="3"><font size="3" color="#0080ff">桜の開花時期</FONT> </td> </tr> <tr> <td rowspan="2" width="80" height="50" align="CENTER"><FONT size="2" color="#0080ff">近畿</FONT> </td> <td width="100"><FONT size="2" color="#0080ff">大阪</FONT> </td> <td width="120"><FONT size="2" color="#0080ff">３月２０日</FONT> </td> </tr> <tr> <td align="RIGHT"><FONT size="2" color="#0080ff">神戸</FONT> </td> <td><FONT size="2" color="#0080ff">３月２８日</FONT> </td> </tr> <tr> <td rowspan="2" height="50" align="CENTER" valign="bottom"><FONT size="2" color="#0080ff">関東</FONT> </td> <td valign="top"><FONT size="2" color="#0080ff">東京</FONT> </td> <td><FONT size="2" color="#0080ff">３月１８日</FONT> </td> </tr> <tr> <td align="CENTER"><FONT size="2" color="#0080ff">横浜</FONT> </td> <td><FONT size="2" color="#0080ff">３月２５日</FONT> </td> </tr> </table> 少し長いですので、間違わないようにしてください。とんでもない表になりますよ。 でも大丈夫です。これがパソコンのいいところです。誰にも迷惑はかけませんから。 記入できたら、上書き保存してから、確認してみましょう。 間違ったら、すぐ修正です。 【頁ＴＯＰへ】 | |||||||||||||||
【 ３：テーブルを表示するタグ】 それでは、見ていきましょう。 まず、最初の行に<table ・・・>と宣言しています。これがテーブルであると言う表示（開始タグ）です。 最後の行は、</table>で、テーブルの終了（終了タグ）を意味します。 ２行目の<tr>は、テーブルの行を表します。 ５行目の</tr>は、テーブルの１行目の終わりを表しています。 ３行目の<td ・・・>は行の最初の一つのセルを表し、この場合は、見出しとしてcolspan="3"により１行目をまとめて（セルを連結して）います。 colspan="3"の３は、３つのセルを連結していることを表しています。 ６行目の<tr>は、テーブルの２行目の開始です。 ７行目の<td ・・・>は、テーブルの２行目の１つ目のセルの開始で、この場合は、 rowspan="2"で、縦に２つのセルを連結していることを表しています。 ８行目の</td>は、テーブルの２行目の１つ目のセルの終わりです。 ９行目の<td ・・・>は、テーブルの２行目の２つ目のセルの開始です。 以下同じように１行ずつ検証して行ってください。 テーブルに文字を表示する場合は、この中の<td ・・・>～～</td>の間に記入します。 また、文字の代わりに画像も表示することも出来、画像と文字を同じセル内に表示も出来ます。 セル内の画像や文字には、リンクも張ることが出来ます。 このような出来ることを使って、ホームページ内のレイアウトも整えることが出来ます。 ほとんどすべてのホームページで、このテーブルの手法は使われています。 このページも、テーブルでレイアウトして出来ています。 参考に、他のページのソースも見て、研究してください。 ホームページデザインをする場合に、このテーブルを抜きには考えられませんので、十分理解してください。 ホームページビルダーなどの作成ソフトでは、複雑なテーブルも割合簡単に出来ますので、ご安心ください。 但し、ほんとのことを知っていないと、修正や追加はできませんので、しっかり覚えてください。 規則自体は簡単ですので、すぐ覚えられると思います。 【頁ＴＯＰへ】 | |||||||||||||||
【 ４：枠（セル）内の文字や画像の表示】 文字や画像の表示については、特別お話しすることはありません。 <td ・・・>～～</td>の間に記入することですべてです。 セル内のどこに表示するかなどのレイアウトについては、別に タグ があります。 この例でも、関東や神戸、東京、横浜についてそれぞれ、 <td ・・・ align="CENTER"、valign="bottom"、<td align="RIGHT">、 <td valign="top">、<td align="CENTER">などのように、<td ・・・>のなかで、 align="CENTER"、valign="bottom"、align="RIGHT"、 valign="top"、align="CENTER"として指定しています。 どうですか、難しい単語はありませんね。右左、上下、の指定で終わりです。 意外と簡単だった。と言う声が聞こえてきそうですが、これを実際にレイアウトに使うとなると、かなり複雑なページとなりますので覚悟してください。 テーブルは、１つのセルのなかにも作れると言うことを、他のページで実際に研究しておいてください。 この手法を用いて、面白いページがいっぱい作られています。 < 【頁ＴＯＰへ】 | |||||||||||||||
【 ５：枠について】 枠の線について、少し説明しておきます。 枠の線の太さも調節できます。 例の１行目の<table width="300" border="1" cellpadding="0" cellspacing="0" align="CENTER">の中の border="1"の意味は、「枠の線は１ピクセルで表示」と言うことです。 前回の画像のときにも干支のイラストのなかで、画像の周りの枠線を太くした border="20"というふうに使われています。 border="0"であれば枠線の表示はなく、あたかも白紙の上に整然と文字や画像が配置してあるように見せることが出来ます。 実は、表にして、レイアウトし易いようにしてあるだけのことでした。テーブルの手法は、学術論文などを発表する場合のデータ表示をしやすくするために出来た手法ですが、このようなデザイン的な使い方をする方が今では主流となっています。 また、cellpadding="0" cellspacing="0">を指定することによって、セルと文字や画像の間隔を指定することが出来ます。 枠線のすぐ側から文字が記入されているよりも、少し離した方が見やすいでしょう。 このページもcellpadding="5" cellspacing="5">として設定しましたので、前回のページとは少し雰囲気が違うと思います。 【頁ＴＯＰへ】 | |||||||||||||||
【 ６：ここはありません。】 ここはありません。 【頁ＴＯＰへ】 | |||||||||||||||
【 ７：ここまでのおさらい】 おさらい① テーブルは、レイアウトに必須であるので、よく理解するのがいい。 おさらい② テーブルは、<table ・・・>～</table>で表示する。 おさらい③ テーブルの行は、<tr・・・>～</tr>で表示する。 おさらい④ テーブルのセルは、<td ・・・>～</td>で表示し、この部分に画像や文字を記述する。 おさらい⑤ テーブルの枠線は、 border="線の幅"で指定出来る。 おさらい⑥ セルの枠線と文字や画像の間隔は、cellpadding="枠との間隔" cellspacing="セルとセルとの間隔"で指定出来る。 おさらい⑦ テーブルの中に、テーブルを作ることが出る。 このことがページデザインを膨らますことに貢献している。 分かったことは、いっぱいあるので、この章については、それぞれで理解に努めてください。 以上テーブルについて簡単に述べましたが、テーブルに関しては、凄くたくさんの応用例があるので、説明をどのようにしてよいかわかりません。他のホームページのソースを参考にして、面白い、表現豊かなページを作ってください。 【頁ＴＯＰへ】 | |||||||||||||||