テーブルレイアウトとスタイルシートレイアウトのタグ記述量比較

Loading

スポンサードリンク

テーブルレイアウトとスタイルシートレイアウトでの(X)HTMLのタグの記述量比較です。条件は下記の通りです。

テーブルレイアウト

  • レイアウトはシンプルな左サイドバータイプです。
  • テーブルレイアウトのサンプルは、某テンプレート配布サイトよりダウンロードさせて頂きました。
  • サンプルソースでは、本文内の情報は掲載していません。タグの記述量という点で、サイドバーのメニュー部分はソースを載せています。
  • メニュー部分は、javascriptを使用したロールオーバー指定。

スタイルシートレイアウト

  • XHTMLソースは、当サイトで配布しているものを利用しました。
  • デザイン指定は外部CSSをリンクしています。
  • サンプルソースでは、本文内の情報は掲載していません。タグの記述量という点で、サイドバーのメニュー部分はソースを載せています。
  • メニュー部分は、スタイルシートを使用したロールオーバー指定。

テーブルレイアウトについては、ホームページビルダーなどで「初めてホームページを作成する」という点を考慮して、極力「初心者の方が作成するであろう指定」で作成してみました。(なんだかテーブルでデザインするのも何年ぶりなので、少し自信がありません。)


今回のポイント

初級ホームページ作成講座-ホームページの構造-テーブルレアイアウトについて-テーブルレアイアウトのデメリットにて

  1. 本来テーブル（表）はレイアウトを組むものではない
  2. アクセシビリティ上はあまりおすすめ出来ない
  3. 構造が複雑化すると手に負えない
  4. 構造が複雑化するとHTMLの容量が大きくなる
  5. 構造が複雑化すると表示に時間がかかる

と解説しました。3,4,5について順にサンプルソースをみてみます。

構造が複雑化すると手に負えない

下記サンプルソースをみて「ヘッダー部分」「コンテンツ部分」と「サイドバー部分」「フッター部分」などの区切り、つまり、どこからどこまでが該当箇所なのかお解かりになるでしょうか。

tableタグの入れ子状態なので、製作者本人でも該当箇所を探すのは一苦労ではないでしょうか。今回は本文部分を掲載していませんが、もし本文部分もさらにtableで入力されていたらどうでしょう。これではいくらインデント処理やコメントタグを使用しても非常に複雑なファイルになってしまいます。

構造が複雑化するとHTMLの容量が大きくなる

これは下記ソースをみてもらえれば一目両全です。下記ソースは<body></body>内だけを記述してあります。

テーブルレイアウトの場合、いかに無駄なタグが多いかお解かり頂けるのではないでしょうか。

構造が複雑化すると表示に時間がかかる

今回拝借させてもらったテンプレートは、全体をテーブルで囲っています。(縦:3横:2のセルをヘッダー部分とフッター分は結合しています)

tableタグは「タグ内の情報が全て読み込まれてから表示が始まる」という特性をもっています。

今回サンプルでは商品データをあまり載せなかったので、表示速度はさほど遅くはないのですが、いくらブロードバンド時代でもネットショップなどで商品画像が多いものなど(サーバとの絡みもありますが)あまりお薦めは出来ません。

テーブルレイアウトのHTMLソース

テーブルレイアウトサンプル表示

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<meta http-equiv="Content-Style-Type" content="text/css">
<title>******</title>
</head>
<body>
<center>
<table border="0" cellspacing="0" cellpadding="0" width="800">
<tr>
<td height="200" background="image/bg-header.jpg" valign="top" align="right">******</td>
</tr>
<tr>
<!-- globalnavi -->
<td>
<a href="#"><img src="***.jpg" width="" height="" border="0"
 onmouseover="this .src='***.jpg'" onmouseout="this .src='***.jpg'"></a> --- 実際は改行していません
