Rozevírací seznam hodnot v buňkách tabulky může být velmi užitečným nástrojem pro organizaci dat. Umožňuje uživateli vybrat jednu hodnotu z dané sady, což usnadňuje zadávání informací a zabraňuje možným chybám.
Chcete-li vytvořit rozevírací seznam hodnot v buňkách tabulky, musíte použít položku select s jeho dceřinými prvky option. Každý prvek option určuje samostatnou hodnotu, kterou může uživatel zvolit. Výchozí hodnotu lze nastavit pomocí atributu selected pro jeden z prvků option.
Chcete-li přidat rozevírací seznam hodnot do buňky tabulky, stačí umístit položku select uvnitř značky td. Můžete nastavit šířku a výšku seznamu pomocí atributů size a width. Kromě toho lze nastavit více možností přidáním atributu multiple k prvku select. Například:
Nyní máte základní pokyny, jak vytvořit buňkám tabulky rozevírací seznam hodnot. Můžete si jej přizpůsobit, jak chcete, přidáním atributů a stylů, které vyhovují vašim potřebám.
Jak implementovat rozevírací seznam pro buňky
Krok 1: Vytvořte značku HTML select uvnitř buňky tabulky.
Krok 2: Přidejte více značek HTML option uvnitř značky select pro určení hodnot rozevíracího seznamu.
Krok 3: Definujte výchozí hodnotu přidáním atributu selected k jedné ze značek option.
Příklad:
Krok 4: Přidejte styly CSS pro přizpůsobení vzhledu rozevíracího seznamu změnou barev, písem, velikostí a dalších vlastností.
Pomocí výše uvedených kroků budete moci implementovat rozevírací seznam buněk a uživatelům poskytnout výběr z různých hodnot.
Vytvoření seznamu v buňce
K vytvoření seznamu v buňce tabulky lze použít značky select a option. Tag select vytvoří rozevírací seznam a štítek option nastavuje hodnoty pro tento seznam.
Do seznamu můžete přidat libovolný počet hodnot pouhým opakováním značek option. Hodnota každé položky seznamu je dána atributem value a zobrazený text je mezi otevíracím a zavíracím tagem option.
Po přidání seznamu do buňky tabulky můžete použít CSS ke změně jeho vzhledu, jako je změna barvy pozadí, barvy textu atd.
Nyní víte, jak vytvořit seznam hodnot v buňce tabulky pomocí HTML a CSS!
Připojení stylů k seznamu
Chcete-li přidat styly do seznamu v dokumentu HTML, můžete použít CSS. Styly lze nastavit jak uvnitř dokumentu, tak v samostatném souboru CSS.
Příklad Interních stylů pro seznam:
Příklad připojení externího souboru stylů k seznamu:
Příklad obsahu souboru styles.css:
V důsledku použití stylů na seznam budou jeho značky kulaté, barva textu bude červená a velikost písma bude 18 Pixelů.
Připojení stylů k seznamu v dokumentu HTML vám tedy umožňuje změnit jeho vzhled a učinit jej stylizovanějším a přitažlivějším pro uživatele.
Nastavení viditelnosti seznamu
Chcete-li upravit viditelnost seznamu hodnot v rozevíracím seznamu buněk, měli byste použít CSS.
K tomu můžete použít pseudoklass: hover, který vám umožní změnit styl prvku, když na něj umístíte kurzor myši.
Chcete-li například zobrazit seznam hodnot, když najedete na buňku tabulky, můžete nastavit následující styl CSS:
\
Zde .cell-třída buňky tabulky, a .dropdown - list je třída rozevíracího seznamu hodnot. Když je kurzor namířen na buňku se třídou .cell, pak prvek s třídou .dropdown-list se zobrazí jako blokový prvek.
Tímto způsobem se po najetí na buňku zobrazí rozevírací seznam hodnot.
Je důležité si uvědomit, že pro správnou funkci musí být seznam hodnot ve výchozím nastavení skrytý, například pomocí vlastnosti display: none; v CSS.
Přidání hodnot do seznamu
Chcete-li přidat hodnoty do rozevíracího seznamu, musíte použít značky uvnitř značky . Každá položka seznamu musí nastavit hodnotu pomocí atributu value a zobrazený text umístit mezi úvodní a zavírací značky .
Příklad:
V tomto příkladu bude rozbalovací seznam obsahovat tři hodnoty:" hodnota 1"," hodnota 2 "a"hodnota 3". Při výběru jedné z možností se v příslušné buňce zobrazí vybraná hodnota.
Umístění seznamu do buňky
Chcete-li umístit seznam do buňky tabulky v HTML, musíte použít příslušné značky a atributy.
Uvnitř značky
vytvoří se řetězec () s buňkami (
K vytvoření seznamu uvnitř buňky byste měli použít značku