So gestalten Sie eine Tabelle mit CSS

Im Webdesign sind Tabellen eines der am häufigsten verwendeten Elemente. Durch den Einsatz von Tabellen können wir Informationen und Daten besser darstellen. Wenn Sie jedoch bei der Verwendung von Tabellen keine Stile festlegen, erscheint die Seite eintönig und langweilig, was der Informationsvermittlung nicht förderlich ist. Daher zeigt Ihnen dieser Artikel, wie Sie eine Tabelle mit CSS formatieren.

1. Legen Sie den Grundstil der Tabelle fest

Wir können das Tabellen-Tag verwenden, um die Tabelle zu definieren, und dann CSS verwenden, um ihren Stil festzulegen. Das Folgende ist ein Codebeispiel der grundlegendsten Tabelle:

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

Dieser Code definiert eine Tabelle mit zwei Spalten und drei Zeilen. Die obere Zeile ist die Kopfzeile und die unteren beiden Zeilen sind der Tabelleninhalt. Als Nächstes können wir grundlegende Stile für die Tabelle festlegen, z. B. Tabellenränder, Zellenauffüllung und den Abstand zwischen Zellen (Zellenabstand).

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

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

Im obigen Code haben wir border-collapse: collapse verwendet, um die Tabellenränder zusammenzuführen und sie übersichtlicher aussehen zu lassen. border-spacing: 0 setzt den Abstand zwischen Zellen auf 0, wodurch die Tabelle kompakter aussieht. Wenn Sie width: 100% festlegen, passt sich die Tabelle an die Größe des Browserfensters an. Als nächstes verwenden wir den Selektor th,td, um die Zelle zu formatieren. Durch die Einstellung padding: 8px kann die Füllgröße der Zelle angepasst werden, um den Tabelleninhalt schöner zu machen. Legen Sie border: 1px solid #ccc fest, um einen Rahmen für die Zelle festzulegen. Hier wird die graue Farbe (#ccc) verwendet. 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

Stil für Tabellenkopfzeilen festlegen
🎜Der Tabellenkopf ist ein wichtiger Teil der Tabelle und wird normalerweise als <th>-Element markiert. Wir können den Tabellenkopf individuell gestalten. 🎜rrreee🎜Im obigen Code verwenden wir background-color: #f2f2f2, um die Hintergrundfarbe der Tabellenüberschrift festzulegen. Durch das Festlegen von font-weight:bold kann der Text der Kopfzeile fett dargestellt werden und dadurch besser hervorstechen. Verwenden Sie text-align: left, um den Kopfzeilentext linksbündig auszurichten. 🎜
🎜Abwechselnde Zeilenstile der Tabelle festlegen🎜🎜🎜Um die Tabelle leichter lesbar zu machen, können wir abwechselnde Stile für die ungeraden und geraden Zeilen der Tabelle festlegen. 🎜rrreee🎜Im obigen Code verwenden wir den Pseudoklassenselektor nth-child(even), um die geraden Zeilen der Tabelle auszuwählen, und setzen dann ihre Hintergrundfarbe auf Grau (#f2f2f2). 🎜
🎜Stil für den Tabellen-Mouseover-Status festlegen🎜🎜🎜Wenn sich die Maus über einer Tabellenzeile befindet, können wir verschiedene Stile dafür festlegen, um die Interaktivität zu erhöhen. 🎜rrreee🎜Im obigen Code haben wir den Pseudoklassenselektor hover verwendet, um die Mouseover-Zeile auszuwählen und dann deren Hintergrundfarbe auf Grau (#ddd) zu setzen. 🎜🎜Durch die oben genannten Schritte können wir Stile für den Tisch festlegen, um ihn schöner und übersichtlicher zu machen. Natürlich können wir je nach Bedarf auch weitere Stileinstellungen vornehmen, wie z. B. die Anpassung von Schriftgröße, Farbe usw. Im Allgemeinen kann die Tabellengestaltung dazu führen, dass die Seite farbenfroher und leichter lesbar und verständlich wird. 🎜

Das obige ist der detaillierte Inhalt vonSo gestalten Sie eine Tabelle mit CSS. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!