Cette fois, je vais vous montrer comment utiliser le balisage structuré du tableau de page Web HTML. Quelles sont les précautions lors de l'utilisation du balisage structuré du tableau de page Web HTML. Ce qui suit est un cas pratique, prenons un. regarder.
La soi-disant structuration consiste à diviser notre tableau en trois types : en-tête, corps et pied de page. Par conséquent, lorsque nous modifions la partie corps du tableau dans , cela n'affectera pas les deux autres parties de , découplant ainsi et facilitant notre application.
Format structuré
<table> <thead>…</thead> --------表头区 <tbody>…</tbody>---------表体区 <tfoot>…</tfoot>------------表尾区 </table>
Résumé : En divisant le tableau en trois parties, il nous est pratique d'éditer le tableau.
Titre du tableau Html
Chaque tableau a son propre titre, comme le montre la deuxième image ci-dessus, alors comment faire pour que le titre suive le contenu Venez bouger ?
Le titre du tableau
<table> <caption>…</caption> </table>
Nom de l'attribut
Valeur de l'attribut
Description
aligner
Haut
Le titre est au dessus du tableau
Bas
Le titre est en dessous la table
Résumé : En définissant le titre de la table, vous pouvez faire bouger le titre avec la table à tout moment.
Format HTML en ligne
Quel est le format en ligne d'un tableau ? Ce que nous voyons habituellement dans Excel, c'est l'ajout d'une couleur d'arrière-plan à une colonne entière.
<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>Je pense que vous maîtrisez les méthodes après avoir lu ces cas. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le site Web chinois de php !
Lecture connexe :
Comment utiliser le serveur sse de h5 pour envoyer des événements EventSource
Le stockage local de H5 et les détails de la base de données locale Introduction
Utiliser H5 et C3 pour implémenter un effet d'horloge simple
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
