Comment définir la largeur des colonnes d'un tableau à l'aide de HTML et CSS ?

Définition de la largeur des colonnes du tableau en HTML et CSS

Pour définir la largeur des colonnes dans le tableau fourni :

Propriété CSS width :

Utilisez la propriété width dans CSS pour définir la largeur de chaque colonne du tableau. Vous pouvez spécifier des valeurs en pixels (px) ou en pourcentage (%) de la largeur de l'élément parent.

Exemple :

<code class="css">table {
  width: 100%;  /* Table takes up 100% page width */
}

colgroup {
  display: inline-block;
  width: 100%;
}

col {
  /* Set column widths as a percentage of the parent column group */
  width: 15%;
  width: 70%;
  width: 15%;
}

/* Additional styling for visual demonstration */

td {
  background-color: #aaa;
}

td:nth-child(1), td:nth-child(3) {
  background-color: #777;
}</code>

Marquage HTML :

<code class="html"><table style="width: 100%;">
  <colgroup>
    <col span="1" style="width: 15%;">
    <col span="1" style="width: 70%;">
    <col span="1" style="width: 15%;">
  </colgroup>
  <!-- Insert table headers, body, and rows here -->
</table></code>

Cette solution attribue respectivement des largeurs de 15 %, 70 % et 15 % aux colonnes "De", "Objet" et "Date". De plus, cela garantit que le tableau s'étend sur toute la largeur de la page.

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!