--Table page layout layout

We make a simple website layout, as follows:

. 1  <! DOCTYPE HTML > 
2  < HTML lang = "EN" > 
. 3  < head > 
. 4      < Meta charset = "UTF-. 8" > 
. 5      < title > Table Layout </ title > 
. 6      < style > 
. 7          Table { 
. 8                  border- Collapse : Collapse ;     / * for merging table frame * / 
. 9              } 
10  
. 11      </ style > 
12 is </head>
13 <body>
14     <table align="center" width="500" height="400" border=1 bordercolor="#00ff99" cellspacing="1" cellspadding= "1">
15         <caption>这是caption标签添加的表名</caption>
16         <thead>
17             <tr><td colspan="3"</Site Title>= "Center"align = lefttd></tr>
18         </thead>
19         <tbody>
20             <tr>
21                 <td width="30%" height="25">网站标题</td>
22                 <td colspan="2" align="right">搜索框</td>
23             </tr>
24             <tr>
25                 <left>= "30%"widthTD</ TD > 
26 is                   < TD width = "40%" > intermediate </ TD > 
27                   < TD > to the right </ TD > 
28              </ TR > 
29          </ tbody > 
30          < tfoot > 
31 is              < TR > 
32                  < TD colspan = ". 3" align = left = "Center"  > site information bottom </ TD > 
33 is              </ TR >
34          </tfoot>
35 </table>
36 </body>
37 </html>

Output:

This is a whole form, using the latest HTML5 semantics, the first and fourth rows respectively span the three, here colspan = "3" to limit, and the second line "search box" takes up two position of the column, with colspan = "2" control; align = "center" is the alignment restrictions on the form of text, center represents the middle, right represents the right, left left.

--Table page layout layout

Guess you like