HTML Table Tag Tutorial (47): Nested Tables
|
<br />In the page, typesetting is achieved by nesting tables. That is, one table can be nested inside another table. Here are the reasons: First of all, the layout of the web page will be very complicated, and an external table is needed to control the overall layout. If some internal layout details are also implemented through the master table at this time, it is easy to cause conflicts in row height and column width, which will bring difficulties to table production. Secondly, when the browser parses the web page, it will display the table only after downloading the entire table structure. Without nesting, the table would be very complex and visitors would have to wait a long time before they could see the content of the web page. For these reasons, nested tables were introduced. The main table is responsible for the overall layout, and the nested table is responsible for the layout of each sub-column and is inserted into the corresponding position of the main table. In this way, everyone can perform their duties and there will be no conflict. File example: 10-47.htm Make tables nested. 01 <!-- ------------------------------ --> 02 <!-- File example: 10-47.htm --> 03 <!-- File description: nested tables --> 04 <!-- ------------------------------ --> 05 <html> 06 <head> 07 <title>Nested tables</title> 08 </head> 09 <body> 10 <table border=3 width=400 height=100 bordercolor=#336699 align="Center"> 11 <tr> 12 <td colspan=2 align="Center"> 13 <table border=1 width=100% bordercolor=red> 14 <tr> 15 Macromedia Web Designer 16 </tr> 17 <tr> 18 <td align="Center">Web design software</td> 19 </tr> 20 </tableE> 21 </td> 22 </tr> 23 <tr> 24 <td>Web Graphics Software</td><td>Fireworks</td> 25 </tr> 26 <tr> 27 <td>Web page creation software</td><td>Dreamweaver</td> 28 </tr> 29 <tr> 30 <td>Web animation software</td><TD>Flash</td> 31 </tr> 32 </table> 33 </body> 34 </html> The file description shows that lines 13 to 20 are nested tables. |
<<: A brief discussion on VUE uni-app's commonly used APIs
>>: Implementation steps of Mysql merge results and horizontal splicing fields
Recommend
JS implements click drop effect
js realizes the special effect of clicking and dr...
Can Docker become the next "Linux"?
The Linux operating system has revolutionized the...
Example code for implementing fullpage.js full-screen scrolling effect with CSS
When I was studying CSS recently, I found that I ...
Implementation of adding a mask layer effect when the CSS mouse hovers over the image
First look at the effect: When the mouse moves ov...
Nginx rewrite regular matching rewriting method example
Nginx's rewrite function supports regular mat...
Solution to the problem of saving format in HTML TextArea
The format of textarea can be saved to the databas...
Example analysis of the page splitting principle of MySQL clustered index
This article uses an example to illustrate the pa...
The forgotten button tag
Note: This article has been translated by someone ...
Teach you to connect to MySQL database using eclipse
Preface Since errors always occur, record the pro...
How to change the root password in a container using Docker
1. Use the following command to set the ssh passw...
Master the commonly used HTML tags for quoting content in web pages
Use blockquote for long citations, q for short ci...
Detailed explanation of using Docker to build a development environment for Laravel and Vue projects
This article introduces the development environme...
Build nginx virtual host based on domain name, port and IP
There are three types of virtual hosts supported ...
How to add double quotes in HTML title
<a href="https://www.jb51.net/" titl...
Let's talk briefly about the changes in setup in vue3.0 sfc
Table of contents Preface Standard sfc writing me...