Comment définir la largeur des colonnes dans un tableau pour une mise en page de style boîte de réception ?

Définition de la largeur des colonnes du tableau

Créer un tableau visuellement attrayant et fonctionnel implique souvent de personnaliser la largeur de ses colonnes. Dans le cas d'un tableau de base de style boîte de réception, l'objectif est de définir des largeurs spécifiques pour les colonnes « De », « Objet » et « Date », en veillant à ce qu'elles occupent différents pourcentages de la largeur de la page.

Pour réaliser cette personnalisation, la propriété width CSS est utilisée en conjonction avec l'élément col. Cet élément réside dans l'élément colgroup, qui définit la disposition des colonnes. En attribuant une valeur de largeur à chaque colonne, nous pouvons contrôler sa taille.

Voici un exemple utilisant des attributs CSS en ligne :

<table style="width: 100%">
    <colgroup>
       <col span="1" style="width: 15%;">
       <col span="1" style="width: 70%;">
       <col span="1" style="width: 15%;">
    </colgroup>
    <!-- Column headers (<thead>) and body rows (<tbody>) go here -->
    <tbody>
        <tr>
            <td style="background-color: #777">15%</td>
            <td style="background-color: #aaa">70%</td>
            <td style="background-color: #777">15%</td>
        </tr>
    </tbody>
</table>

Cet extrait de code définit le tableau pour qu'il occupe toute la largeur de la page. , tout en définissant trois colonnes avec des pourcentages précis :

• "De" : 15% de la largeur de la page
• "Sujet" : 70% de la largeur de la page
• "Date" : 15% de 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!