Comment styliser un tableau avec CSS

Dans la conception Web, les tableaux sont l'un des éléments couramment utilisés. Grâce à l'utilisation de tableaux, nous pouvons mieux afficher les informations et les données. Cependant, lors de l'utilisation de tableaux, si vous ne définissez pas de styles, la page apparaîtra monotone et ennuyeuse, ce qui ne favorise pas la transmission d'informations. Par conséquent, cet article va vous montrer comment styliser un tableau en utilisant CSS.

1. Définir le style de base du tableau

Nous pouvons utiliser la balise table pour définir le tableau, puis utiliser CSS pour définir son style. Voici un exemple de code du tableau le plus basique :

<table>
    <tr>
        <th>数字</th>
        <th>字母</th>
    </tr>
    <tr>
        <td>1</td>
        <td>A</td>
    </tr>
    <tr>
        <td>2</td>
        <td>B</td>
    </tr>
</table>

Ce code définit un tableau contenant deux colonnes et trois lignes. La ligne supérieure est l'en-tête et les deux lignes inférieures sont le contenu du tableau. Ensuite, nous pouvons définir des styles de base pour le tableau, tels que la définition des bordures du tableau, le remplissage des cellules et la distance entre les cellules (espacement des cellules).

table {
    border-collapse: collapse;  /* 合并边框 */
    border-spacing: 0;  /* 设置单元格之间的距离为 0 */
    width: 100%;
}

th, td {
    padding: 8px;  /* 设置单元格内边距 */
    border: 1px solid #ccc;  /* 设置边框 */
}

Dans le code ci-dessus, nous avons utilisé border-collapse: cliff pour fusionner les bordures du tableau et lui donner un aspect plus net. border-spacing : 0 définit la distance entre les cellules à 0, ce qui rend le tableau plus compact. La définition de width : 100% permettra au tableau de s'adapter à la taille de la fenêtre du navigateur. Ensuite, nous utilisons le sélecteur th,td pour styliser la cellule. La définition de padding : 8px peut ajuster la taille du remplissage de la cellule pour rendre le contenu du tableau plus beau. Définissez border: 1px solid #ccc pour définir une bordure pour la cellule, ici la couleur grise (#ccc) est utilisée. border-collapse: collapse 合并表格边框，使其看起来更整洁。border-spacing: 0 设置单元格之间的距离为 0，使表格看上去更紧凑。设置 width: 100% 可以使表格自适应浏览器窗口的大小。接下来，我们使用 th,td 选择器来设置单元格的样式。设置 padding: 8px 可以调整单元格的内边距大小，让表格内容更加美观。设置 border: 1px solid #ccc 可以为单元格设置边框，这里使用了灰色的颜色（#ccc）。

2. 设置表头样式

表头是表格的重要组成部分，通常将其标记为 <th> 元素。我们可以对表头进行单独设置样式。

th {
    background-color: #f2f2f2;  /* 设置表头背景颜色 */
    font-weight: bold;  /* 设置表头文本加粗 */
    text-align: left;  /* 设置表头文本左对齐 */
}

在上面的代码中，我们使用了 background-color: #f2f2f2 设置表头的背景颜色。设置 font-weight: bold 可以让表头的文本加粗，使其更加突出。使用 text-align: left 可以将表头文本左对齐。

3. 设置表格交替行样式

为了让表格更容易阅读，我们可以为表格的奇偶行设置交替的样式。

tr:nth-child(even) {
    background-color: #f2f2f2;  /* 设置偶数行背景颜色 */
}

在上面的代码中，我们使用了 nth-child(even) 伪类选择器来选择表格的偶数行，然后设置其背景颜色为灰色（#f2f2f2）。

4. 设置表格鼠标悬停状态样式

当鼠标悬停在表格行上时，我们可以为其设置不同的样式，以增加交互性。

tr:hover {
    background-color: #ddd;  /* 设置鼠标悬停状态的背景颜色 */
}

在上面的代码中，我们使用了 hover

Définir le style d'en-tête du tableau
🎜L'en-tête du tableau est une partie importante du tableau et est généralement marqué comme un élément <th>. Nous pouvons styliser les en-têtes individuellement. 🎜rrreee🎜Dans le code ci-dessus, nous utilisons background-color: #f2f2f2 pour définir la couleur d'arrière-plan de l'en-tête du tableau. La définition de font-weight: bold peut mettre le texte d'en-tête en gras et le faire ressortir davantage. Utilisez text-align: left pour aligner le texte d'en-tête à gauche. 🎜
🎜Définir des styles de lignes alternés du tableau🎜🎜🎜Afin de rendre le tableau plus facile à lire, nous pouvons définir des styles alternés pour les lignes paires et impaires du tableau. 🎜rrreee🎜Dans le code ci-dessus, nous utilisons le sélecteur de pseudo-classe nth-child(even) pour sélectionner les lignes paires du tableau, puis définissons sa couleur d'arrière-plan sur gris (#f2f2f2). 🎜
🎜Définir le style d'état du survol du tableau🎜🎜🎜Lorsque la souris survole une ligne du tableau, nous pouvons définir différents styles pour augmenter l'interactivité. 🎜rrreee🎜Dans le code ci-dessus, nous avons utilisé le sélecteur de pseudo-classe hover pour sélectionner la ligne survolée par la souris, puis définir sa couleur d'arrière-plan sur gris (#ddd). 🎜🎜Grâce aux étapes ci-dessus, nous pouvons définir des styles pour la table afin de la rendre plus belle et plus claire. Bien entendu, nous pouvons également effectuer davantage de paramètres de style en fonction des besoins, tels que l'ajustement de la taille de la police, de la couleur, etc. En général, le style des tableaux peut rendre la page plus colorée et plus facile à lire et à comprendre. 🎜

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!