Maison >interface Web >tutoriel HTML >Comment définir une largeur fixe pour td dans le tableau ?

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

WBOYavant: 2023-08-28 22:13:211243parcourir

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>

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>

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>

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;
}

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>

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;
}

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>

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

dans un tableau HTML est important pour garantir que le tableau soit cohérent et facile à lire.

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!

css 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：« Système universel de télécommunications mobiles » peut être traduit par « Système universel de télécommunications mobiles ».Article suivant：« Système universel de télécommunications mobiles » peut être traduit par « Système universel de télécommunications mobiles ».

Articles Liés

Voir plus