HTML table layout example explanation

HTML table layout example explanation

The elements in an HTML document are arranged one after another, with line breaks simply added before and after block-level elements, creating a streamlined layout. However, the web pages we see are laid out according to certain rules (usually multi-column), so we need to use certain methods to achieve this layout. The usual solution is to use block elements <div> or tables (<table>) to layout the content of the web page.

Using tables for layout is an older layout solution. It is not recommended, we should always use tables to display tabular data.

HTML Documentation

CSS CodeCopy content to clipboard
  1. <!DOCTYPE html>
  2. <html lang= "en" >
  3. <head>
  4. <meta charset= "UTF-8" >
  5. <!-- Link to external style sheet -->
  6. <link rel= "stylesheet" href= "css/mystyle.css" >
  7. <title>Island estaurant</title>
  8. </head>
  9. <body>
  10. <table id= "container" >
  11. <!-- Header -->
  12. <tr>
  13. <td id= "header" colspan= "2" >
  14. <h1>Ordering System</h1>
  15. </td>
  16. </tr>
  17. <!-- Main Body -->
  18. <tr>
  19. <!-- Menu -->
  20. <td id= "menu" >
  21. <b>Dishes</b><br>
  22. <div id= "dishes" >
  23. Chicken stew with mushrooms<br>
  24. Homemade tofu<br>
  25. Spicy and sour potato shreds<br>
  26. </div>
  27. </td>
  28. <!-- Contents -->
  29. <td id= "content" >
  30. Chicken stew with mushrooms:
  31. A young chicken
  32. </td>
  33. </tr>
  34. <!-- end -->
  35. <tr>
  36. <td id= "footer" colspan= "2" >Restaurant on a secular island</td>
  37. </tr>
  38. </table>
  39. </body>
  40. </html>
  41.   

CSS Files

CSS CodeCopy content to clipboard
  1. /*The 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. /*Header 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 of 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. /*Dish details in the ordering system interface*/   
  33. #content​
  34. {
  35.      background-color : gray ;
  36.      height : 200px ;
  37.      width : 450px ;
  38. }
  39. /*The end of the ordering system interface*/   
  40. #footer   
  41. {
  42.      background-color : blue ;
  43.      height : 25px ;
  44.      text-align : center ;
  45. }

Effect picture:

The above is the full content of this article. I hope it will be helpful for everyone’s study.

<<:  Analysis and summary of the impact of MySQL transactions on efficiency

>>:  Tic-Tac-toe game implemented in pure CSS3

Recommend

Example of converting spark rdd to dataframe and writing it into mysql

Dataframe is a new API introduced in Spark 1.3.0,...

CSS sample code to achieve circular gradient progress bar effect

Implementation ideas The outermost is a big circl...

Use of Linux dynamic link library

Compared with ordinary programs, dynamic link lib...

Detailed tutorial on building a private Git server on Linux

1. Server setup The remote repository is actually...

How to use nodejs to write a data table entity class generation tool for C#

Although Microsoft provides T4 templates, I find ...

How to install and deploy zabbix 5.0 for nginx

Table of contents Experimental environment Instal...

How to design a web page? How to create a web page?

When it comes to understanding web design, many p...

Detailed process of installing logstash in Docker

Edit docker-compose.yml and add the following con...

MySQL uses UNIQUE to implement non-duplicate data insertion

SQL UNIQUE constraint The UNIQUE constraint uniqu...

How to enable the slow query log function in MySQL

The MySQL slow query log is very useful for track...

Realize map aggregation and scattering effects based on vue+openlayer

Table of contents Preface: Result: 1. Polymerizat...

Solution to MySQL failure to start

Solution to MySQL failure to start MySQL cannot s...

Learn MySQL database in one hour (Zhang Guo)

Table of contents 1. Database Overview 1.1 Develo...

How to set process.env.NODE_ENV production environment mode

Before I start, let me emphasize that process.env...

How to view the creation time of files in Linux

1. Introduction Whether the creation time of a fi...