Maison >interface Web >tutoriel HTML >Comment définir un en-tête horizontal pour le tableau ?
Comment définir un en-tête horizontal pour le tableau ?
- WBOYavant
- 2023-09-01 18:05:021189parcourir
Les tableaux HTML peuvent avoir un en-tête horizontal et un en-tête vertical. Pour l'en-tête horizontal, nous devons définir tous les
Voici la syntaxe pour définir un titre horizontal de tableau : 
<tr> <th> horizontal header1… </th> <th> horizontal header2… </th> </tr>La traduction chinoise de Exemple 1
est :
Exemple 1Voyons maintenant un exemple de programme pour définir un en-tête horizontal pour un tableau.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
table,tr,th,td {
border:1px solid black;
padding: 20px;
}
</style>
</head>
<body>
<h2>Tables in HTML</h2>
<table style="width: 100%">
<tr>
<th >First Name </th>
<th>Job role</th>
</tr>
<tr>
<td ></td>
<td ></td>
</tr>
<tr>
<td ></td>
<td ></td>
</tr>
<tr>
<td></td>
<td></td>
</tr>
</table>
</body>
</html>
Lors de l'exécution du programme ci-dessus, il affichera un tableau avec des en-têtes horizontaux Prénom
etRôle
.Exemple 2 Maintenant, dans ce deuxième exemple, nous essayons de créer un autre exemple de 3 lignes avec des en-têtes horizontaux "Nom
", "Age
" et "Technologie" −
<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
border: 1px solid black;
width: 100px;
height: 50px;
}
</style>
</head>
<body>
<h1>Employee Details</h1>
<table>
<tr>
<th>Name</th>
<th>Age</th>
<th>Technology</th>
</tr>
<tr>
<td>Amit</td>
<td>27</td>
<td>Database</td>
</tr>
<tr>
<td>Sachin</td>
<td>34</td>
<td>Marketing</td>
</tr>
</table>
</body>
</html>
Voici le résultat de l'exemple de programme ci-dessus.
Exemple 3
Nous pouvons également définir un titre vertical pour le tableau. Vous trouverez ci-dessous un exemple de création d'un en-tête vertical pour un tableau.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
table,tr,th,td {
border:1px solid black;
padding: 20px;
}
</style>
</head>
<body>
<table style="width: 100%">
<tr>
<th>First Name </th>
<td></td>
<td></td>
</tr>
<tr>
<th>Last Name</th>
<td ></td>
<td></td>
</tr>
<tr>
<th>Job role</th>
<td ></td>
<td></td>
</tr>
</table>
</body>
</html>
Voici le résultat de l'exemple de programme ci-dessus.
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!
Déclaration：
Cet article est reproduit dans:. en cas de violation, veuillez contacter admin@php.cn Supprimer
Article précédent：Mettre en surbrillance le contenu HTML pour référenceArticle suivant：Mettre en surbrillance le contenu HTML pour référence