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

How to dynamically modify container port mapping in Docker

Preface: Docker port mapping is often done by map...

Detailed explanation of MySQL sql99 syntax inner join and non-equivalent join

#Case: Query employee salary levels SELECT salary...

Implementation of CSS3 3D cool cube transformation animation

I love coding, it makes me happy! Hello everyone,...

Using radial gradient in CSS to achieve card effect

A few days ago, a colleague received a points mal...

In-depth understanding of Vue's method of generating QR codes using vue-qr

Table of contents npm download step (1) Import (2...

Detailed explanation of the simple use of MySQL query cache

Table of contents 1. Implementation process of qu...

Use MySQL to open/modify port 3306 and open access permissions in Ubuntu/Linux environment

Operating system: Ubuntu 17.04 64-bit MySQL versi...

How to implement digital paging effect code and steps in CSS

A considerable number of websites use digital pagi...

Handtrack.js library for real-time monitoring of hand movements (recommended)

【Introduction】: Handtrack.js is a prototype libra...

Vue multi-page configuration details

Table of contents 1. The difference between multi...

Summary of common Linux distribution mirror source configuration

I have been researching Linux recently and tried ...

Installation method of mysql-8.0.17-winx64 under windows 10

1. Download from the official website and unzip h...

Detailed description of nginx from compilation and installation to configuration file description in Chinese

This article introduces Nginx from compilation an...

CSS3 realizes the website product display effect diagram

This article introduces the effect of website pro...

How to install and use Server-U 14 version

Introducing Server-U software Server-U is a very ...