Zum Hauptinhalt springen

So erstellen Sie eine Jahresausgabetabelle auf Ihrer Website und helfen Benutzern, die benötigten Informationen leicht zu finden

HTML ist eine Markup-Sprache, mit der Sie strukturierte Inhalte für Webseiten erstellen können. Eines der am häufigsten verwendeten HTML-Elemente ist die Tabelle. Tabellen können verwendet werden, um Daten unterschiedlicher Struktur darzustellen, und eine der häufigsten Abfragen eines Webentwicklers besteht darin, das aktuelle Jahr in einer Tabelle anzuzeigen.

Es gibt mehrere Möglichkeiten, das Jahr mithilfe von HTML in eine Tabelle zu schreiben. Die einfachste und gebräuchlichste Methode besteht darin, ein Tag zum Erstellen einer Tabelle und eines Tags zum Einfügen von Daten in eine Tabellenzelle zu verwenden.

In HTML kann JavaScript verwendet werden, um das aktuelle Jahr dynamisch zu berechnen und anzuzeigen. Um dies zu tun, können Sie JavaScript-Code zum Block hinzufügen und die Methode verwenden Date() um das aktuelle Jahr zu erhalten. Dann können Sie verwenden innerHTML um ein Jahr in eine Tabellenzelle einzufügen.

Datenaufbereitung

Bevor Sie das Jahr in eine Tabelle einfügen, müssen Sie die Daten für die Anzeige vorbereiten. Führen Sie dazu die folgenden Schritte aus:

1. Definition des Jahres

2. Formatieren eines Datums

Um das Jahr in einer Tabelle anzuzeigen, müssen Sie das Datum entsprechend dem gewünschten Format formatieren. Sie können beispielsweise eine Funktion verwenden toLocaleDateString() zum Konvertieren eines Datums in ein Zeichenfolgenformat unter Berücksichtigung der Gebietsschemaeinstellungen.

3. Datenerzeugung

Abrufen des aktuellen Jahres

Sie können die Programmiersprache JavaScript verwenden, um das aktuelle Jahr in einer Tabelle anzuzeigen. Dazu benötigen Sie den folgenden Code:

var aktuelles Jahr = new Date().getFullYear();

document.write(aktuelles Jahr);

Fügen Sie diesen Code in die Tabellenzelle ein, in der Sie das aktuelle Jahr anzeigen möchten, und führen Sie Ihre HTML-Seite aus. Als Ergebnis sehen Sie eine Anzeige des aktuellen Jahres in dieser Tabellenzelle.

Wenn Sie das aktuelle Jahr einfach auf einer Seite anzeigen möchten, ohne eine Tabelle zu verwenden, können Sie das Tag verwenden

:

Auf diese Weise können Sie das aktuelle Jahr leicht abrufen und auf Ihrer Webseite anzeigen.

Erstellen eines Datenarrays

Beispiel für die manuelle Erstellung eines Datenarrays:

const years = < year: 2015 >,< year: 2016 >,< year: 2017 >,< year: 2018 >,< year: 2019 >,< year: 2020 >];

In diesem Beispiel stellt jedes Element im Array ein Jahr dar und speichert seinen Wert in der Eigenschaft "year". Sie können weitere Jahre hinzufügen, indem Sie dem Array einfach ein neues Element hinzufügen.

Beispiel für das Erstellen eines Datenarrays mit einer Schleife:

const years = [];const currentYear = new Date().getFullYear();for (let i = 2015; i );>

In diesem Beispiel beginnt die Schleife mit dem Jahr 2015 und dauert bis zum aktuellen Jahr, das mit der Funktion "getFullYear()" definiert wird. Bei jeder Iteration der Schleife wird ein Objekt erstellt, das das Jahr enthält, und es wird dem Array "years" hinzugefügt.

Erstellen einer Tabelle

Verwenden Sie die folgende Struktur, um eine Tabelle zu erstellen:

Spaltenüberschrift 1 Spaltenüberschrift 2
Wert 1,1 Wert 1,2
Wert 2,1 Wert 2,2

Wenn Sie also eine Tabelle erstellen, müssen Sie die Anzahl der Zeilen und Spalten angeben und sie mit den entsprechenden Werten und Überschriften füllen.

Bestimmen der Tabellengröße

Beim Erstellen von Tabellen in HTML ist es wichtig, die richtigen Abmessungen für die Tabelle und ihre Zellen zu berücksichtigen und festzulegen. Dies ermöglicht es Ihnen, die Tabelle lesbarer und ästhetischer zu machen und ihr Aussehen zu verbessern.

Es gibt mehrere Möglichkeiten, die Größe einer Tabelle zu bestimmen:

1. Festlegen fester Bemaßungen

Sie können eine feste Tabellenbreite und -höhe mit CSS definieren. Attribute hinzufügen width und height für die Tabelle, um ihre Abmessungen festzulegen:

2. Verwenden von Prozentgrößen

Sie können auch die Tabellen- und Zellengrößen als Prozentsatz relativ zum übergeordneten Element definieren. Sie können beispielsweise die Tabellenbreite auf 80% der Fensterbreite festlegen:

3. Automatische Bemaßungserkennung

In einigen Fällen kann die Tabelle ihre Größe abhängig vom Inhalt automatisch ändern. Dazu können Sie ein Attribut verwenden wider für die Tabelle:

Die Art und Weise, wie eine Tabelle dimensioniert wird, hängt von den Anforderungen und Entwicklungszielen ab. Beachten Sie jedoch, dass Sie beim Festlegen der Größe der Tabelle und ihrer Zellen die Besonderheiten des Inhalts berücksichtigen müssen, der in der Tabelle platziert werden soll.

Erstellen eines Tabellenkopfes

Verwenden Sie ein Tag, um einen Tabellenkopf in HTML zu erstellen. Tabellenköpfe befinden sich normalerweise in der ersten Zeile und enthalten Spaltennamen oder Informationen über ihren Inhalt.

Im Folgenden finden Sie ein Beispiel zum Erstellen einer Tabelle mit Überschriften:

НомерНазваниеГод выпуска
1Таблица времени2025
2Таблица умножения2020

Das Ergebnis ist eine Tabelle mit drei Spalten und zwei Zeilen, in der die erste Zeile die Überschriften "Nummer", "Name" und "Baujahr" enthält.

Füllen einer Tabelle mit Daten

Sie müssen die Tags und verwenden, um die Tabelle mit Daten zu füllen.

Das Tag gibt eine Zeile in der Tabelle an, und das Tag definiert eine Zelle in der Tabelle.

   Данные 1 Данные 2   Данные 3 Данные 4  

In diesem Beispiel enthält die Tabelle 2 Zeilen und 2 Spalten. Jede Zelle enthält Daten.

Auf diese Weise können Sie eine Vielzahl von Tags verwenden, um eine Tabelle zu füllen, abhängig von der Anzahl der Zeilen und Spalten.

Sie können auch Tag-Attribute verwenden, um Stile festzulegen und Daten in einer Tabelle zu formatieren.