Comment définir une largeur fixe pour td dans le tableau ?-tutoriel HTML-php.cn

Comment définir une largeur fixe pour td dans le tableau ?

WBOY

Libérer： 2023-08-28 22:13:21

avant

1214 Les gens l'ont consulté

Comment définir une largeur fixe pour td dans le tableau ?

Les tables HTML sont un élément clé du développement web. Ils sont utilisés pour organiser et afficher les données dans un format structuré. Les tableaux HTML permettent aux développeurs Web d'organiser les données en lignes et colonnes de cellules.

Les tableaux HTML sont créés à l'aide de la balise

, qui comprend plusieurs composants tels que , , qui représente une ligne du tableau.

Grammaire

Ce qui suit est la syntaxe pour définir la largeur

. Chaque composant a ses propriétés uniques.

Comprendre les

éléments dans les tableaux HTML

L'élément balise

définit les cellules de données dans le tableau HTML. Il est utilisé pour afficher des données telles que du texte, des images ou des liens dans un tableau. Chaque élément

est contenu dans un élément

<td style="width: 20px; >content</td>

Copier après la connexion

Ce code définira la largeur de l'élément

L'importance de définir une largeur fixe pour l'élément

Il est important que le tableau soit cohérent et facile à lire lorsqu'il est affiché sur une page Web. Nous pouvons facilement y parvenir en définissant une largeur fixe pour les éléments

du tableau. De cette façon, nous pouvons garantir que chaque colonne du tableau a la même largeur, ce qui permet aux utilisateurs de trouver plus facilement des informations.

Différentes façons de définir une largeur fixe pour les

éléments

Voici quelques façons courantes de définir des largeurs fixes pour les éléments

dans les tableaux HTML.

1. Utiliser l'attribut width

L'élément style du HTML contient un attribut width. Afin de définir la largeur de la cellule, nous pouvons placer ces types d'attributs à l'intérieur de la balise

avec la valeur de l'attribut en pixels. Par exemple -

<td width="100px">Data</td>

Copier après la connexion

Exemple 1

Voici un exemple d'utilisation de l'attribut width pour définir la largeur de la balise

<!DOCTYPE html>
<html>
<body>
   <h3>Set the width of <td> element using the width attribute </h2>
   <table border = "1px">
      <tr>
         <td width="100px">Content 1</td>
         <td width="150px">Content 2</td>
      </tr>
      <tr>
         <td>Content 3</td>
         <td>Content 4</td>
      </tr>
      <tr>
         <td>Content 5</td>
         <td>Content 6</td>
      </tr>
   </table>
</body>
</html>

Copier après la connexion

2. Utilisez CSS

En utilisant CSS, nous pouvons définir une largeur fixe pour l'élément

. Pour cela, nous pouvons utiliser l'attribut width. Par exemple -

td {
   width: 100px;
}

Copier après la connexion

Ce code définira la largeur de l'élément

à 100px ;

Exemple 2

Voici un exemple de définition de la largeur de la balise

à l'aide de CSS.

<!DOCTYPE html>
<html>
<head>
   <style>
      td {
         width: 100px;
      }
   </style>
</head>
<body>
   <h3>Set the width of <td> element using CSS</h3>
   <table border = "1px">
      <tr>
         <td>Content 1</td>
         <td>Content 2</td>
      </tr>
      <tr>
         <td>Content 3</td>
         <td>Content 4</td>
      </tr>
      <tr>
         <td>Content 5</td>
         <td>Content 6</td>
      </tr>
   </table>
</body>
</html>

Copier après la connexion

3. Utilisez l'attribut de mise en page de table

Nous pouvons également définir une largeur fixe pour l'élément

en utilisant l'attribut table-layout. En définissant l'attribut table-layout sur fixe, nous garantissons que chaque élément

du tableau a la même largeur. Par exemple -

table {
   table-layout: fixed;
}
td {
   width: 150px;
}

Copier après la connexion

Ce code définira la largeur de l'élément

La traduction chinoise de

Exemple 3

est :

Exemple 3

Ceci est un exemple d'utilisation de l'attribut table-layout pour définir la largeur d'une étiquette

<!DOCTYPE html>
<html>
<head>
   <style>
      h1, h3 {
         text-align: center;
      }
      table {
         width: 100%;
         table-layout: fixed;
         border-collapse: collapse;
      }
            
      th, td {
         padding: 5px;
         text-align: left;
         border: 1px solid;
      }
            
      td {
         width: 150px;
      }
   </style>
</head>
<body>
   <h3>Fixed <td> Width using the table-layout Property</h3>
   <table>
      <thead>
         <tr>
            <th>Name</th>
            <th>Age</th>
            <th>Gender</th>
         </tr>
      </thead>
      <tbody>
         <tr>
            <td>Ram Kumar</td>
            <td>35</td>
            <td>Male</td>
         </tr>
         <tr>
            <td>Kavita</td>
            <td>28</td>
            <td>Female</td>
         </tr>
         <tr>
            <td>Bob Johnson</td>
            <td>42</td>
            <td>Male</td>
         </tr>
      </tbody>
   </table>
</body>
</html>

Copier après la connexion

Conclusion

Dans cet article, nous avons discuté de plusieurs façons de définir une largeur fixe, telles que l'attribut width, le CSS et l'attribut table-layout. Définir une largeur fixe pour l'élément