DIV CSS 佈局教程網

設為首頁 加入收藏
 DIV+CSS佈局教程網 >> 網頁腳本 >> HTML基礎知識 >> HTML和Xhtml >> HTML表格布局實例講解
HTML表格布局實例講解
編輯：HTML和Xhtml     

HTML 文檔中的元素是一個接著一個排列的，只是簡單地在在塊級元素的前後加上拆行，是一種流水布局。但是，我們所見到的 Web 頁面按照一定的規則布局排版的（通常是多列的），所以就要借助一定的方法來實現這種布局，通常的解決方案是：使用區塊元素 <div> 或 表格（<table>）來布局 Web 頁面的內容。

使用表格進行布局，是一種較老的布局解決方案。並不推薦使用，我們應該總是使用表格來顯示表格化的數據。

HTML 文檔

CSS Code復制內容到剪貼板
  1. <!DOCTYPE html>   
  2. <html lang="en">   
  3. <head>   
  4.     <meta charset="UTF-8">   
  5.     <!-- 鏈接到外部樣式表 -->   
  6.     <link rel="stylesheet" href="css/mystyle.css">   
  7.     <title>Island estaurant</title>   
  8. </head>   
  9. <body>   
  10.     <table id="container">   
  11.         <!-- 頭部 -->   
  12.         <tr>   
  13.             <td id="header" colspan="2">   
  14.                 <h1>點菜系統</h1>   
  15.             </td>   
  16.         </tr>   
  17.         <!-- 主體 -->   
  18.         <tr>   
  19.             <!-- 菜單 -->   
  20.             <td id="menu">   
  21.                 <b>菜品</b><br>   
  22.                 <div id="dishes">   
  23.                     小雞炖蘑菇<br>   
  24.                     家常豆腐<br>   
  25.                     酸辣土豆絲<br>   
  26.                 </div>   
  27.             </td>   
  28.             <!-- 內容 -->   
  29.             <td id="content">   
  30.                 小雞炖蘑菇：<br>   
  31.                 幼雞一只   
  32.             </td>   
  33.         </tr>   
  34.         <!-- 尾部 -->   
  35.         <tr>   
  36.             <td id="footer" colspan="2">世俗孤島的餐廳</td>   
  37.         </tr>   
  38.     </table>   
  39. </body>   
  40. </html>   
  41.   

CSS 文件

CSS Code復制內容到剪貼板
  1. /*整個點餐系統的界面*/  
  2. #container   
  3. {   
  4.     width: 600px;   
  5.     margin: 100px;   
  6.     /*取消單元格邊框之間的邊距*/  
  7.     border-spacing: 0;   
  8. }   
  9. /*點餐系統界面的頭部*/  
  10. #header  
  11. {   
  12.     background-color: red;   
  13.     text-align: center;   
  14. }   
  15. h1   
  16. {   
  17.     margin-bottom: 0px;   
  18. }   
  19. /*點餐系統界面的菜單*/  
  20. #menu  
  21. {   
  22.     background-color: #FFD700;   
  23.     height: 200px;   
  24.     width: 150px;   
  25. }   
  26. #dishes  
  27. {   
  28.     padding-top: 10px;   
  29.     padding-left: 10px;   
  30.     line-height: 20px;   
  31. }   
  32. /*點餐系統界面的菜品詳情*/  
  33. #content   
  34. {   
  35.     background-color: gray;   
  36.     height: 200px;   
  37.     width: 450px;   
  38. }   
  39. /*點餐系統界面的尾部*/  
  40. #footer  
  41. {   
  42.     background-color: blue;   
  43.     height: 25px;   
  44.     text-align: center;   
  45. }  

效果圖：

以上就是本文的全部內容，希望對大家的學習有所幫助。

HTML和Xhtml
W3C教程(8):W3C XML Schema 活動
XML Schema 是基於 XML 的 D
ANSI，Unicode，UTF-8網頁編碼的區別
網頁制作poluoluo文章簡介：ANSI，Unicode，UTF-8網頁編碼的區別.
如何在textarea文本輸入區內實現換行
在textarea文本輸入區內想要換行，輸入<br/>顯示<br/>，輸入w

相關文章

HTML入門知識HTML5教程關於HTMLHTML和XhtmlHTML5特效代碼HTML5詳解
小編推薦
初學者接觸HTML了解一些HTML標記(3) HTML表格標記教程(45):表格的表主體標記 經驗分享:關於網頁布局排版的流程問題 html表單屬性readonly和disabled的使用方法 超級鏈接標記A的TARGET屬性詳解 HTML small標記使用技巧 HTML元素的ID和Name屬性的區別 移動端HTML5實現文件上傳 HTML表格標記教程(24):行的水平對齊屬性ALIGN ul和li 基本用法分析
熱門推薦
HTML iframe 用法總結收藏 表單checkbox和radio文字對齊的代碼 XHTML中的常用標簽整理 兼容性的 inline-block 屬性 使用相對寬度調整表格問題 網頁制作學習:用HTML5.0制作網頁 如何減少網頁的內存使用與CPU占用 為什麼使用DOCTYPE HTML html 塊級標簽與內聯標簽的區別
大家都在看
jQuery獲取動態生成的元素示例 我的第一個css3 動畫代碼 Javascript刷新窗口方法小結 jQuery中clearQueue()方法用法實例教程 HTML的checkbox和radio樣式美化的簡單實例 用JQuery在網頁中實現分隔條功能的代碼 Java代碼生成圖片驗證碼實現 jQuery 仿百度輸入標簽插件附效果圖
XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved