いよいよtableの勉強も大詰めとなってまいりました！これまでの流れちゃんと理解できましたか？ここではtableを活用するにあたり一歩進んだ知識を身につけちゃいましょう。
今回紹介するのは<table>の中の<table>です。まずは下をごらんください

プロフィール　１ 名前 吉宗 特技 俵を投げること 嫌いなもの デカ太郎

う〜ん、なんだか見にくくなってしまいましたが、枠の中に枠が入っているのが分かるでしょうか？ぱっと見ただけではどんなソースになっているかサッパリですよね。しかし実はその仕組みは結構簡単で、 <td>〜</td>の中に<table>が入っているのです。つまり文字を枠で囲むのではなく、<table>を枠で囲んだだけなのです。

もしあなたが「ちょっとデザインに凝ったホームページを作りたい」と思っているならこのテクニックは絶対にマスターしなければなりません。慣れてくると<table>をただの表としてではなく、デザインするのに活用することができます。
参考までに上の表のソースを載せておきますね。赤い文字で書かれた部分が外側の枠、黒い文字が内側の枠を示しています。

<table border="1" width="500" height="200"> <tr> <td> <table border="1"> <tr> <td> 名前 </td> <td> 吉宗 </td> </tr> <tr> <td> 特技 </td> <td> 俵を投げること </td> </tr> <tr> <td> 嫌いなもの </td> <td> デカ太郎 </td> </tr> </table> </td> </tr> </table>

ソースで見ると「なんだこんな簡単だったのか」という感じですよね。しかしこれは本当に基本中の基本です。実際にホームページを作っていると、<table>の中に<table>。さらにその中に<table>なんてこともあります。正直、作っているうちに頭がヘンになりそうな場合もありますが、すべては「こだわり」の為。頑張りましょう♪
さて、次でいよいよtableの勉強は最後となりますが、ちょっと変わったtableの属性を紹介したいと思います。

次へ進む