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 explanation of Linux less command examples
less file name View File less file name | grep -n...
How to configure MySQL on Ubuntu 16.04 server and enable remote connection
background I am learning nodejs recently, and I r...
Implement QR code scanning function through Vue
hint This plug-in can only be accessed under the ...
uniapp implements date and time picker
This article example shares the specific code of ...
Summary of the pitfalls you may not have encountered in WeChat applet development
Table of contents getApp() Define variables at th...
JavaScript function encapsulates random color verification code (complete code)
An n-digit verification code consisting of number...
Django online deployment method of Apache
environment: 1. Windows Server 2016 Datacenter 64...
The use and difference between vue3 watch and watchEffect
1.watch listener Introducing watch import { ref, ...
JavaScript canvas to achieve raindrop effect
This article example shares the specific code for...
Solve the problem that Alibaba Cloud SSH remote connection will be disconnected after a short time
Problem Reproduction Alibaba Cloud Server, using ...
JavaScript tips to help you improve your coding skills
Table of contents 1. Filter unique values 2. Shor...
Vue two-choice tab bar switching new approach
Problem Description When we are working on a proj...
Detailed tutorial on installing pxc cluster with docker
Table of contents Preface Preliminary preparation...
MySQL uses limit to implement paging example method
1. Basic implementation of limit In general, the ...
Detailed graphic and text tutorial on downloading, installing and configuring mysql-5.7.28 under Windows
Recently I need to change the version of MySQL da...