Auf Webseiten verwenden wir normalerweise Tabellen, um einige Daten anzuzeigen, z. B. Leistungstabellen, Finanzberichte usw. Standardmäßig ist der Stil der Tabellen jedoch nicht schön und entspricht nicht einmal dem Stil der Seite. CSS bietet Eigenschaften, mit denen Sie den Stil einer Tabelle ändern und ihr Erscheinungsbild erheblich verbessern können.
1. HTML-Tabellenrand
Im HTML-Tutorial-Teil haben wir das Border-Attribut verwendet, um die Tabelle festzulegen. Der Code lautet wie folgt:
<tableborder=1><thead><th>Name</th><th>Geschlecht</th></thead><tbody><tr><td>Zhang San</td><td>Männlich</td ></tr><tr><td>李思</td><td>Weiblich</td></tr></tbody></table>
Laufergebnisse:
Tatsächlich wird diese Methode nicht empfohlen. Denn Webdesign folgt dem Prinzip, dass HTML Inhalte darstellt, während CSS den Stil beschreibt.
Bei Tabellen ist der Inhalt der Tabelle der Text in den Zeilen und Spalten, und der Rahmen dient der Verschönerung des Erscheinungsbilds der Tabelle und gehört zum Stilteil, sodass er besser für die Beschreibung mit CSS geeignet ist.
2. Rahmen der CSS-Einstellungstabelle
Sie können CSS-Rahmen verwenden, um den Rahmen für die Tabelle festzulegen. Der Code lautet wie folgt:
<!DOCTYPEhtml><html><head><style>table{float:left;}.table_one{border-collapse:separate;}.table_two{margin-left:20px;border-co llapse:collapse;}</style></head><body><tableclass=table_oneborder=1><tr><th>Nummer</th><th>Name</th><th>Alter</th> </tr><tr><td>1</td><t d>Zhang San</td><td>15</td></tr><tr><td>2</td><td>Li Si</td><td>11</td></ tr></table><tableclass=table_twoborder=1px><tr><th>Nummer</th><th>Nachname Name</th><th>Alter</th></tr><tr><td>1</td><td>Zhang San</td><td>15</td></tr>< tr><td>2</td><td>李思</td><td>11</td></tr></table></body></html>Die Laufergebnisse sind wie folgt:
(1) Tabellenlayout: Legen Sie den Layoutalgorithmus der Tabelle fest. Es gibt zwei Layoutalgorithmen, nämlich den festen Tabellenlayoutalgorithmus und den automatischen Tabellenlayoutalgorithmus.
(2) border-collapse: Legen Sie fest, ob die Ränder der Zellen in der Tabelle gemäß dem Standard-HTML-Stil zusammengeführt oder getrennt werden.
(3) Randabstand: Legen Sie den horizontalen und vertikalen Abstand zwischen zwei benachbarten Rändern fest, wenn die Tabellenränder getrennt sind.
(4) Beschriftungsseite: Legen Sie die Position des Tabellentitels relativ zur Tabelle fest.
(5) Leere Zellen: Legen Sie fest, ob der Rand der Zelle angezeigt werden soll, wenn sich in der Zelle der Tabelle kein Inhalt befindet.