複雑な表製作

「少し高度な表作成」で作成した表よりも、より複雑な表製作に挑戦してみましょう。

デザインに凝ったWeb ページを作成するためには、覚えておく必要があります。

【注意】
「HTML」の規格を策定している World Wide Web Consortium（W3C）によると、「HTML5」では、HTML4.01にあった次の属性が廃止されました。


要素
HTML5で廃止された属性                                                  
table
align/bgcolor/border/cellpadding/cellspacing/frame/rules/summary/width  
tr   
align/bgcolor/char/charoff/valign                                       
td   
abbr/align/axis/bgcolor/char/charoff/headers/height/nowrap/valign/width 


テーブルの枠線や背景色の指定などの装飾はすべてスタイルシートで行ってください。 

複雑な表製作

サンプルは次のような形になっています。

次のHTML文書から表の構成を頭に想像してみましょう。
ファイル名：table3.html

<html>
<head>
<title>複雑な表</title>
</head>
<body>

<table bgcolor="indigo" border="3" width="90%" cellspacing="6">
 <tr>
   <td rowspan="2" colspan="1" bgcolor="blue" align="center"
       width="30%">
   <font color="white"><strong>BLUE(1)</strong></font>
   </td>
   <td rowspan="1" colspan="2" bgcolor="green" align="left"
       width="60%">
   <font color="white"><strong>GREEN(2)</strong></font>
   </td>
 </tr>

 <tr>
   <td rowspan="2" colspan="1" bgcolor="white" align="center"
       width="30%">
   <font color="black"><strong>WHITE(3)</strong></font>
   </td>
   <td rowspan="1" colspan="1" bgcolor="pink" align="left"
       width="30%">
   <font color="black"><strong>PINK(4)</strong></font>
   </td>
 </tr>

 <tr>
   <td rowspan="1" colspan="1" bgcolor="orange" align="right"
       width="30%">
   <font color="black"><strong>ORANGE(5)</strong></font>
   </td>
   <td rowspan="2" colspan="1" bgcolor="red" align="right"
       width="30%">
   <font color="black"><strong>RED(6)</strong></font>
   </td>
 </tr>

 <tr>
   <td rowspan="1" colspan="2" bgcolor="yellow" align="left"
       width="60%">
   <font color="black"><strong>YELLOW(7)</strong></font>
   </td>
 </tr>

 <tr>
   <td colspan="3" bgcolor="#ffffcc" align="center"
       width="90%">
   <font color="black"><strong>#FFFFCC(8)</strong></font>
   </td>
 </tr>
</table>

</body>
</html>

各セルを、どのタイミングで記述したらよいのか、よく分からないと思います。

記述の仕方として、まず「横『 3 』縦『 5 』の表」の形をしていると考えます。

図下のように、左のセルから順に記述しておき、「セルをまたぐ」ときに、行か列の場合に対し「rowspan」「colspan」を指定します。

各「 table 」「 tr 」「 td 」要素では、「width="○○"」「height="○○"」を利用して、幅・高さを指定することができます。

「高さ」や「横幅」を記述してやることで「表示の誤りを防ぐ」「表示速度を上げる」などの利点となります。

表はブラウザへの負荷が大きく、表示速度が遅くなりがちです。詳しくは「軽いサイトの作り方」を参照してください。

オススメ書籍

HTML5、CSS3、JavaScript等の学習に役立つ書籍を紹介します。

ページのトップへ戻る