Introduction détaillée aux tables de style de base CSS

Cet article fournit principalement une introduction détaillée à la table de style de base du CSS. Il a une certaine valeur de référence. Les amis intéressés peuvent s'y référer

a.Les attributs de la table CSS peuvent nous aider à améliorer considérablement l'apparence de la table.

b. Bordure du tableau

<table>
    <tr>
        <th>姓名</th>
        <th>年龄</th>
        <th>性别</th>
    </tr>
    <tr>
        <td>小王</td>
        <td>20</td>
        <td>男</td>
    </tr>
    <tr>
        <td>小王</td>
        <td>20</td>
        <td>男</td>
    </tr>
    <tr>
        <td>小王</td>
        <td>20</td>
        <td>男</td>
    </tr>
</table>

Cela peut générer un tableau sans effet de bordure

À ce moment, vous pouvez ajouter une bordure au table

<table border = "1">

Mais cette façon d'écrire ne peut pas être appliquée à toutes les tables

Vous pouvez donc choisir d'utiliser le style CSS comme une meilleure façon

<table id="tb">
#tb{
    border: 1px solid blue;
}

Ceci vous peut voir la bordure extérieure bleue de la couche la plus externe du tableau

Vous pouvez définir l'intérieur du tableau :

#tb,tr,th,td{
    border: 1px solid blue;
}

Le sélecteur de groupe est utilisé ici. Autrement dit, un sélecteur d'identifiant et 3 sélecteurs d'éléments sont combinés ensemble, séparés par des virgules

c. Réduire la bordure

Dans le tableau ci-dessus, des bordures doubles sont affichées

C'est évidemment déraisonnable

Vous pouvez combiner les doubles bordures en une seule ligne

#tb,tr,th,td{
    border: 1px solid blue;
    border-collapse: collapse;
}

d Largeur et hauteur du tableau

#tb{
    width: 400px;
    height: 400px;
    border-collapse: collapse;
}
#tb,tr,th,td{
    border: 1px solid blue;
}

e Alignement du texte du tableau

#tb{
    width: 400px;
    height: 400px;
    border-collapse: collapse;
}
#tb,tr,th,td{
    border: 1px solid blue;
    text-align:center;
}

e. 🎜>

f. Rembourrage de la table

g Couleur de la table

#tb{
    width: 400px;
    height: 400px;
    border-collapse: collapse;
}
#tb,tr,th,td{
    border: 1px solid blue;
    text-align:center;
    background-color: aqua;
}

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!