Home > Article > Web Front-end > How to use HTML web table structured markup
How to use HTML web table structured markup
- php中世界最好的语言Original
- 2018-01-20 09:43:402079browse
This time I will show you how to use the structured markup of Html web page table. What are the precautions when using the structured markup of Html web page table. The following is a practical case, let's take a look.
The so-called structuring is to divide our table into three types: header, body and footer. Therefore, when we modify the body part of the table, it will not affect the other parts, thus decoupling and facilitating our application.
Structured format
<table> <thead>…</thead> --------表头区 <tbody>…</tbody>---------表体区 <tfoot>…</tfoot>------------表尾区 </table>
Summary: By dividing the table into three parts, it is convenient for us to edit the table.
Title of Html table
Each table has its own title, as shown in the second picture above, so how to make the title follow the content Come move?
The title of the table
<table> <caption>…</caption> </table>
63bd76834ec05ac1f4c0ebbeaafb0994The attributevalues are:
Attribute name
Attribute value
Description
align
Top
The title is above the table
Bottom
The title is 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 the table? What we usually see in Excel is adding a background color to an entire column.
<html>
<head>
<li>表格嵌套的使用一</li>
<table width="500" >
<tr>
<td align="center">学生成绩表</td>
</tr>
<td>
<table border="1" width="100%">
<thead>
<tr>
<th>姓名</th>
<th>语文</th>
<th>数学</th>
<th>外语</th>
</tr>
</thead>
<tbody>
<tr>
<td>张三</td>
<td>95</td>
<td>95</td>
<td>95</td>
</tr>
<tr>
<td>张三</td>
<td>95</td>
<td>95</td>
<td>95</td>
</tr>
<tr>
<td>张三</td>
<td>95</td>
<td>95</td>
<td>95</td>
</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">学生成绩</caption>
<thead>
<tr>
<th>姓名</th>
<th>语文</th>
<th>数学</th>
<th>外语</th>
</tr>
</thead>
<tbody>
<tr>
<td>张三</td>
<td>95</td>
<td>95</td>
<td>95</td>
</tr>
<tr>
<td>张三</td>
<td>95</td>
<td>95</td>
<td>95</td>
</tr>
<tr>
<td>张三</td>
<td>95</td>
<td>95</td>
<td>95</td>
</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>95</td>
<td>95</td>
<td>95</td>
</tr>
<tr>
<td>张三</td>
<td>95</td>
<td>95</td>
<td>95</td>
</tr>
<tr>
<td>张三</td>
<td>95</td>
<td>95</td>
<td>95</td>
</tr>
</tbody>
<tfoot>
</tfoot>
</table>
</body>
</head>
</html>I believe you have mastered the methods after reading these cases. For more exciting information, please pay attention to other related articles on the php Chinese website!
Related reading:
How to use h5’s sse server to send EventSource events
H5’s local storage and local database details Introduction
Use H5 and C3 to achieve a simple clock effect
The above is the detailed content of How to use HTML web table structured markup. For more information, please follow other related articles on the PHP Chinese website!