Comment définir un en-tête horizontal pour le tableau ?-tutoriel HTML-php.cn

Comment définir un en-tête horizontal pour le tableau ?

WBOY

Libérer： 2023-09-01 18:05:02

avant

1180 Les gens l'ont consulté

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

dans une seule balise Grammaire
Voici la syntaxe pour définir un titre horizontal de tableau :
<tr> <th> horizontal header1… </th> <th> horizontal header2… </th> </tr>
Copier après la connexion
La traduction chinoise de
Exemple 1
est :
Exemple 1

Voyons 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>
Copier après la connexion

Lors de l'exécution du programme ci-dessus, il affichera un tableau avec des en-têtes horizontaux
Prénom
et
Rô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>
Copier après la connexion
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>
Copier après la connexion

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!