table de configuration CSS

CSS est un langage utilisé pour contrôler le style des pages Web. Il peut modifier divers éléments tels que les couleurs, les polices, la mise en page, etc. Les tableaux sont l'un des éléments les plus courants dans la conception Web, et CSS offre un moyen flexible de nous aider à définir des styles précis pour les tableaux.

Voici un exemple :

<table>
  <thead>
    <tr>
      <th>姓名</th>
      <th>性别</th>
      <th>年龄</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>张三</td>
      <td>男</td>
      <td>28</td>
    </tr>
    <tr>
      <td>李四</td>
      <td>女</td>
      <td>31</td>
    </tr>
    <tr>
      <td>王五</td>
      <td>男</td>
      <td>25</td>
    </tr>
  </tbody>
</table>

Définissez les styles du tableau via CSS :

/* 表格样式 */
table {
  border-collapse: collapse; /* 合并边框 */
  width: 100%; /* 宽度自适应 */
  margin: 20px 0; /* 留出一定的边距 */
  font-size: 16px; /* 字体大小 */
}

/* 表头样式 */
thead {
  background-color: #f2f2f2; /* 背景颜色 */
  font-weight: bold; /* 字体加粗 */
}

/* 表格单元格样式 */
td, th {
  border: 1px solid #ddd; /* 边框样式 */
  padding: 8px; /* 内边距 */
  text-align: left; /* 文字对齐方式 */
  width: 33.33%; /* 列宽自动平均分配 */
}

/* 鼠标悬浮样式 */
tr:hover {
  background-color: #f5f5f5; /* 背景颜色 */
}

Grâce au code CSS ci-dessus, nous définissons quelques styles de base pour le tableau :

• Fusionnez les bordures du tableau pour rendre le tableau plus net et plus beau ;
• Mettez en gras l'en-tête du tableau et définissez la couleur d'arrière-plan pour le rendre clairement différent des données ;
•  Définissez la bordure des cellules du tableau, le remplissage et la hauteur des lignes pour rendre le tableau plus lisible et compréhensible ; survoler avec la souris La couleur rend les tableaux plus interactifs.
• En plus des styles de base ci-dessus, CSS fournit également davantage de styles pouvant être utilisés pour la conception et la mise en page des tableaux, qui peuvent être sélectionnés et appliqués en fonction de vos propres besoins.

En bref, CSS est l'un des outils importants pour la conception Web. La maîtrise de la syntaxe de base et des propriétés communes du CSS est cruciale pour concevoir des tableaux magnifiques, faciles à lire et compréhensibles.

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!