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.
-
-
-
-
-
-
- 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.
- /* Interface of the entire ordering system */
- # Container
- {
- Width: 600px;
- Margin: 100px;
- /* Cancel the margin between cell Borders */
- Border-spacing: 0;
- }
- /* The head of the ordering system interface */
- # Header
- {
- Background-color: red;
- Text-align: center;
- }
- H1
- {
- Margin-bottom: 0px;
- }
- /* Menu on the ordering system interface */
- # Menu
- {
- Background-color: # FFD700;
- Height: 200px;
- Width: 150px;
- }
- # Dishes
- {
- Padding-top: 10px;
- Padding-left: 10px;
- Line-height: 20px;
- }
- /* Menu details on the ordering system interface */
- # Content
- {
- Background-color: gray;
- Height: 200px;
- Width: pixel PX;
- }
- /* Tail of the ordering system interface */
- # Footer
- {
- Background-color: blue;
- Height: 25px;
- Text-align: center;
- }
:
The above is all the content of this article, hoping to help you learn.