Définir le tableau CSS

Dans le développement Web, un tableau est un élément HTML courant, généralement utilisé pour présenter des données ou des informations. Afin de rendre le tableau plus beau et plus facile à lire, nous pouvons le personnaliser grâce aux styles CSS. Dans cet article, je vais vous présenter comment définir le style CSS du tableau.

1. Paramètres de style de base

1. Paramètres de style de bordure de tableau

table {
  border-collapse: collapse;  /*合并单元格边框*/
  border: 1px solid #ddd;  /*设置边框样式*/
}

2. Largeur et hauteur du tableau Définissez

table {
  width: 100%; /*设置表格的宽度*/
  height: auto; /*设置表格的高度*/
}

3. Paramètres de style d'en-tête et de contenu du tableau

dans l'en-tête du tableau (thead) et le contenu du tableau (tbody) , nous pouvons définir différents styles. Comme indiqué ci-dessous :

table thead th {
  background-color: #f2f2f2; /*设置表头背景色*/
  font-weight: bold; /*设置表头字体加粗*/
}

table tbody td {
  padding: 10px; /*设置单元格内边距*/
}

2. Paramètres de style avancés

1. Réglage du style de passage piéton de la table

peut être effectué via CSS Pour que les lignes paires et impaires du tableau aient des couleurs d'arrière-plan différentes pour une différenciation facile.

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

table tr:nth-child(odd) {
  background-color: #fff; /*设置奇数行背景色*/
}

2. Paramètres d'alignement du texte et de retour à la ligne du tableau

L'alignement et le retour à la ligne du texte dans le tableau peuvent également être définis via CSS.

table th {
  text-align: center; /*设置表头文字居中对齐*/
}

table td {
  text-align: left; /*设置表格内容文字左对齐*/
  white-space: nowrap; /*设置文本不换行*/
}

3. Paramètre du style de fusion des cellules du tableau

Comme le montre la figure ci-dessous, nous pouvons fusionner deux cellules du tableau pour afficher des manières plus complexes de présentation des données.

<table>
  <tr>
    <td rowspan="2">合并单元格</td>
    <td>第一行第二列</td>
    <td>第一行第三列</td>
  </tr>
  <tr>
    <td colspan="2">第二行合并单元格</td>
  </tr>
</table>

Ce qui précède est une introduction à plusieurs méthodes de définition de style CSS de tableau. J'espère que cela pourra être utile à tout le monde. Grâce à l'utilisation flexible du CSS, nous pouvons présenter différents styles et effets visuels pour les tableaux, rendant la page plus belle et plus 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!