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

<!DOCTYPE html>
<html lang= "en" >
<head>
<meta charset= "UTF-8" >
<link rel= "stylesheet" href= "css/mystyle.css" >
<title>Island estaurant</title>
</head>
<body>
<table id= "container" >
<tr>
<td id= "header" colspan= "2" >
<h1>Ordering System</h1>
</td>
</tr>
<tr>
<td id= "menu" >
<b>Dishes</b><br>
<div id= "dishes" >
Chicken stew with mushrooms<br>
Homemade tofu<br>
Spicy and sour potato shreds<br>
</div>
</td>
<td id= "content" >
Chicken stew with mushrooms:
A young chicken
</td>
</tr>
<tr>
<td id= "footer" colspan= "2" >Restaurant on a secular island</td>
</tr>
</table>
</body>
</html>

CSS Files

CSS CodeCopy content to clipboard

/*The interface of the entire ordering system*/
#container
{
width : 600px ;
margin : 100px ;
/*Cancel the margin between cell borders*/
border-spacing : 0;
}
/*Header of the ordering system interface*/
#header
{
background-color : red ;
text-align : center ;
}
h1
{
margin-bottom : 0px ;
}
/*Menu of the ordering system interface*/
#menu
{
background-color : #FFD700 ;
height : 200px ;
width : 150px ;
}
#dishes
{
padding-top : 10px ;
padding-left : 10px ;
line-height : 20px ;
}
/*Dish details in the ordering system interface*/
#content
{
background-color : gray ;
height : 200px ;
width : 450px ;
}
/*The end of the ordering system interface*/
#footer
{
background-color : blue ;
height : 25px ;
text-align : center ;
}

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

The principles and defects of MySQL full-text indexing

HTML table layout example explanation

The principles and defects of MySQL full-text indexing

MySQL master-slave principle and configuration details

Detailed explanation of the steps of using ElementUI in actual projects

Multi-service image packaging operation of Dockerfile under supervisor

Use of select, distinct, and limit in MySQL

Lombok implementation JSR-269

In-depth explanation of modes and environment variables in Vue CLI

How to decompress multiple files using the unzip command in Linux

A brief discussion on the definition and precautions of H tags

MySQL 5.7.17 installation and configuration method graphic tutorial (windows)

Recommend

How to pull the docker image to view the version

Solution to the problem of incomplete display of select drop-down box content in HTML and partial coverage

A brief discussion on React native APP updates

SQL method for calculating timestamp difference

The role and methods of information communication in website visual design (picture and text)

WeChat applet realizes the function of uploading pictures

MySQL 5.6.15 installation and configuration method graphic tutorial under Windows 8

Detailed explanation of Vue's SSR server-side rendering example

Solution to the error when installing Docker on CentOS version

Summary of common commands for Linux user and group management

MySQL's method of dealing with duplicate data (preventing and deleting)

HTML implements the function of detecting input completion

CSS3 analysis of the steps for making Douyin LOGO

Detailed explanation of how Nginx solves the problem of cross-domain access to front-end resources

A brief analysis of how to upgrade PHP 5.4 to 5.6 in CentOS 7