CSS-Einstellungstabelle

CSS ist eine Sprache zur Steuerung des Stils von Webseiten. Sie kann verschiedene Elemente wie Farben, Schriftarten, Layout usw. in Webseiten ändern. Tabellen sind eines der häufigsten Elemente im Webdesign und CSS bietet eine flexible Möglichkeit, uns dabei zu helfen, präzise Stile für Tabellen festzulegen.

Hier ist ein Beispiel:

<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>

Legen Sie Stile für die Tabelle über CSS fest:

/* 表格样式 */
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; /* 背景颜色 */
}

Mit dem obigen CSS-Code legen wir einige grundlegende Stile für die Tabelle fest:

• Fügen Sie die Tabellenränder zusammen, damit die Tabelle übersichtlicher und übersichtlicher aussieht schöner;
• Machen Sie den Tabellenkopf fett und legen Sie die Hintergrundfarbe fest, damit er sich deutlich von den Daten unterscheidet.
• Legen Sie den Tabellenzellenrand, den Abstand und die Zeilenhöhe fest, um die Tabelle besser lesbar und verständlich zu machen Durch Bewegen der Maus mit der Farbe werden Tabellen interaktiver.
• Zusätzlich zu den oben genannten Grundstilen bietet CSS auch weitere Stile, die für die Tabellengestaltung und das Layout verwendet werden können und die je nach Ihren eigenen Bedürfnissen ausgewählt und angewendet werden können.

Kurz gesagt ist CSS eines der wichtigsten Werkzeuge für das Webdesign. Die Beherrschung der grundlegenden Syntax und der allgemeinen Eigenschaften von CSS ist entscheidend für die Gestaltung schöner, leicht lesbarer und verständlicher Tabellen.

Das obige ist der detaillierte Inhalt vonCSS-Einstellungstabelle. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!