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

How many ports can a Linux server open at most?

Table of contents Port-related concepts: Relation...

Summary of precautions when writing EDM in HTML (general precautions for sending emails)

Format Encoding 1. Please set the page width with...

How to set Nginx log printing post request parameters

【Foreword】 The SMS function of our project is to ...

MySQL performance optimization tips

MySQL Performance Optimization MySQL is widely us...

Vue implements star rating with decimal points

This article shares the specific code of Vue to i...

Using CSS to implement loading animation of Android system

There are two common loading icons on the web, on...

Several ways to update batches in MySQL

Typically, we use the following SQL statement to ...

js implements single click to modify the table

Pure js implements a single-click editable table ...

Summary of several situations in which MySQL indexes fail

1. Indexes do not store null values More precisel...

How to authorize remote connections in MySQL in Linux

Note: Other machines (IP) cannot connect to the M...

mysql 8.0.16 winx64.zip installation and configuration method graphic tutorial

This article shares the specific code of MySQL 8....

Tomcat reports an error when starting the springboot project war package: Error when starting the child

Today, the company's springboot project is re...

Example of using negative margin to achieve average layout in CSS

For evenly distributed layouts, we generally use ...

Book page turning effects made with CSS3

Result:Implementation code: html <!-- Please h...

The difference between KEY, PRIMARY KEY, UNIQUE KEY, and INDEX in MySQL

The problem raised in the title can be broken dow...