這次帶給大家HTML的表格應該怎樣佈局,佈局HTML的表格注意事項有哪些,以下就是實戰案例,一起來看一下。
HTML 文件中的元素是一個接著一個排列的,只是簡單地在區塊級元素的前後加上拆行,是一種管線佈局。但是,我們所見到的Web 頁面按照一定的規則佈局排版的(通常是多列的),所以就要藉助一定的方法來實現這種佈局,通常的解決方案是:使用區塊元素
使用表格進行佈局,是較舊的佈局解決方案。並不建議使用,我們應該總是使用表格來顯示表格化的資料。
HTML 文件
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <!-- 链接到外部样式表 --> <link rel="stylesheet" href="css/mystyle.css"> <title>Island estaurant</title> </head> <body> <table id="container"> <!-- 头部 --> <tr> <td id="header" colspan="2"> <h1>点菜系统</h1> </td> </tr> <!-- 主体 --> <tr> <!-- 菜单 --> <td id="menu"> <b>菜品</b><br> <div id="dishes"> 小鸡炖蘑菇<br> 家常豆腐<br> 酸辣土豆丝<br> </div> </td> <!-- 内容 --> <td id="content"> 小鸡炖蘑菇:<br> 幼鸡一只 </td> </tr> <!-- 尾部 --> <tr> <td id="footer" colspan="2">世俗孤岛的餐厅</td> </tr> </table> </body> </html> CSS 文件 /*整个点餐系统的界面*/ #container { width: 600px; margin: 100px; /*取消单元格边框之间的边距*/ border-spacing: 0; } /*点餐系统界面的头部*/ #header { background-color: red; text-align: center; } h1 { margin-bottom: 0px; } /*点餐系统界面的菜单*/ #menu { background-color: #FFD700; height: 200px; width: 150px; } #dishes { padding-top: 10px; padding-left: 10px; line-height: 20px; } /*点餐系统界面的菜品详情*/ #content { background-color: gray; height: 200px; width: 450px; } /*点餐系统界面的尾部*/ #footer { background-color: blue; height: 25px; text-align: center; }
相信看了這些案例你已經掌握了方法,更多精彩請關注php中文網其它相關文章!
相關閱讀:
以上是HTML的表格應該如何佈局的詳細內容。更多資訊請關注PHP中文網其他相關文章!