--tableページレイアウトレイアウト

次のように私たちは、シンプルなウェブサイトのレイアウトを行います。

1  <！DOCTYPE HTML > 
2  < HTML のlang = "EN" > 
3  < ヘッド> 
4      < メタのcharset = "UTF-8" > 
5      < タイトル>表のレイアウト</ タイトル> 
6      < スタイル> 
。7          表{ 
8                  BORDER-崩壊：崩壊;     / * テーブルフレームマージする*を/ 
9              } 
10  
。11      </ スタイル> 
12であります </ ヘッド> 
13  < 本体> 
14      < 表ALIGN = "中心" 幅= "500" 高さ= "400" ボーダー= 1 はBorderColor = "＃1 00ff99" CELLSPACING = "1" cellspadding = "1" > 
15          < キャプション>这是キャプション标签添加的表名</ 字幕> 
16          < THEAD > 
17              < TR > < TD COLSPAN = "3"ALIGN =左= "センター" >サイトのタイトル</TD > </ TR > 
18          </ THEAD > 
19          < TBODY > 
20              < TR > 
21                  < TDの幅= "30％" 、高さ= "25" >网站标题</ TD > 
22                  < TD COLSPAN = "2" 整列= "右" >搜索框</ TD > 
23              </ TR > 
24              < TR > 
25                  <TDの幅= "30％" >左</ TD > 
26である                  < TDの幅= "40％" >中間体</ TD > 
27                   < TD >右</ TD > 
28              </ TR > 
29          </ TBODY > 
30          < TFOOT > 
31である             、< TR > 
32                  < TD COLSPAN =」3" ALIGN =左= "センター"  >サイト情報底</ TD > 
33である             </ TR >
34          </TFOOT > 
35  </ テーブル> 
36  </ ボディ> 
37  </ HTML >

出力：

これは、フォーム全体で、3にまたがり、それぞれ最新のHTML5セマンティクス、第一及び第四行を使用して、制限するために、ここではcolspan =「3」、2行目「検索ボックス」は、2つの取りCOLSPAN =「2」の制御と列の位置、; =「中心」位置合わせは、テキストの形式上のアライメント制約で、中央、右、右、左左を表し、中央を表します。