今回は前回より格段に理解しづらいと思われます、<table>タグについて学んでいきます。

途中で同じ様な事が沢山でてき、こんがらがってしまうかもしれませんが、1つづ分かりやすく説明して行きますので頑張っていきましょう！

まずはここで学ぶ事になる大本、 <table>タグについて説明致します。

TABLEとは複数の囲いの集合体を作成するタグです。
例で言うと、excelの表の様な物をタグによって生成するのです。

<table border="1" bgcolor="#FFCCFF" width="500">
<tr><th colspan="2" bgcolor="#FFFFCC"><h2><font color="#333333"><u>コンテンツ</u></font></h2></th></tr>
<tr><th><i><font size="+3"><a href="#">Profile</a></font></i></th><td>…自己紹介です</td></tr>
<tr><th><i><font size="+3"><a href="#">Diary</a></font></i></th><td>…普段の出来事を書いています</td></tr>
<tr><th><i><font size="+3"><a href="#">BBS</a></font></i></th><td>…書き込みしてくださいねー</td></tr>
</table>

上記のタグはたったの6行ですが、これをすらすらと書けるようになる事がtableをマスターする第一歩です。

そして、tableタグには様々な要素を書き込む事が出来ます。

border　…　表の枠線の太さ
width　…　表の横幅
height　…　表の縦幅
cellpadding　…　セルと内部の間の間隔
bgcolor　…　表の背景色
background　…　表の背景画像
align="center"　…　表を中央配置

他にも沢山ありますが、とりあえずこれだけ知っておけば簡単な表は作成できます。
更なる発展した表を作成したい場合は、リファレンスの方をご覧ください。

次は横の列を生成するタグ、<tr>について説明致します。

<tr>は<table></table>の間に記述する事により、テーブルの横一列のセルを全て纏める部分です。
<tr>にも色々な要素を追加する事が可能ですが、基本は次に紹介する<td>に指定する事が推奨されているためこちらでは説明致しません。

こちらでは、表のセルを作成する<td>について説明いたします。

border　…　セルの枠線の太さ
width　…　セルの横幅
height　…　セルの縦幅
bgcolor　…　セルの背景色
background　…　セルの背景画像
align="***"　…　セル内のコンテンツ横位置配置(left・center・right)
valign="***"　…　セル内のコンテンツ縦位置配置(top・middle・bottom)

そして次がとてもややこしいところです。
ここではサンプルを参考にしながら説明致します。

rowspan="縦方向の連結セル数"　…　縦方向のセルの連結
colspan="縦方向の連結セル数"　…　横方向のセル連結

恐らくなんじゃこりゃ、と思われると思います。
ではサンプルを参考に説明していきます。

<table border="1" >
　<tr>
　　 <td>1つ目</td>
　　 <td>2つ目</td>
　</tr>
　<tr>
　　 <td>3つ目</td>
　　 <td>4つ目</td>
　</tr>
</table>

これを表示させると

1つ目	2つ目
3つ目	4つ目

この様に表示されます。

では、1つ目と2つ目を連結してみます。

<table border="1" >
　<tr>
　　 <td colspan="2" >1つ目2つ目</td>
　</tr>
　<tr>
　　 <td>3つ目</td>
　　 <td>4つ目</td>
　</tr>
</table>

1つ目2つ目
3つ目	4つ目

分かりましたでしょうか。
上記でセル1つ減らし、<td colspan="2">と指定し、下部の2つに対して上部の1つのセルを連結させたのです。

では次に1つ目と3つ目を連結してみます。

<table border="1" >
　 <tr>
　　 <td rowspan="2" >1つ目<br>3つ目</td>
　　 <td>2つ目</td>
　 </tr>
　 <tr>
　　 <td>4つ目</td>
　 </tr>
</table>

1つ目 3つ目	2つ目
	4つ目

今度は先ほどと違い、縦方向での連結を行いました。
3つ目のセルを削除し、1つ目のセルに<td rowspan="2">と指定し、左側のセル1つに対し右側のセル2つを連結させたのです。

ここまでサンプルつきで説明いたしましたがご理解いただけたでしょうか？
恐らくあまり理解いただけていないと思います。
私もそうでした。
ですが、何度も<table>をいじって行く事により、感覚的に理解する事が出来てくると思います。
更に入り組んだテーブルだと更に難しくなりますが、それを解こうと頑張る事が更なるSTEPUPに繋がるので諦めず頑張ってみてください。

ここで説明する<th>は<td>がただのデータセルを生成するだけに対して、<th>は見出しとして使用する事に使われるタグです。
<th>で囲ったセルに文書等を配置すると、文字が太字になり中央寄せされます。

以上でテーブルについての説明は終わります。
難しい内容で辛かったと思いますがよくここまで辿りついてくれました。

ここから2つばかり前ページで説明できなかったものを補足説明致します。

まずは斜めに文字を傾ける、<i>タグ。

次は文字に下線を表示させる<u>タグ。

リンク色と同じ文字にこのタグを使うと、リンクしているものだと勘違いしてしまう事があるので使用するのには気をつけてください。

そして最後に<s>タグ。

文字に取り消し線を付与します。
日記等に使えるかも。

このページではテーブルをメインに記述しましたがいかがでしたでしょうか。

テーブルが出来るかどうかで初心者のままで終わってしまうか、それとも更なる発展をとげるかの分かれ目だと私は思っているのでここで踏ん張って欲しいと思っています。

次ページでは初級講座のまとめとして、サンプルページを作成してみようと思います。