| テーブルとは？ テーブルとは机もしくはデスクのことでは無く、Ｗｅｂの世界では表の事をテーブルと言います。表計算や色々な一覧表などの表そのものがテーブルです。 ここではテーブルを使ってどのような事が出来るのか説明して行きたいと思います。 テーブルエレメントで囲まれた場所が、テーブルの全体になります。テーブルの中にある１つ１つの升目はセルと呼びます。また、横方向にセルが並んだ行をロウと呼び、 縦方向にセルが並んだ列をコラムと呼びます。 テーブル作成の基本 テーブル作成の基本は、＜ＴＤ＞タグと＜/ＴＤ＞タグで囲むことによって１つ１つのセルを作りだし、次にそのセルを＜ＴＲ＞タグと＜/ＴＲ＞タグで囲むことによって１列を 作り出します。その繰り返しさえすれば、いくらでも列を増やすことが出来ます。最後にその全体のタグを＜ＴＡＢＬＥ＞タグと＜/ＴＡＢＬＥ＞で囲んで完成されます。 テーブルはそのままでは枠線が表示されませんので、ボーダー属性で属性値を指定して枠線を表示します。 ＜ＴＤ＞＝Table Data cellの略です。TDエレメントと呼びます。 ＜ＴＲ＞＝Table Rowの略です。TRエレメントと呼びます。 |
サンプル
サンプルのソース <TABLE align="center" border="3" BGCOLOR="#6666CC" CELLSPACING="3" CELLPADDING="3"> <CAPTION>テーブルサンプルです。</CAPTION> <TR><TD><img src="画像のurl" alt="サンプル画像"></TD><TD>サンプル画像１</TD></TR> </TABLE> サンプルソースの説明 ここで新たに出てきたタグやエレメントがあります。<CAPTION>・CELLSPACING・CELLPADDINGの３つです。この３つの意味は以下に記入しておきますので、参考にしてください。 <CAPTION>は写真などの画像につけられる簡単な説明文です。<CAPTION>エレメントは、テーブルエレメントの中で、<TR>タグよりも前に必ず入れてください。 CELLSPACING="セルとセルの間にある枠線の太さをピクセル数で指定します。 CELLPADDING="セルと中身との間隔の距離をピクセル数で指定します。 |
ちょと複雑なテーブル
サンプルのソース <TABLE align="center" border="3" BGCOLOR="#6666CC" CELLSPACING="3" CELLPADDING="3"> <TR><TH COLSPAN="3">ちょと複雑なテーブルのサンプル</TH></TR> <TR><TH>画像</TH><TH>説明文章</TH><TD><BR></TD></TR> <TR><TD><img src="画像のurl" alt="サンプル画像"></TD><TD>サンプル画像１</TD><TD ROWSPAN="2">テキストや画像・・・etc</TR> <TR><TD><img src="画像のurl" alt="サンプル画像"></TD><TD>サンプル画像２</TD> </TABLE> サンプルソースの説明 最初のサンプルと比べると少し複雑なテーブル構成になりましたが、ソース自体はそんなに複雑になった訳ではありません。最初のサンプルに少しだけタグやエレメントを 追加しただけです。追加したタグやエレメントの説明は以下に書きたいと思います。 <TH>＝Table Header cellの略でテーブル内の見出しエレメントと考えてください。TDエレメントの代わりに、見出しのセルを作ります。 COLSPAN＝横方向にまたがる数を指定します。 ROWSPAN＝縦方向にまたがる数を指定します。 空白のセルを作る場合は、<TH></TH>もしくは<TD></TD>の間に<br>を入れれば空白のセルが出来ます。 | |||||||||||
| Welcome! to Web Window/wwwへ |
