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.}
公众号
事业单位
当前位置：
公考类
招聘类
各类考试
