Tableau HTML
Les tableaux sont définis par la balise <table> Chaque tableau comporte un certain nombre de lignes (définies par des balises <tr>) et chaque ligne est divisée en un certain nombre de cellules (définies par des balises <td>). Les lettres td font référence aux données du tableau, au contenu des cellules de données. Les cellules de données peuvent contenir du texte, des images, des listes, des paragraphes, des formulaires, des lignes horizontales, des tableaux, etc.
Voici un exemple :
<html>
<head>
<meta charset="utf-8">
<title>Table in html</title>
</head>
<body>
<p>水平表头</p>
<table border="1">
<tr>
<th>Name</th>
<th>Age</th>
<th>Gender</th>
</tr>
<tr>
<td>zdd</td>
<td>30</td>
<td>male</td>
</tr>
</table>
<p>垂直表头</p>
<table border="1">
<tr>
<th>Name</th>
<td>autumn</td>
</tr>
<tr>
<th>Age</th>
<td>30</td>
</tr>
<tr>
<th>Gender</th>
<td>famale</td>
</tr>
</table>
</body>
</html>
Essayez-le
Tableau sans bordure
Si l'attribut border n'est pas précisé lors de la définition du tableau, le tableau n'aura pas de bordure
<table>
<tr><td>zdd< ;/td><td>30</td></tr>
></table>
Cellule vide
S'il n'y a pas de cellule Précisez le contenu, alors la cellule sera vide et n'aura pas de bordures
Et si le problème est résolu ? La méthode consiste à ajouter des espaces aux cellules vides. Puisque HTML ignore les espaces supplémentaires, nous ne pouvons pas ajouter d'espaces directement, mais ajoutons pour indiquer un espace insécable.
<table border="1"> <tr><td>zdd</td><td>30</td></ tr>
>Table avec titre
utilise l'attribut caption, mais il semble qu'il ne puisse pas y avoir d'espaces dans le titre, sinon il sera renvoyé lorsqu'il est affiché ! N'est-ce pas trop ridicule ?
<table border="1">
<caption>Mon tableau</caption>
;zdd</td><td> ;30</td></tr> <tr><td> </td><td>20</td></ tr></table> ;
Croisement de lignes ou de colonnes
Utilisez colspan pour étendre les lignes
< ;table border="1"><tr><th>Nom</th><th colspan="2">Numéro de téléphone</th> ;tr><td>Bill Gates</td><td>555 77 854</td><td>555 77 855</td></tr></table>
Utilisez rowspan pour étendre les colonnes
<table border="1">
<tr><th>Name</th><td> Bill Gates</td></tr>
<tr><th rowspan="2">Téléphone</th><td>555 77 854</td></tr> 🎜><tr><td>555 77 855</td></tr>
</table>
En-tête de tableau HTML
L'en-tête du tableau est défini à l'aide de la balise <th>
La plupart des navigateurs affichent l'en-tête du tableau sous forme de texte gras et centré :
<table border="1"><tr>
< th>En-tête 1</th>
<th>En-tête 2</th>
</tr>
<tr>
<td>ligne 1, cellule 1</ td>
<td>ligne 1, cellule 2</td>
</tr>
<tr>
<td>ligne 2, cellule 1</ td>
<td>ligne 2, cellule 2</td>
</tr>
</table>
section suivante