<a href="#"><img src="***.jpg" width="" height="" border="0"
 onmouseover="this .src='***.jpg'" onmouseout="this .src='***.jpg'"></a> --- 実際は改行していません
<a href="#"><img src="***.jpg" width="" height="" border="0"
 onmouseover="this .src='***.jpg'" onmouseout="this .src='***.jpg'"></a> --- 実際は改行していません
<a href="#"><img src="***.jpg" width="" height="" border="0"
 onmouseover="this .src='***.jpg'" onmouseout="this .src='***.jpg'"></a> --- 実際は改行していません
<a href="#"><img src="***.jpg" width="" height="" border="0"
 onmouseover="this .src='***.jpg'" onmouseout="this .src='***.jpg'"></a> --- 実際は改行していません
<a href="#"><img src="***.jpg" width="" height="" border="0"
 onmouseover="this .src='***.jpg'" onmouseout="this .src='***.jpg'"></a> --- 実際は改行していません
</td>
<!-- // globalnavi -->
</tr>
</table>
<br>
<table border="0" width="800" cellpadding="0" cellspacing="0">
<tr>
<!-- sidebar -->
<td valign="top" align="left" width="200">
<!-- menu -->
<table border="0" cellspacing="0" cellpadding="0" width="180">
<tr><th valign="middle" align="center" background="***.jpg" height="30">category</th></tr>
<tr><td valign="middle" height="30"><a href="#">*** リンクページ ***</a></td></tr>
<tr><td valign="middle" height="30"><a href="#">*** リンクページ ***</a></td></tr>
<tr><td valign="middle" height="30"><a href="#">*** リンクページ ***</a></td></tr>
<tr><td valign="middle" height="30"><a href="#">*** リンクページ ***</a></td></tr>
<tr><td valign="middle" height="30"><a href="#">*** リンクページ ***</a></td></tr>
<tr><td valign="middle" height="30"><a href="#">*** リンクページ ***</a></td></tr>
<tr><td valign="middle" height="30"><a href="#">*** リンクページ ***</a></td></tr>
<tr><td valign="middle" height="30"><a href="#">*** リンクページ ***</a></td></tr>
<tr><td valign="middle" height="30"><a href="#">*** リンクページ ***</a></td></tr>
<tr><td valign="middle" height="30"><a href="#">*** リンクページ ***</a></td></tr>
</table>
<!-- // menu -->
<br>
<!-- menu -->
<table border="0" cellspacing="0" cellpadding="0" width="180">
<tr><th valign="middle" align="center" background="***.jpg" height="30">category</th></tr>
<tr><td valign="middle" height="30"><a href="#">*** リンクページ ***</a></td></tr>
<tr><td valign="middle" height="30"><a href="#">*** リンクページ ***</a></td></tr>
<tr><td valign="middle" height="30"><a href="#">*** リンクページ ***</a></td></tr>
<tr><td valign="middle" height="30"><a href="#">*** リンクページ ***</a></td></tr>
<tr><td valign="middle" height="30"><a href="#">*** リンクページ ***</a></td></tr>
<tr><td valign="middle" height="30"><a href="#">*** リンクページ ***</a></td></tr>
<tr><td valign="middle" height="30"><a href="#">*** リンクページ ***</a></td></tr>
<tr><td valign="middle" height="30"><a href="#">*** リンクページ ***</a></td></tr>
<tr><td valign="middle" height="30"><a href="#">*** リンクページ ***</a></td></tr>
<tr><td valign="middle" height="30"><a href="#">*** リンクページ ***</a></td></tr>
</table>
<!-- // menu -->
<br>
<!-- banner -->
<table border="0" cellpadding="0" cellspacing="0">
<tr><td valign="top" height="250"><img src="***.jpg" width="" height="" border="0"></td></tr>
<tr><td valign="top" height="65"><img src="***.jpg" width="" height="" border="0"></td></tr>
<tr><td valign="top" height="65"><img src="***.jpg" width="" height="" border="0"></td></tr>
<tr><td valign="top" height="65"><img src="***.jpg" width="" height="" border="0"></td></tr>
<tr><td valign="top" height="65"><img src="***.jpg" width="" height="" border="0"></td></tr>
<tr><td valign="top" height="65"><img src="***.jpg" width="" height="" border="0"></td></tr>
</table>
<!-- // banner -->
<br>
</td>
<!-- // sidebar -->
<!-- contents -->
<td valign="top" align="left" width="600">
<!-- banner -->
<table border="0" cellspacing="0" cellpadding="0">
<tr><td height="110"><a href="#"><img src="***.jpg" width="" height="" border="0"></a></td></tr>
<tr><td height="110"><a href="#"><img src="***.jpg" width="" height="" border="0"></a></td></tr>
<tr><td height="110"><a href="#"><img src="***.jpg" width="" height="" border="0"></a></td></tr>
</table>
<!-- // banner -->
<br>
<!-- // banner -->
<table border="0" cellspacing="0" cellpadding="0">
<tr>
<td valign="top" align="left" width="160"><img src="***.jpg" width="" height="" border="0"></td>
<td>サンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプル。</td>
</tr>
<tr>
<td valign="top" align="left" width="160"><img src="***.jpg" width="" height="" border="0"></td>
<td>サンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプル。</td>
</tr>
<tr>
<td valign="top" align="left" width="160"><img src="***.jpg" width="" height="" border="0"></td>
<td>サンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプル。</td>
</tr>
<tr>
<td valign="top" align="left" width="160"><img src="***.jpg" width="" height="" border="0"></td>
<td>サンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプル。</td>
</tr>
<tr>
<td valign="top" align="left" width="160"><img src="***.jpg" width="" height="" border="0"></td>
<td>サンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプル。</td>
</tr>
</table>
</td>
<!-- // contents -->
</tr>
</table>
<br>
<table border="0" width="800" height="40" bgcolor="#0080c0">
<tr><td valign="middle" align="center">Copyright &copy; CSS SHOP. All Rights Reserved.</td></tr>
</table>
</center>
</body>
</html>

