Comment définir la largeur d'un tableau en HTML ?-tutoriel HTML-php.cn

Comment définir la largeur d'un tableau en HTML ?

王林

Libérer： 2023-09-06 23:37:03

avant

2367 Les gens l'ont consulté

Comment définir la largeur dun tableau en HTML ?

Nous utilisons des attributs de style en ligne pour définir la largeur du tableau en HTML. Cet attribut est utilisé dans la balise HTML

et utilise l'attribut CSS width pour définir la largeur du tableau.

Grammaire

Voici la syntaxe permettant de définir la largeur du tableau en HTML.

<table style="width: width value in percentage">… </table>

Copier après la connexion

La traduction chinoise de

Exemple

est :

Exemple

Ce qui suit est un exemple de programme pour définir la largeur d'un tableau en HTML.

<!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: 50%">
      <tr>
         <th>Name </th>
         <th>Job role</th>
      </tr>
      <tr>
         <td></td>
         <td></td>
      </tr>
      <tr>
         <td></td>
         <td></td>
      </tr>
   </table>
</body>
</html>

Copier après la connexion

Dans l'exemple ci-dessus, nous avons utilisé width=50%, ce qui étendra notre tableau à 50% de la taille de l'onglet du navigateur sur la page Web.

La traduction chinoise de

Exemple

est :

Exemple

Voici un autre exemple de programme pour définir la largeur d'un tableau en HTML.

<!DOCTYPE html>
<html>
<head>
   <style>
      table, th, td {
         border: 1px solid green;
      }
   </style>
</head>
<body>
   <table style="width:100%">
      <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>babar azam</td>
         <td>34</td>
         <td>pakistan</td>
      </tr>
      <tr>
         <td>2</td>
         <td>Shami</td>
         <td>29</td>
         <td>India</td>
      </tr>
      <tr style="background-color: Mediumseagreen">
         <td>3</td>
         <td>Cummins</td>
         <td>33</td>
         <td>Australia</td>
      </tr>
   </table>
</body>
</html>

Copier après la connexion

Maintenant, nous essayons d'utiliser l'attribut style pour étendre le tableau à la taille de l'onglet du navigateur.

La traduction chinoise de

Exemple

est :

Exemple

Ce qui suit est un exemple de programme qui utilise l'attribut style pour étendre un tableau à la taille d'un onglet de navigateur.

<!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>Name </th>
         <th>Job role</th>
      </tr>
      <tr>
         <td></td>
         <td></td>
      </tr>
      <tr>
         <td></td>
         <td></td>
      </tr>
   </table>
</body>
</html>

Copier après la connexion

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!