The following editor will bring you a brief discussion on the application of structured markup of Html web page tables. The editor thinks it’s pretty good, so I’ll share it with you now and give it as a reference. Let’s follow the editor and take a look.
Before talking about the structured markup of web tables, let’s take a look at a few pictures.
Structure of Html table
The so-called structuring is as shown in the first picture above Display means dividing our table into three types: header, body, and footer. Therefore, when we modify the table body part, it will not affect the other two parts, thus decoupling and facilitating our application.
Structured format
##XML/HTML CodeCopy Content to clipboard
thead>…< ;/thead> --------Header area
tbody>…tbody> ---------Table body area
tfoot>…tfoot>------------Table Tail area
>
Summary:
By dividing the table into three parts, it is convenient for us to edit the table. Html table title
Each table has its own title, as shown in the second picture above, so how to make the title follow the content Come move?
XML/HTML Code
##
>
…caption>
table
What is the inline format of the table? What we usually see in Excel is adding a background color to an entire column.
Description
Align
Left
Keep to the left
Center
Passed the exam
Right
Keep to the right
Valign
Right
Keep right
Top
Passed the exam
Middle
Keep in the middle
Bottom
Down
Span
Number
Serial number
## Summary:
By setting the inline format of the table, we can deepen the color of the content we need. This is only the column content.
The source code is as follows:
XML/HTML Code
Copy the content to the clipboard
html>
head>
li>The use of nested tablesli>
#table width="500" >
tr>
td align="center">Student Score Listtd>
tr >
tr>
th>Nameth
>th>中文th
th>Mathematicsth
th>foreign languageth
tr>
thead>
tbody>
tr>
##> Zhang Santd
>##td >95td>
td>95td>
td>95td>
##tr>
tr>
td>张三td>
td>95td>
td>95td>
td>95td>
tr>
tr>
td>张三td>
td>95td>
td>95td>
td>95td>
tr>
tbody>
tfoot>
tr>
td colspan="4">成绩汇总td>
tr>
tfoot>
table>
td>
tr>
table>
br/>
li>表格嵌套的使用二li>
table border="1" width="500" >
caption align="bottom">Student Scorecaption>
##thead>
tr>
th>Nameth >
th> Mathematicsth>
##>Foreign Languageth>
> ##
> ##
tbody
tr## td
td> td
td> ##td
>td > ##td>
95td> tr> ;
##tr>
td>张三
> ##td>95
> td>95< ;/
> td >95
> tr>
td>张三 td
>td>95td>
td>95td>
td>95td>
tr>
tbody>
tfoot>
tr>
td colspan="4">成绩汇总td>
tr>
tfoot>
table>
br/>
li>表格嵌套的使用三li>
table border="1" width="500" >
caption align="bottom">学生成绩caption>
col >col>
col bgcolor=blue>col>
thead>
tr>
th>姓名th>
th>语文th>
th>数学th>
th>外语th>
tr>
thead>
tbody>
tr >
td>张三td>
td>95td>
td>95td>
td>95td>
tr>
tr>
td>张三td>
td>95td>
td>95td>
td>95td>
tr>
tr>
td>张三td>
td>95td>
td>95td>
td>95td>
tr>
tbody>
tfoot>
tfoot>
table>
body>
head>
html>