Html Layouts
0 likes278 views
该文档讨论了使用 HTML 表格实现网页高级布局的方法。文档展示了一个复杂的嵌套表格示例，其中包含头部、左侧菜单、主内容和页脚。总体上，表格被广泛用于网页设计中，以便分隔和组织页面的不同部分。
Html Layouts
- 1.
- 2. Tables have beena popular method for achieving advanced layouts in HTML. Generally, this involves putting the whole web page inside a big table. This table has a different column or row for each main section.
- 3. <table id="shell" bgcolor="black"border="1" heigh="200" width="300"> <tr><td> <table id="inner" bgcolor="white" heigh="100" width="100"> <tr><td>Tables inside tables!</td></tr> </table> </td></tr></table>
- 4. <table width="400px" border="0"><tr> <td colspan="2" style="background-color:yellow;"> Header </td> </tr> <tr> <td style="background-color:orange;width:100px;text-align:top;"> Left menu<br /> Item 1<br /> Item 2<br /> Item 3... </td> <td style="background-color:#eeeeee;height:200px;width:300px;text-align:top;"> Main body </td> </tr> <tr> <td colspan="2" style="background-color:yellow;"> Footer </td> </tr> </table>
- 5. <table id="shell" title="Shell"height="250" width="400" border="0" bgcolor="black" cellspacing="1" cellpadding="0"> <tr height="50"><td bgcolor="white"> <table title="banner" id="banner"> <tr><td>Banner goes here</td></tr> </table> </td></tr> <tr height="25"><td bgcolor="white"> <table title="Navigation" id="navigation"> <tr><td>Links!</td> <td>Links!</td> <td>Links!</td></tr> </table> </td></tr> <tr><td bgcolor="white"> <table title="Content" id="content"> <tr><td>Content goes here</td></tr> </table> </td></tr></table>