Tabellen-CSS festlegen

In der Webentwicklung ist eine Tabelle ein gängiges HTML-Element, das normalerweise zur Darstellung von Daten oder Informationen verwendet wird. Um die Tabelle schöner und lesbarer zu machen, können wir sie über CSS-Stile anpassen. In diesem Artikel werde ich vorstellen, wie man den CSS-Stil einer Tabelle festlegt.

1. Grundlegende Stileinstellungen tbody ) können wir verschiedene Stile festlegen. Wie unten gezeigt:

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

2. Erweiterte Stileinstellungen

Tabellen-Zebrastreifen-Stileinstellungen

2. Sie können CSS verwenden, um die geraden und ungeraden Zeilen der Tabelle zur einfachen Unterscheidung mit unterschiedlichen Hintergrundfarben zu versehen.

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

Einstellungen für die Textausrichtung und den Zeilenumbruch in der Tabelle

Die Textausrichtung und der Textumbruch in der Tabelle können auch über CSS festgelegt werden.

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

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

Stileinstellung für das Zusammenführen von Tabellenzellen

1. Wie im Bild unten gezeigt, können wir zwei Zellen der Tabelle zusammenführen, um eine komplexere Datendarstellung anzuzeigen.

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

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

Das Obige ist eine Einführung in verschiedene Methoden zum Festlegen von Tabellen-CSS-Stilen. Ich hoffe, dass es für alle hilfreich sein kann. Durch den flexiblen Einsatz von CSS können wir verschiedene Stile und visuelle Effekte für Tabellen präsentieren, wodurch die Seite schöner und leichter lesbar wird.

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