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

Detailed tutorial for downloading, installing and configuring MySQL 5.7.27

Table of contents 1. Download steps 2. Configure ...

Teach you how to make cool barcode effects

statement : This article teaches you how to imple...

Tips for adding favicon to a website: a small icon in front of the URL

The so-called favicon, which is the abbreviation o...

Discussion on style customization and browser compatibility issues when using input element [type="file"]

I encountered such a problem when doing the writte...

Learning about UDP in Linux

Table of contents 1. Introduction to UDP and Linu...

WeChat applet realizes simple tab switching effect

This article shares the specific code for WeChat ...

How to Rename Multiple Files at Once in Linux

Preface In our daily work, we often need to renam...

JS+Canvas realizes dynamic clock effect

A dynamic clock demo based on Canvas is provided ...

Node.js solves the problem of Chinese garbled characters in client request data

Node.js solves the problem of Chinese garbled cha...

Several ways for Vue to achieve communication between components (multiple scenarios)

Table of contents 1. Props Parent >>> Ch...

A brief analysis of the basic implementation of Vue detection data changes

Table of contents 1. Object change detection 2. Q...

js implements mouse switching pictures (without timer)

This article example shares the specific code of ...

Detailed explanation of dragging table columns using Vue Element Sortablejs

1. css: dragTable.css @charset "UTF-8";...

Detailed explanation of MySQL user rights management

Table of contents Preface: 1. Introduction to Use...

Commonly used English fonts for web page creation

Arial Arial is a sans-serif TrueType font distribu...