純粋なレイアウト部分のみのソース

テーブルレイアウト
<table border="0" cellspacing="0" cellpadding="0" width="760">
<tr>
<td colspan="2" width="100%" height="180" valign="top" id="xxx">
***** ヘッダーエリア *****
</td>
</tr>
<tr>
<td width="200" align="center" valign="top">
***** サイドバーエリア *****
</td>
<td width="560" valign="top">
***** コンテンツエリア*****
</td>
</tr>
<tr>
<td colspan="2">
***** フッターエリア*****
</td>
</tr>
</table>
テーブルレイアウト
<div id="wrapper">
<div id="header">
***** ヘッダーエリア *****
</div>
<div id="container">
<div id="contents">
***** コンテンツエリア *****
</div>
<div id="sidebar">
***** サイドバーエリア *****
</div>
<div id="footer">
***** フッターエリア *****
</div>
</div>
</div>
テーブルレイアウト
<table border="0" cellspacing="0" cellpadding="0" width="760">
<tr>
<td colspan="2" width="100%" height="180" valign="top" id="xxx">
***** ヘッダーエリア *****
</td>
</tr>
<tr>
<td width="200" align="center" valign="top">
***** サイドバーエリア *****
</td>
<td width="560" valign="top">
***** コンテンツエリア*****
</td>
</tr>
<tr>
<td colspan="2">
***** フッターエリア*****
</td>
</tr>
</table>
スタイルシートレイアウト
<div id="wrapper">
<div id="header">
***** ヘッダーエリア *****
</div>
<div id="container">
<div id="contents">
***** コンテンツエリア *****
</div>
<div id="sidebar">
***** サイドバーエリア *****
</div>
<div id="footer">
***** フッターエリア *****
</div>
</div>
</div>

スポンサードリンク