HTML 文檔中的元素是一個(gè)接著一個(gè)排列的，只是簡(jiǎn)單地在在塊級(jí)元素的前后加上拆行，是一種流水布局。但是，我們所見到的 Web 頁面按照一定的規(guī)則布局排版的（通常是多列的），所以就要借助一定的方法來實(shí)現(xiàn)這種布局，通常的解決方案是：使用區(qū)塊元素 <div> 或 表格（<table>）來布局 Web 頁面的內(nèi)容。
使用表格進(jìn)行布局，是一種較老的布局解決方案。并不推薦使用，我們應(yīng)該總是使用表格來顯示表格化的數(shù)據(jù)。
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>點(diǎn)菜系統(tǒng)</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. <!-- 內(nèi)容 -->
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./*整個(gè)點(diǎn)餐系統(tǒng)的界面*/
2.#container
3.{
4. width: 600px;
5. margin: 100px;
6. /*取消單元格邊框之間的邊距*/
7. border-spacing: 0;
8.}
9./*點(diǎn)餐系統(tǒng)界面的頭部*/
10.#header
11.{
12. background-color: red;
13. text-align: center;
14.}
15.h1
16.{
17. margin-bottom: 0px;
18.}
19./*點(diǎn)餐系統(tǒng)界面的菜單*/
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./*點(diǎn)餐系統(tǒng)界面的菜品詳情*/
33.#content
34.{
35. background-color: gray;
36. height: 200px;
37. width: 450px;
38.}
39./*點(diǎn)餐系統(tǒng)界面的尾部*/
40.#footer
41.{
42. background-color: blue;
43. height: 25px;
44. text-align: center;
45.}