Eine Dropdown-Liste mit Werten in Tabellenzellen kann ein sehr nützliches Werkzeug zum Organisieren von Daten sein. Es ermöglicht dem Benutzer, einen einzelnen Wert aus einem bestimmten Satz auszuwählen, was die Eingabe von Informationen vereinfacht und mögliche Fehler verhindert.
Verwenden Sie ein Element, um eine Dropdown-Liste mit Werten in Tabellenzellen zu erstellen select mit seinen untergeordneten Elementen option. Jedes Element option gibt einen einzelnen Wert an, der vom Benutzer ausgewählt werden kann. Sie können einen Standardwert mithilfe eines Attributs festlegen selected für eines der Elemente option.
Um eine Dropdown-Liste mit Werten zu einer Tabellenzelle hinzuzufügen, müssen Sie einfach ein Element einfügen select innerhalb des Tags td. Sie können die Breite und Höhe der Liste mithilfe von Attributen festlegen size und width. Sie können auch eine Mehrfachauswahl festlegen, indem Sie ein Attribut hinzufügen multiple zum Element select. Zum Beispiel:
Jetzt haben Sie grundlegende Anweisungen, wie Sie Tabellenzellen eine Dropdown-Liste mit Werten erstellen können. Sie können es nach Belieben anpassen, indem Sie Attribute und Stile hinzufügen, die Ihren Anforderungen entsprechen.
Wie implementiere ich eine Dropdown-Liste für Zellen
Schritt 1: Erstellen Sie ein HTML-Tag select innerhalb einer Tabellenzelle.
Schritt 2: Fügen Sie mehrere HTML-Tags hinzu option innerhalb des Tags select um die Werte der Dropdown-Liste zu definieren.
Schritt 3: Definieren Sie den Standardwert, indem Sie ein Attribut hinzufügen selected zu einem der Tags option.
Ein Beispiel:
Schritt 4: Fügen Sie CSS-Stile hinzu, um das Erscheinungsbild der Dropdown-Liste anzupassen, indem Sie Farben, Schriftarten, Größen und andere Eigenschaften ändern.
Mithilfe der oben beschriebenen Schritte können Sie eine Dropdown-Liste für Zellen implementieren und Benutzern eine Auswahl aus verschiedenen Werten geben.
Erstellen einer Liste in einer Zelle
Sie können Tags verwenden, um eine Liste in einer Tabellenzelle zu erstellen select und option. Kennung select erstellt eine Dropdown-Liste und ein Tag option legt die Werte für diese Liste fest.
Sie können einer Liste eine beliebige Anzahl von Werten hinzufügen, indem Sie die Tags einfach wiederholen option. Der Wert jedes Listenelements wird durch ein Attribut festgelegt value und der angezeigte Text liegt zwischen dem öffnenden und dem schließenden Tag option.
Nachdem Sie eine Liste zu einer Tabellenzelle hinzugefügt haben, können Sie CSS verwenden, um das Erscheinungsbild zu ändern, z. B. die Hintergrundfarbe, die Textfarbe usw. zu ändern.
Jetzt wissen Sie, wie Sie eine Werteliste in einer Tabellenzelle mit HTML und CSS erstellen!
So verbinden Sie Stile mit einer Liste
Sie können CSS verwenden, um einer Liste in einem HTML-Dokument Stile hinzuzufügen. Sie können Stile sowohl innerhalb eines Dokuments als auch in einer separaten CSS-Datei festlegen.
Beispiel für interne Stile für eine Liste:
Beispiel für das Verbinden einer externen Stildatei mit einer Liste:
Ein Beispiel für den Inhalt einer Styles-Datei.css:
Wenn Sie Stile auf eine Liste anwenden, sind die Marker rund, die Textfarbe rot und die Schriftgröße beträgt 18 Pixel.
Dadurch können Sie Stile in einem HTML-Dokument mit einer Liste verknüpfen, um das Erscheinungsbild zu ändern und es für Benutzer stilisierter und ansprechender zu machen.
Festlegen der Sichtbarkeit der Liste
Verwenden Sie CSS, um die Sichtbarkeit der Werteliste in der Dropdown-Liste der Zellen anzupassen.
Dazu können Sie die Pseudoklasse :hover verwenden, mit der Sie den Stil eines Elements ändern können, wenn Sie den Mauszeiger darüber bewegen.
Wenn Sie beispielsweise eine Werteliste anzeigen möchten, wenn Sie sich über eine Tabellenzelle bewegen, können Sie den folgenden CSS-Stil festlegen:
\
Hier.cell ist eine Tabellenzellenklasse sowie .dropdown-liste ist eine Dropdown-Wertelistenklasse. Wenn der Cursor über eine Zelle mit einer Klasse bewegt wird .cell, dann ein Element mit einer Klasse .die Dropdown-Liste wird durch das Blockelement angezeigt.
Wenn Sie also über eine Zelle schweben, wird eine Dropdown-Liste mit Werten angezeigt.
Es ist wichtig sich daran zu erinnern, dass die Werteliste standardmäßig ausgeblendet werden muss, damit diese Funktion ordnungsgemäß funktioniert, z. B. mit der Eigenschaft display: none; in CSS.
Hinzufügen von Werten zu einer Liste
Um Werte zur Dropdown-Liste hinzuzufügen, müssen Sie die Tags innerhalb des Tags verwenden . Jedes Element in der Liste muss mit dem value-Attribut einen Wert angeben, und der angezeigte Text muss zwischen den öffnenden und den schließenden Tags platziert werden.
Ein Beispiel:
In diesem Beispiel enthält die Dropdown-Liste drei Werte: "Wert 1", "Wert 2" und "Wert 3". Wenn Sie eine der Optionen auswählen, wird der ausgewählte Wert in der entsprechenden Zelle angezeigt.
Platzieren einer Liste in einer Zelle
Um eine Liste in einer Tabellenzelle in HTML zu platzieren, müssen Sie die entsprechenden Tags und Attribute verwenden.
Innerhalb des Tags
es wird eine Zeile () mit Zellen erstellt (
Verwenden Sie ein Tag, um eine Liste innerhalb einer Zelle zu erstellen
