A brief discussion on the application of Html web page table structured markup

A brief discussion on the application of Html web page table structured markup

Property Name

Property Value

illustrate

align

Top

Title above the table

Bottom

Title below the table


Summary: By setting the title of the table, you can make the title move with the table at any time.

Html inline format

What is the inline format of a table? This is what we usually see in Excel when we add background color to the entire column.

<colgroup>…<colgroup>

Property Name

Property Value

illustrate

Align

Left

Keep left

Center

Pass the exam

Right

Keep Right

Valign

Right

Keep Right

Top

Pass

Middle

Middle

Bottom

Lower

Span

number

Number of in-line


Summary: By setting the table's column format, we can deepen the color of the content we need. Here we only focus on the column content.

The source code is as follows:

XML/HTML CodeCopy content to clipboard
  1. < html >      
  2. < head >      
  3.      
  4. < li > Use of nested tables 1 </ li >      
  5.      
  6. < table    width = "500"   >      
  7. < tr >      
  8. < td   align = "center" > Student score sheet </td>      
  9. </ tr >      
  10. < td >      
  11. < table   border = "1"   width = "100%" >      
  12. < thead >            
  13. < tr >      
  14. < th > Name </ th >      
  15. < th > Chinese </ th >      
  16. < th > Mathematics </ th >      
  17. < th > Foreign Language </ th >      
  18. </ tr >      
  19. </ thead >      
  20. < tbody >      
  21. < tr >      
  22. < td > Zhang San </ td >      
  23. < td > 95 </ td >      
  24. < td > 95 </ td >      
  25. < td > 95 </ td >      
  26. </ tr >      
  27. < tr >      
  28. < td > Zhang San </ td >      
  29. < td > 95 </ td >      
  30. < td > 95 </ td >      
  31. < td > 95 </ td >      
  32. </ tr >      
  33. < tr >      
  34. < td > Zhang San </ td >      
  35. < td > 95 </ td >      
  36. < td > 95 </ td >      
  37. < td > 95 </ td >      
  38. </ tr >      
  39. </ tbody >      
  40. < tfoot >      
  41. < tr >      
  42. < td   colspan = "4 " > Results Summary </td>      
  43. </ tr >      
  44. </ tfoot >      
  45. </ table >      
  46. </ td >      
  47. </ tr >      
  48. </ table >      
  49.      
  50. < br />      
  51.      
  52. < li > Use of nested tables 2 </ li >      
  53.      
  54. < table   border = "1"   width = "500"   >      
  55. < caption   align = "bottom" > Student grades </ caption >      
  56. < thead >      
  57. < tr >      
  58. < th > Name </ th >      
  59. < th > Chinese </ th >      
  60. < th > Mathematics </ th >      
  61. < th > Foreign Language </ th >      
  62. </ tr >      
  63. </ thead >      
  64. < tbody >      
  65. < tr >      
  66. < td > Zhang San </ td >      
  67. < td > 95 </ td >      
  68. < td > 95 </ td >      
  69. < td > 95 </ td >      
  70. </ tr >      
  71. < tr >      
  72. < td > Zhang San </ td >      
  73. < td > 95 </ td >      
  74. < td > 95 </ td >      
  75. < td > 95 </ td >      
  76. </ tr >      
  77. < tr >      
  78. < td > Zhang San </ td >      
  79. < td > 95 </ td >      
  80. < td > 95 </ td >      
  81. < td > 95 </ td >      
  82. </ tr >      
  83. </ tbody >      
  84. < tfoot >      
  85. < tr >      
  86. < td   colspan = "4 " > Results Summary </td>      
  87. </ tr >      
  88. </ tfoot >      
  89. </ table >      
  90.         
  91. < br />      
  92.      
  93. < li > Use of nested tables 3 </ li >      
  94. < table   border = "1"   width = "500"   >      
  95. < caption   align = "bottom" > Student grades </ caption >      
  96. < col   > </ col >      
  97. < col   bgcolor = blue > </ col >      
  98. < thead >      
  99. < tr >      
  100. < th > Name </ th >      
  101. < th > Chinese </ th >      
  102. < th > Mathematics </ th >      
  103. < th > Foreign Language </ th >      
  104. </ tr >      
  105. </ thead >      
  106. < tbody >      
  107. < tr   >      
  108. < td > Zhang San </ td >      
  109. < td > 95 </ td >      
  110. < td > 95 </ td >      
  111. < td > 95 </ td >      
  112. </ tr >      
  113. < tr >      
  114. < td > Zhang San </ td >      
  115. < td > 95 </ td >      
  116. < td > 95 </ td >      
  117. < td > 95 </ td >      
  118. </ tr >      
  119. < tr >      
  120. < td > Zhang San </ td >      
  121. < td > 95 </ td >      
  122. < td > 95 </ td >      
  123. < td > 95 </ td >      
  124. </ tr >      
  125. </ tbody >      
  126. < tfoot >      
  127. </ tfoot >      
  128. </ table >      
  129.      
  130. </ body >      
  131. </ head >      
  132. </ html >     

