Wenn Sie Tabellen in Dokumenten erstellen, müssen Sie häufig große Tabellen drucken, die nicht vollständig auf eine Seite passen. Ein Problem, mit dem Benutzer konfrontiert sind, besteht darin, dass sie beim Drucken auf jeder neuen Seite die Tabellenkappe wiederholen müssen. Dies ist wichtig, um die Lesbarkeit und Struktur der Tabelle beim Drucken zu erhalten.
Glücklicherweise gibt es einfache Methoden, mit denen Sie sicherstellen können, dass der Tabellenkopf beim Drucken automatisch auf jeder Seite wiederholt wird. Eine solche Methode besteht darin, die CSS-Eigenschaft zu verwenden table-header-group Dadurch wird sichergestellt, dass die Tabellenkappe beim Drucken auf jeder Seite angezeigt wird.
Um diese Eigenschaft zu verwenden, müssen Sie sie mithilfe von CSS auf den Tabellenstil anwenden. Sie können beispielsweise den folgenden Code anwenden: table Danach wird der Tabellenkopf beim Drucken automatisch auf jeder neuen Seite wiederholt.
Mit der oben beschriebenen Methode können Sie das Problem der Wiederholung der Tabellenkappe beim Drucken leicht lösen. Ihre Tabellen werden jetzt auch beim Drucken auf mehreren Seiten ordentlich und lesbar aussehen.
Erstellen einer Tabellenkappe auf jeder Seite beim Drucken
Sie können die CSS-Eigenschaft thead und die display: table-header-group verwenden, um den Tabellenkopf auf jeder Seite zu drucken. Dadurch können Sie beim Drucken langer Tabellen eine Tabellenkappe oben auf jeder Seite befestigen.
Hier ist ein Beispielcode:
Заголовок1 Заголовок2 Заголовок3 Ячейка1 Ячейка2 Ячейка3 Ячейка1 Ячейка2 Ячейка3 Ячейка1 Ячейка2 Ячейка3
In diesem Beispiel erstellen wir eine Tabelle mit einer Kappe, die Spaltenüberschriften enthält. Das thead-Tag mit der CSS-Eigenschaft display: table-header-group ermöglicht es Ihnen, beim Drucken eine Tabellenkappe auf jeder Seite zu fixieren.
Dann erstellen wir innerhalb der Tabelle ein tbody-Tag, in dem wir die Zeilen und Zellen der Tabelle mit dem gewünschten Inhalt hinzufügen.
Wenn diese Tabelle gedruckt wird, wird die Kappe auf jeder Seite gedruckt, wodurch sie lesbarer und benutzerfreundlicher wird.
Problem beim Drucken von Tabellen
Beim Erstellen von Tabellen in HTML tritt häufig ein Druckproblem auf, wenn der Tabellenkopf nicht auf jeder Seite gedruckt wird, was das Lesen und Analysieren der Daten erschwert. Dies gilt insbesondere beim Drucken großer Tabellen, die nicht auf eine Seite passen.
Wenn Sie eine Tabelle in HTML drucken, wird die Tabellenkappe standardmäßig nur auf der ersten Seite gedruckt, während die anderen Seiten nur den Inhalt der Tabelle enthalten. Dies kann dazu führen, dass es für den Benutzer schwierig ist, die Werte in den Tabellenspalten zu definieren, die zum Verständnis des Kontexts erforderlich sind.
Mit einigen CSS-Eigenschaften können Sie dieses Problem jedoch beheben und sicherstellen, dass die Tabellenkappe auf jeder Seite gedruckt wird. Dazu müssen Sie die Eigenschaft verwenden thead und display: table-header-group die auf Tabellenelemente angewendet wird. Auf diese Weise können Sie die Tabellenkappe auf jeder gedruckten Seite wiederholen.
Um diese Lösung anzuwenden, müssen Sie zuerst das Tabellenoberflächenelement definieren ( ) im HTML-Code. In CSS-Stilen wird dann eine Eigenschaft auf dieses Element angewendet display: table-header-group. Dies teilt dem Browser mit, dass der Tabellenkopf auf jeder Seite angezeigt werden muss, wenn die Tabelle gedruckt wird.
Im Folgenden finden Sie ein Beispiel für HTML-Code und CSS-Stile, die zeigen, wie Sie das Problem beim Drucken eines Tabellenoberteils lösen können:
Заголовок столбца 1 Заголовок столбца 2 Заголовок столбца 3 Значение 1 Значение 2 Значение 3 Значение 4 Значение 5 Значение 6
theadIn diesem Beispiel enthält die Tabelle eine Kappe mit drei Spalten. Das Element der Kappe ist , die Tags enthält für jede Spaltenüberschrift. In CSS-Stilen zum Element die Eigenschaft wird angewendet display: table-header-group.
Mit dieser Lösung wird der Tabellenkopf auf jeder gedruckten Seite wiederholt, was einen besseren Druck gewährleistet und das Verständnis der Daten in der Tabelle verbessert.
Verwenden von CSS, um das Problem zu lösen
Um diese Eigenschaft auf das Tabellenoberteil anzuwenden, können wir eine separate CSS-Klasse erstellen und sie auf das entsprechende Tabellenelement anwenden. Zum Beispiel:
.sticky-header Jetzt können wir diese Klasse zu einem Tabellenelement hinzufügen:
Заголовок колонки 1 Заголовок колонки 2 Заголовок колонки 3
Wenn Sie jetzt eine Seite drucken, wird die Tabellenkappe oben auf jeder Seite angezeigt und bleibt auch dann sichtbar, wenn Sie durch den Inhalt der Tabelle blättern. Dies kann besonders nützlich sein, wenn Sie große Tabellen drucken, die nicht auf eine Seite passen.
Anmerkung: denken Sie daran, auch Stile für die anderen Tabellenelemente hinzuzufügen, damit sie beim Drucken korrekt angezeigt werden.
Hinzufügen von Stilen zu einer Tabelle
Mithilfe von Stilen können Sie das Erscheinungsbild von Elementen auf einer Webseite, einschließlich Tabellen, ändern. Mit den Attributen style und class können Sie einer Tabelle Stile hinzufügen.
Mit dem style-Attribut können Sie bestimmte Stile für ein Element festlegen. Um beispielsweise einer Tabelle eine Hintergrund- und Schriftfarbe hinzuzufügen, können Sie den folgenden Code verwenden:
Mit dem class-Attribut können Sie vordefinierte Stile verwenden. Dazu müssen Sie eine Klasse innerhalb eines Tags erstellen oder eine externe Stylesheet-Datei mit einem Tag verbinden . Weisen Sie dann die Klasse der Tabelle mithilfe des class-Attributs zu. Zum Beispiel:
.my-table
Neben der Hintergrund- und Schriftfarbe können Sie viele andere Stile für die Tabelle festlegen, z. B. Rahmen, Padding, Breite und Höhe ( width und height ) und andere. Sie können für jeden Stil einen separaten Wert in Pixeln, Prozentsätzen oder anderen Maßeinheiten festlegen.
Durch Hinzufügen von Stilen zu einer Tabelle können Sie das Erscheinungsbild der Tabelle steuern und sie leichter anzeigen und drucken lassen.
