Tabellen sind eine der häufigsten Methoden, um Informationen auf Webseiten darzustellen. Es ist oft hilfreich, eine Tabellenkappe zu haben, die auf jeder Seite angezeigt wird, insbesondere wenn die Tabelle eine große Anzahl von Zeilen enthält oder mehrere Seiten umfasst. In diesem Artikel werden wir uns ansehen, wie Sie eine Tabellenkapsel erstellen, die automatisch auf jeder Seite wiederholt wird.
Bevor Sie mit der Erstellung eines Tabellenkopfs beginnen, ist es erwähnenswert, dass Webseiten auf dem Browserbildschirm angezeigt und visuell in Seiten unterteilt werden. Der Tabellenkopf wird wie jedes andere Element auf einer Webseite nicht automatisch auf jeder Seite wiederholt. Daher müssen wir einige spezielle Techniken und CSS-Eigenschaften anwenden, um das gewünschte Ergebnis zu erzielen.
Zunächst müssen wir die Tabelle in einen Block mit fester Höhe einwickeln und die Eigenschaft festlegen overflow gleichen auto. Dadurch wird ein Bildlaufblock erstellt, wenn der Tabelleninhalt die Bildschirmhöhe überschreitet.
Dann können wir die Eigenschaft festlegen position für die Tabellenkappe gleich sticky. Bedeutung sticky legt die Position des Elements relativ zum Bildlaufkontext fest. Dies bedeutet, dass das Element beim Scrollen durch die Seite an den oberen oder unteren Rand des Blocks angehängt wird.
Schlüsselelemente der Tabellenkappe
Der Tabellenkopf ist für den Titel und die Struktur der Tabelle verantwortlich. Es enthält die Schlüsselelemente, die im Tag definiert sind . In diesem Abschnitt werden wir uns die grundlegenden Elemente ansehen, die in die Tabellenkapsel aufgenommen werden müssen:
- - tag, um eine Zeile in der Tabellenkappe zu erstellen.
- - tag, um eine Zelle im Tabellendeckel zu definieren. Im Gegensatz zu einem Tag, mit dem Zellen im Tabellenkörper definiert werden, ist das Tag für Zellen im Tabellenkopf gedacht und wird normalerweise in Fettdruck angezeigt.
Um beispielsweise eine einfache Tabellenkapsel mit drei Zellen zu erstellen, können Sie den folgenden Code verwenden:
Заголовок 1 Заголовок 2 Заголовок 3
Dieser Code erstellt eine Tabelle mit drei Zellen in der Kappe, die den Text "Überschrift 1", "Überschrift 2" und "Überschrift 3" anzeigt.
Auswählen der Schriftart und -farbe des Tabellenkopfes
Wenn Sie auf jeder Seite eine Tabellenkappe erstellen, ist es sehr wichtig, die richtige Schriftart und Farbe für den Titel auszuwählen. Dies wird dazu beitragen, die Tabelle lesbarer und für den Benutzer attraktiver zu machen.
Sie können ein Tag mit dem Attribut face verwenden, um eine Schriftart auszuwählen. Wenn Sie beispielsweise eine Arial-Schriftart auswählen möchten, verwenden Sie das folgende Konstrukt:
Заголовок таблицыSie können auch das size-Attribut hinzufügen, um die Schriftgröße festzulegen:
Заголовок таблицыSie können das color-Attribut des Tags verwenden, um die Farbe des Tabellenkopfes auszuwählen. Verwenden Sie zum Beispiel das folgende Konstrukt, um die Farbe Rot festzulegen:
Заголовок таблицыWenn Sie einen hexadezimalen Farbcode verwenden möchten (z. B. #FF0000 für Rot), können Sie das color-Attribut des Tags verwenden :
Заголовок таблицыNeben dem Tag können Sie auch CSS-Stile verwenden, um die Schriftart und die Farbe des Tabellenkopfes festzulegen. Zum Beispiel:
table th Dieser Ansatz macht es einfach, den Stil des Tabellenkopfes im gesamten Dokument mit einer allgemeinen CSS-Regel zu ändern.
Anordnung und Ausrichtung der Tabellenkappe
Sie müssen spezielle CSS-Eigenschaften und -Werte verwenden, um die Tabellenoberflächen auf jeder Seite korrekt zu platzieren und auszurichten.
Eine Möglichkeit zum Erstellen eines Tabellenoberteils, der auf jeder Seite wiederholt wird, besteht darin, die position: fixed-Eigenschaft zu verwenden; . Wenn Sie diese Eigenschaft verwenden, wird das Element am oberen Rand des Browserfensters und nicht an der Tabelle selbst "geklebt". Auf diese Weise wird der Tabellenkopf immer sichtbar, wenn Sie die Seite nach unten scrollen.
Sie können die text-align: center-Eigenschaft verwenden, um den Tabellenkopf horizontal auszurichten; . Dadurch wird der Inhalt der Kappenzellen zentriert.
Sie können die vertical-align: middle; -Eigenschaft verwenden, um die Tabellenkapsel vertikal auszurichten, um den Inhalt der Tabellenzellen zentriert auszurichten.
| Заголовок 1 | Заголовок 2 | Заголовок 3 |
|---|---|---|
| Ячейка 1 | Ячейка 2 | Ячейка 3 |
| Ячейка 4 | Ячейка 5 | Ячейка 6 |
Dieser Code erstellt eine Tabelle mit einer auf jeder Seite wiederholten Kappe, die zentriert und vertikal ausgerichtet ist.
