The magic of tbody tag speeds up the display of table content
|
You must have saved other people’s web pages and looked at them before, especially when you open them with dw, you will see that many web pages have the tag <tbody> added to them. It is very conspicuous in yellow in dw, so what is <tbody>? Use the TBODY tag to control the download of tables in rows, so that the content can be downloaded before other things on the web page (such as pictures). This allows others to see the substantive content of the web page first without having to wait so long. Add <tbody> and </tbody> where you need to download rows, for example: Copy code The code is as follows:<table> <tbody> <tr><td>Feiou Island</td></tr> <tr><td>Feiou Island</td></tr> </tbody> <tbody> <tr><td>Feiou Island</td></tr> <tr><td>Feiou Island</td></tr> </tbody> </table> Usage of tbody tag The table attributes introduced by IE independently and supported by the HTML3.0 specification are: <THEAD> - specifies the Table head <TBODY> - specifies the Table body <TFOOT> - specifies the Table footer <COLGROUP> - used to group column alignments <COL> - used to specify individual column alignments The following is an example I made. It is quite complicated and you can take a look at it. The main use of these properties is reflected in SCRIPT-driven dynamic effects. Copy code The code is as follows:<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTML> <HEAD> <TITLE> New Document </TITLE> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> </HEAD> <BODY BGCOLOR="#FFFFFF"> <TABLE BORDER FRAME=hsides RULES=cols> <COL ALIGN=left> <COLGROUP SPAN=3 ALIGN=center VALIGN=middle> <THEAD BGCOLOR="#FF0000"> <CAPTION ALIGN=center><FONT SIZE=+1><B> A section of the Comparison Table </CAPTION> <TR> <TD><B>Element<B></TD><TD><B>Internet Explorer</B></TD> <TD><B>Netscape</B></TD><TD><B>Mosaic</B></TD> </TR> </THEAD> <TBODY BGCOLOR="#33CCFF"> <TR> <TD><B></TD><TD>X</TD><TD>X</TD><TD>X</TD> </TR> <TR> <TD><BASE ...></TD><TD>X</TD><TD>X</TD><TD>X</TD> </TR> <TR> <TD> ...HREF</TD><TD>X</TD><TD>X</TD><TD>X</TD> </TR> <TR> <TD> ...TARGET</TD><TD>X</TD><TD>X</TD><TD></TD> </TR> <TR> <TD><BASEFONT ...></TD><TD>X</TD><TD>X</TD><TD></TD> </TR> <TR> <TD VALIGN=top> ...SIZE</TD><TD>X <FONT SIZE=-1> (only visible when FONT SIZE= used as well)</FONT></TD><TD VALIGN=top>X</TD> <TD></TD> </TR> <TR> <TD> ...FACE</TD><TD>X</TD><TD></TD><TD></TD> </TR> <TR> <TD VALIGN=top><BGSOUND ...></TD><TD VALIGN=top>X</TD> X <FONT SIZE=-1>(will spawn player for .mid files) </TR> </TBODY> <TFOOT BGCOLOR="#6699CC"> <TR> <TD> ...</TD><TD>[...</TD><TD>...]</TD><TD>...</TD> </TR> <CAPTION ALIGN=BOTTOM><FONT SIZE=+1><B> This is <TFOOT> content</B></FONT> </CAPTION> </TFOOT> </TABLE> </BODY> </HTML> tbody is said to enhance the control over the table, but after many experiments I have found it to be of no use. ================================= 1. DW does not generate tbody code at all 2. DW does not recognize tbody code at all ================================= If the tbody code is not written by hand, only when you open a web page with IE5 and save it as a file, the table in your saved file will generate the tbody code. (Even if your table does not have tbody code at all, IE5 will generate it for you when you save it as) You can make a table, open it with IE and then save it as, and look at the code of the file you saved. (This is too much!!!) ================================= It can be assumed that only IE5+ can recognize tbody ================================= I don't know if FP can generate tbody. I haven't used it. |
<<: Detailed explanation of how to use element-plus in Vue3
>>: How to construct a table index in MySQL
Recommend
Docker generates images through containers and submits DockerCommit in detail
Table of contents After creating a container loca...
Vue uses echarts to draw an organizational chart
Yesterday, I wrote a blog about the circular prog...
Example of how to implement a 2-column layout in HTML (fixed width on the left, adaptive width on the right)
HTML implements 2-column layout, with fixed width...
The difference between distinct and group by in MySQL
Simply put, distinct is used to remove duplicates...
Mysql slow query optimization method and optimization principle
1. For comparison of date size, the date format p...
Implementing long shadow of text in less in CSS3
This article mainly introduces how to implement l...
How to create your own Docker image and upload it to Dockerhub
1. First register your own dockerhub account, reg...
Mac+IDEA+Tomcat configuration steps
Table of contents 1. Download 2. Installation and...
MySQL compression usage scenarios and solutions
Introduction Describes the use cases and solution...
Elements of user experience or elements of web design
System and user environment design <br />Th...
Website construction experience summary
<br />What principles should be followed to ...
Vue uniapp realizes the segmenter effect
This article shares the specific code of vue unia...
Summary of Vue's monitoring of keyboard events
Key Modifiers When listening for keyboard events,...
MySQL 8.0.15 installation and configuration graphic tutorial and password change under Linux
I wrote this blog to remember that I just install...
Introduction and usage examples of ref and $refs in Vue
Preface In JavaScript, you need to use document.q...