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
Detailed tutorial on building a local idea activation server
Preface The blogger uses the idea IDE. Because th...
Implementation of CSS child element selection parent element
Usually a CSS selector selects from top to bottom...
A comprehensive understanding of Vue.js functional components
Table of contents Preface React Functional Compon...
Vue implements anchor positioning function
This article example shares the specific code of ...
Detailed explanation of how to implement secondary cache with MySQL and Redis
Redis Introduction Redis is completely open sourc...
Example test MySQL enum type
When developing a project, you will often encount...
MySQL 8.0.11 installation tutorial with pictures and text
There are many tutorials on the Internet, and the...
MySql 5.7.20 installation and configuration of data and my.ini files
1. First download from the official website of My...
5 Simple XHTML Web Forms for Web Design
Simple XHTML web form in web design 5. Technique ...
Native JS to implement real-time clock
Share a real-time clock effect implemented with n...
mysql settings to change the root password, mysql server connection, mysql common commands diagram
1. Set and change the root password Check whether...
Installation and verification of pytorch in linux or windows environment (solving runtimeerror problem)
1. Download the corresponding installation file f...
Detailed process of building mongodb and mysql with docker-compose
Let's take a look at the detailed method of b...
Example code for implementing concurrent request control in JavaScript/TypeScript
Scenario Suppose there are 10 requests, but the m...
How a select statement is executed in MySQL
Table of contents 1. Analyzing MySQL from a macro...