The above is all the content of the application of Html web page table structured markup brought to you by the editor. I hope it will be helpful to everyone. Please support 123WORDPRESS.COM~

Before talking about the structural markup of web tables, let's take a look at a few pictures.

Structuring of Html tables

The so-called structuring, as shown in the first picture above, is to divide our table into three types: header, body, and footer. Therefore, when we modify the table body, it will not affect the other two parts, thus releasing the coupling and facilitating our application.

Structured format

XML/HTML CodeCopy content to clipboard
  1. < table >      
  2.      
  3. < thead > … </ thead > --------Header area
  4.      
  5. < tbody > … </ tbody > ---------Table body area
  6.      
  7. < tfoot > … </ tfoot > ------------Table footer area
  8.      
  9. </ table >     

Summary: By dividing the table into three parts, it is easier for us to edit the table.

Html table title

Each table has its own title, as shown in the second picture above, so how can we make the title move with the content?

Table title

XML/HTML CodeCopy content to clipboard
  1. < table >      
  2.      
  3. < caption > … </ caption >      
  4.      
  5. </ table >     
The attribute values ​​under <caption> are:

<<:  How to eliminate the extra blank space at the bottom of the created web page when browsing

>>:  Detailed Introduction to MySQL Innodb Index Mechanism

Recommend

Vue implements a visual drag page editor

Table of contents Drag and drop implementation Dr...

Sample code for deploying ELK using Docker-compose

environment Host IP 192.168.0.9 Docker version 19...

Summary of MySQL database and table sharding

During project development, our database data is ...

How to use Antd's Form component in React to implement form functions

1. Construction components 1. A form must contain...

TypeScript enumeration basics and examples

Table of contents Preface What are enums in TypeS...

Detailed steps to configure my.ini for mysql5.7 and above

There is no data directory, my-default.ini and my...

MySQL backup table operation based on Java

The core is mysqldump and Runtime The operation i...

Summary of common MySQL function examples [aggregate functions, strings, numbers, time and date processing, etc.]

This article describes the commonly used MySQL fu...

Summary of three ways to create new elements

First: via text/HTML var txt1="<h1>Tex...

Solutions to MySQL OOM (memory overflow)

OOM stands for "Out Of Memory", which m...

HTML meta explained

Introduction The meta tag is an auxiliary tag in ...

Six important selectors in CSS (remember them in three seconds)

From: https://blog.csdn.net/qq_44761243/article/d...

Docker uses the mysqldump command to back up and export mysql data in the project

mysqldump command Introduction: A database backup...

JavaScript to achieve simple image switching

This article shares the specific code for JavaScr...

About MySQL 8.0.13 zip package installation method

MySQL 8.0.13 has a data folder by default. This f...