recherche

Maison >interface Web >tutoriel HTML >Comment créer des lignes et des colonnes de tableau en HTML ?

Comment créer des lignes et des colonnes de tableau en HTML ?

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB
WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBavant
2023-09-09 13:45:061430parcourir

Comment créer des lignes et des colonnes de tableau en HTML ?

Les tableaux HTML nous permettent d'organiser les données en lignes et en colonnes sur une page Web.

Nous utilisons la balise

pour créer des tableaux en HTML. Un tableau est constitué de lignes et de colonnes. Vous pouvez utiliser un ou plusieurs éléments et Pour les lignes et les colonnes du tableau, nous utilisons respectivement les balises et
,
pour définir les en-têtes, les lignes et les colonnes, ainsi que les données du tableau.

Les lignes du tableau sont définies par des balises

Exemple

Ce qui suit est un exemple de programme pour créer des lignes et des colonnes de tableau. 

<!DOCTYPE html>
<html>
   <style>
      table {
         border:1px solid black;
         padding: 10px;
      }
      th, td{
         border:1px solid black;
         padding: 20px;
      }
   </style>
<body>
   <h2>Tables in HTML</h2>
   <table style="width: 100%">
      <tr>
         <th></th>
         <th></th>
         <th></th>
      </tr>
      <tr>
         <td></td>
         <td></td>
         <td></td>
      </tr>
      <tr>
         <td></td>
         <td></td>
         <td></td>
      </tr>
   </table>
</body>
</html>

Exemple

Voici un autre exemple de programme pour créer des lignes et des colonnes de tableau. 

<!DOCTYPE html>
<html>
<head>
   <style>
      table, th, td {
         border: 1px solid green;
      }
   </style>
</head>
<body>
   <h2>Adding table rows and colomns in HTML</h2>
   <table>
      <tr>
         <th>S.no</th>
         <th>Name</th>
         <th>Age</th>
         <th>Country</th>
      </tr>
      <tr>
         <td>1</td>
         <td>Kohli</td>
         <td>34</td>
         <td>India</td>
      </tr>
      <tr>
         <td>2</td>
         <td>Rabada</td>
         <td>29</td>
         <td>South Africa</td>
      </tr>
      <tr>
         <td>3</td>
         <td>Starc</td>
         <td>33</td>
         <td>Australia</td>
      </tr>
   </table>
</body>
</html>

Exemple

Vous trouverez ci-dessous un autre exemple de programme pour créer des lignes et des colonnes de tableau. 

<!DOCTYPE html>
<html>
<head>
   <style>
      table, th, td {
         border: 1px solid green;
      }
   </style>
</head>
<body>
   <h2>Adding table rows and colomns in HTML</h2>
   <table style="width:80%">
      <caption>Cricketers...</caption>
      <tr style="background-color: Mediumseagreen">
         <th>S.no</th>
         <th>Name</th>
         <th>Age</th>
         <th>Country</th>
      </tr>
      <tr>
         <td>1</td>
         <td>Kohli</td>
         <td>34</td>
         <td>India</td>
      </tr>
      <tr>
         <td>2</td>
         <td>Rabada</td>
         <td>29</td>
         <td>South Africa</td>
      </tr>
      <tr style="background-color: Mediumseagreen">
         <td>3</td>
         <td>Starc</td>
         <td>33</td>
         <td>Australia</td>
      </tr>
   </table>
</body>
</html>

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!

html table td tr th
Déclaration：
Cet article est reproduit dans:. en cas de violation, veuillez contacter admin@php.cn Supprimer
Article précédent：Comment trouver des caractères autres que les nouvelles lignes à l'aide de RegExp de JavaScript ?Article suivant：Comment trouver des caractères autres que les nouvelles lignes à l'aide de RegExp de JavaScript ?

Articles Liés

Voir plus