Obsah
- Vytvořte tabulku v HTML
- Krok 1
- Krok 2
- Krok 3
- Krok 4
- Krok 5
- Přizpůsobte si kalendář
- Krok 1
- Krok 2
- thead kalendář {
- Krok 3
- tý kalendář
- td kalendář {
- Krok 4
- kalendář td span {
Ačkoli tabulky upadly v nemilost, pokud jde o vytváření rozvržení webových stránek, stále fungují dobře pro kódování HTML kalendářů. Kalendáře zobrazují tabulková data určitým způsobem, jakmile jsou uspořádána do mřížky dat se sloupci pojmenovanými například podle dnů v týdnu. Díky extra kódu CSS bude nudná mřížka se jmény a čísly spíš jako kalendář. Vzhledem k tomu, že události v kalendáři potřebují prostor, a to jak pro počet dat, tak pro události, bude také nutné použít formát CSS k formátování dat takovým způsobem, aby obě informace zůstaly čitelné.
Vytvořte tabulku v HTML
Krok 1
Vytvořte tabulku pro strukturování kalendáře. Tato tabulka vyžaduje záhlaví se sedmi buňkami, jednou pro každý den v týdnu. Je také nutné vytvořit šest řádků pravidelných buněk tabulky. Zkopírujte a vložte výňatek na webovou stránku pomocí programu Poznámkový blok nebo editoru kódu.
| Neděle | pondělí | úterý | středa | Čtvrtek | pátek | sobota |
|---|
Tento kód vytvoří tabulku a nadpis. Tabulka používá identifikační název s názvem „kalendář“ v případě, že web používá tabulky na jiných stránkách.
Krok 2
Pod značku „“ přidejte pár značek těla:
Krok 3
Zkopírujte následující kód a vložte jej mezi
" šestkrát:Tento kód vytvoří každý řádek se sedmi buňkami, takže přidáním šesti z nich bude mít kalendář všechny datové prostory, které potřebujete pro všechny měsíce roku.
Krok 4
Přidejte do kalendáře data podle měsíce, který chcete zobrazit. Nahlédněte do skutečného kalendáře a dávejte pozor, abyste datum nevynechali nebo neopakovali. Každé datum uzavřete značkami „“, abyste si čísla mohli později upravit:
Krok 5
Všimněte si událostí v buňkách, které obsahují relevantní data. Události musí být mimo značky „“, ale uvnitř značky „“
’:
Halloweenská párty!
Poslední den registrace.
Přizpůsobte si kalendář
Krok 1
Vyhledejte „
Obrys je volitelný, ale toto je nejvhodnější způsob přidání okrajů do tabulek na aktuálních webových stránkách.
Krok 2
Přizpůsobte název tabulky barvou písmen a jinou barvou pozadí:
thead kalendář {
barva: #ffffff; barva pozadí: darkblue; váha písma: tučné; }
Je možné použít hexadecimální kód nebo název barev. Tento nadpis zobrazí bílý text na tmavě modrém pozadí.
Krok 3
Výplň, ohraničení, šířka a poloha vzhledem k buňkám tabulky:
tý kalendář
td kalendář {
výplň: 20px; okraj: 1px černá; šířka: 100px; pozice: relativní; }
Relativní umístění umožňuje programátorovi později umístit data v podobě čísel do rohů buněk tabulky. Nenastavujte výšku, protože tím omezíte, kolik textu můžete přidat k libovolnému datu.
Krok 4
Vytvořte čísla pomocí výplně, barvy pozadí a absolutního umístění:
kalendář td span {
váha písma: tučné; pozice: absolutní; dole: 0; vpravo: 0; displej: blok; výplň: 5px; barva pozadí: #eeeeee; }
Musíte zahrnout "display: block", aby značky "" fungovaly jako pole na webové stránce, jinak je nebudete moci vyplnit. Tento ukázkový kód vytvoří v levém dolním rohu každého datového prostoru slabé šedé pole se zobrazením čísla data.