CSS スタイルシート出現前後のサイト構造比較

CSSが出現する前は、テーブル・タグを使ってサイトの外枠を作っていました。
CSSの出現とともに、サイトの構築はよりシンプルになりました。

ごく簡単に 比較してみました。

尚、今でもテーブル・タグを使ったサイトは大活躍をしています。

<html>
<body>
<table border=1 width=400>
<tr><td colspan=2>Header</td></tr>
<tr><td colspan=2>Navigater</td></tr>
<tr height=200><td>sidebar</td><td>containar

  <table border=1 width=200>
  <tr><td colspan=2>Header</td></tr>
  <tr><td colspan=2>Navigater</td></tr>
  <tr height=200><td>sidebar</td><td>containar</td></tr>
  <tr><td colspan=2>Footer</td></tr>
  </table>

</td></tr>
<tr><td colspan=2>Footer</td></tr>
</table>
</body>
</html>

CSSを使用したサイト用HTML/CSS デター

<html>
<head>
<link rel="stylesheet" href="style-table.css" type="text/css" media="screen" />
</head>
<body>
<div id="wrapper">
   <div id="header">
      Header
   </div>
   <div id="navi">
      Navigater
   </div>
   <div id="sidebar">
      SideBar
   </div>
   <div id="containar">
      Containar
   </div>
   <div id="footer">
      footer
   </div>
</div>
</body>
</html>
body {
	background-color: #ffffff;
	text-align:center;
}
#wrapper {
	margin: 0 auto;
	padding: 0 0 0 0;
	width: 400px;
	border: solid 1px #000000;
	text-align:left;
}
#header {
	margin: 0 0 0 0;
	padding: 0 0 0 0;
	width: 400px;
	height: 100px;
	border: solid 1px #000000;
}
#navi {
	height: 20px;
	width: 400px;
	border: solid 1px #000000;
}
#sidebar {
	float: left;
	margin: 10px 0 0px 0;
	padding: 0 5px 20px 5px;
	width: 160px;
	height: 100px;
	border: solid 1px #000000;
}
#containar {
	float:right;
	margin: 10px 0 0 0;
	padding: 0 10px 20px 10px;
	width: 200px;
	height: 100px;
	border: solid 1px #000000;
}
#footer {
	clear:all;
	margin: 0px 0 0px 0;
	padding: 0 0 0px 0;
	width: 400px;
	border: solid 1px #000000;
}

注: 表示画像では、clear:all;がfooterに無いため崩れを生じています。
   編集ごに気付きました。 ここで訂正させていただきます。

コメントを残す

*