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 print highlighted code in nodejs console

Preface When the code runs and an error occurs, w...

How to solve the problem that VMware virtual machine bridge mode cannot access the Internet

Step 1: Check the local Ethernet properties to se...

Detailed explanation of how to configure Nginx web server sample code

Overview Today we will mainly share how to config...

Mysql timeline data to obtain the first three data of the same day

Create table data CREATE TABLE `praise_info` ( `i...

How to quickly install RabbitMQ in Docker

1. Get the image #Specify the version that includ...

Implementation of Docker deployment of ElasticSearch and ElasticSearch-Head

This article mainly explains how to deploy Elasti...

Use Firebug tool to debug the page on iPad

How to debug a page on iPad? When using iOS 5, you...

How to use ssh tunnel to connect to mysql server

Preface In some cases, we only know the intranet ...

Use HTML to write a simple email template

Today, I want to write about a "low-tech&quo...

Detailed steps for configuring mysql8.0.20 with binlog2sql and simple backup and recovery

Table of contents First step installation Step 2:...

Solve the 1251 error when establishing a connection between mysql and navicat

I reinstalled the computer and installed the late...

A brief discussion on the understanding of TypeScript index signatures

Table of contents 1. What is an index signature? ...

Analysis of Mysql data migration methods and tools

This article mainly introduces the analysis of My...

Graphic tutorial on installing CentOS7 on VMware 15.5

1. Create a new virtual machine in VMware 15.5 1....

Some slightly more complex usage example codes in mysql

Preface I believe that the syntax of MySQL is not...