Example of HTML table layout _ HTML/Xhtml _ webpage Creation

This article describes in detail a simple example of HTML table layout. HTML table layout is the basic knowledge in HTML getting started learning, interested friends can refer to the elements in the HTML document one by one, just simply adding lines before and after the block-level elements, is a kind of flow layout. However, the Web page we see is formatted according to certain rules (usually multiple columns), so we need to use some methods to achieve this layout. The general solution is: use block elements

Or table (

UseTable LayoutIs an old layout solution. It is not recommended. We should always use tables to display table-based data.

HTML document

Copy the content to the clipboard using CSS Code.

7. Island estaurant

) To layout the content of the Web page.

Ordering System
Dishes Chicken and mushroom stew Common bean curd Sweet and sour potato shreds	Chicken mushroom stew: A young chicken
Secular Restaurant

CSS file

Copy the content to the clipboard using CSS Code.

1. /* Interface of the entire ordering system */
2. # Container
3. {
4. Width: 600px;
5. Margin: 100px;
6. /* Cancel the margin between cell Borders */
7. Border-spacing: 0;
8. }
9. /* The head of the ordering system interface */
10. # Header
11. {
12. Background-color: red;
13. Text-align: center;
14. }
15. H1
16. {
17. Margin-bottom: 0px;
18. }
19. /* Menu on the ordering system interface */
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. /* Menu details on the ordering system interface */
33. # Content
34. {
35. Background-color: gray;
36. Height: 200px;
37. Width: pixel PX;
38. }
39. /* Tail of the ordering system interface */
40. # Footer
41. {
42. Background-color: blue;
43. Height: 25px;
44. Text-align: center;
45. }

:

The above is all the content of this article, hoping to help you learn.