<table>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"
"http://www.w3.org/TR/html4/frameset.dtd">
<html>
<head>
<title>
Prueba
</title>
</head>
<frameset rows="56px, *, 50px" border="0" framespacing="0" frameborder="NO">
<frame class="header" src="header.html">
<frameset cols="450px, *" border="0" framespacing="0" frameborder="NO">
<frameset rows="*,150px" border="0" framespacing="0" frameborder="NO">
<frame class="frame1" scrolling="auto" src="search_results.html">
<frame class="frame2" scrolling="no" src="info.html">
</frameset>
<frame class="frame3" scrolling="no" src="map.html">
</frameset>
<frame class="footer" scrolling="no" src="footer.html">
</frameset>
</html>
</table>
そこには。
しかし、深刻です。レイアウトにテーブルを使用したくない場合。フレームも使用しないでください。
行く方法は、divを使用することです。または、新しい HTML5 要素。
HTML に追加されたいくつかの新しい要素は次のとおりです。
セクション要素
- セクション
- ナビ
- 論文
- わきに
- hgroup
- ヘッダ
- フッター
- 住所
要素のグループ化
レイアウトにテーブルを使用しない場合の利点:
- テーブルのレンダリングが遅くなる
- 流動的なデザインを使用すると、テーブルがうまく機能しません
- テーブルは、レイアウトに使用する正しいセマンティック要素ではありません
- テーブルは表形式のデータ用です
- ある時点でレイアウトを変更したい場合、テーブルはあまり柔軟ではありません
新しい HTML5 要素を使用する場合は、正しい doctype を設定する必要があることに注意してください。
<!DOCTYPE html>
また、「古い」ブラウザ (および IE) は新しい要素を認識していないことに注意してください。この問題を修正するには、この単純な JS スクリプトをドキュメントの先頭に追加します。
<script>
document.createElement('header');
document.createElement('nav');
document.createElement('section');
document.createElement('article');
document.createElement('aside');
document.createElement('footer');
document.createElement('time');
</script>
あなたが得るものは次のようなものです：
CSS
#body { width: 960px; }
aside { width: 450px; float: left; }
.content { margin-left: 450px; }
HTML
<div id="body">
<header>
<h1>Your header</h1>
</header>
<aside>
<p>Aside</p>
</aside>
<div class="content">
<h2>Title</h2>
<p>Some text</p>
</div>
<footer>
<p>Your footer</p>
</footer>
</div>
デモ
http://jsfiddle.net/ZGPAW/