　TOP ＞　Back ＞ Place 　

ページのソース見本

◆ヘッダ部分

この、ページ全体は下記のテーブル要素ソース「◆本体部分２のコピー＆貼り付け」を利用した一例です。

◆フッタ部分

ソースでは、上の方に記述してますが必ず下に表示されます。

必ず、<THEAD><TFOOT><TBODY>の記載順は崩さないようにしてください。

◆本体部分１

テーブルを使用したレイアウトは、「HTMLの論理構造」に反しますが、このような作り方も出来ることも証明します。
この「ページのテーブル構造」よりも、良いとされるレイアウトはスタイルシートの「領域（ボックス・位置）」を使用することを推奨します。

▼　テーブルを使用したレイアウトの良い点と考慮

テーブルを使用したレイアウトを使用法、
１）ヘッダ部分<THEAD>には、<Ｈ１>の見出しや序文に使用します。
２）フッタ部分<TFOOT>には、<ADDRESS>やE-mailを書き込むようにます、
３）本体部分<TBODY>は、<TR>で段落の小分けができ、<TR>で列の小分けが出来るため細かい自由なレイアウトが可能になリます。

テーブルを使用する利点、
　何段かの行<TR>と横の区切りセルの<TD>列に別けて作ることで「削除・配置転換」などが、スムーズに行えるし、訂正も何段目の<TR>や<TD>で探すとスムーズに行えます。
ブロックレベルの<TABLE>に囲まれているので、気にせずインライン要素が使えます。

考慮する点、
１）Webブラウザの表示範囲を考えてテーブル全体の幅（WIDTH）を600～630px または、100%までに抑えます。
２）テーブルの線を（BORDER="0"）にし表示させないことです。
３）必ず、<THEAD><TFOOT><TBODY>の記載順は崩さないようにしてください。

後は、あなたのスタイルで内容を書き込んだり、画像やテーブルその他の部品をレイアウトするだけです。

◆本体部分２

さぁ！「コピー＆貼り付け」です。

**ページ全体用**
<!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" /> <meta http-equiv="Content-Style-Type" content="text/javascript" /> <meta name="robots" content="index,nofollow" /> <meta name="description" content="" /> <meta name="keywords" content="" /> <link rel="index" href="index.htm" /><!--Indexページとの関係--> <link rel="next" href=".htm" /><!--次のドキュメント--> <link rel="prev" href=".htm" /><!--前のドキュメント--> <title></title><!--ホームページのタイトル--> <style type="text/css">/＜head＞内に記述するスタイルシートここから/ <!--/要素（セレクタ）｛属性：値；｝をココに書き込みます。/ --> </style><!--スタイルシートここまで--> </head> <body>　　 <table border="0" width="100%"> <!--必ず、＜THEAD＞＜TFOOT＞＜TBODY＞の記載順は崩さないようにしてください。--> <thead><!--ページのヘッダ--> <tr> <td> <h1>ページの見出し</h1> </td> </tr> </thead><!--ページのヘッダ終わり--> <tfoot><!--ページのフッタ--> <tr> <td> <hr> 　【<a href=".htm">←BACK</a> ┃<a href=".htm">NEXT→</a>】 <hr> <div align="center"><address>あなたのアドレス</address></div> </td> </tr> </tfoot><!--ページのフッタ終わり--> <tbody><!--ページのボディ全体--> <tr><!--ページのボディ「一段目<TR>」--> <td> 　<div> <h2 style="color:#ff33ff">本体部分</h2> <p></p> </div> </td> </tr><!--ページのボディ「一段目<TR>」終わり--> <tr><!--ページのボディ「二段目<TR>」--> <td> <div> <h2 style="color:#ff33ff">本体部分２</h2> <p></p> <table border="1"> <tbody> <tr> <td></td> <td></td> </tr> </tbody> </table> </div> </td> </tr><!--ページのボディ「二段目<TR>」終わり--> <tr><!--ページのボディ「三段目<TR>」--> <td> <div> <h2 style="color:#ff33ff">本体部分３</h2> <p></p> </div> </td> </tr><!--ページのボディ「三段目<TR>」終わり--> </tbody><!--ページのボディ全体終わり--> </table> </body> </html>

◆本体部分３

お次は、５×５マスのテーブルとセル結合したバージョンです。

５×５マスのテーブル	セル結合したバージョン
<table border="1"> <tbody> <tr> <td></td> <td></td> <td></td> <td></td> <td></td> </tr> <tr> <td></td> <td></td> <td></td> <td></td> <td></td> </tr> <tr> <td></td> <td></td> <td></td> <td></td> <td></td> </tr> <tr> <td></td> <td></td> <td></td> <td></td> <td></td> </tr> <tr> <td></td> <td></td> <td></td> <td></td> <td></td> </tr> </tbody> </table>	<table border="1"> <tbody> <tr> <td></td> <td colspan="2"></td> <td colspan="2"></td> </tr> <tr> <td rowspan="2"></td> <td></td> <td></td> <td></td> <td></td> </tr> <tr> <td></td> <td></td> <td></td> <td></td> </tr> <tr> <td rowspan="2"></td> <td></td> <td></td> <td></td> <td></td> </tr> <tr> <td></td> <td></td> <td></td> <td></td> </tr> </tbody> </table>