Obsah
- Vytvorte tabuľku v HTML
- Krok 1
- Krok 2
- Krok 3
- Krok 4
- Krok 5
- Prispôsobte si kalendár
- Krok 1
- Krok 2
- kalendár hláv
- Krok 3
- th kalendár,
- kalendár td
- Krok 4
- kalendár td span {
Aj keď tabuľky prestali byť v obľube, pokiaľ ide o vytváranie rozložení webových stránok, na kódovanie HTML kalendárov stále fungujú dobre. Kalendáre zobrazujú tabuľkové údaje určitým spôsobom, hneď ako sú usporiadané do mriežky s dátumami so stĺpcami, napríklad s dňami v týždni. Vďaka extra kódu CSS bude nudná mriežka s menami a číslami pripomínať kalendár. Pretože udalosti v kalendári potrebujú priestor, čo sa týka počtu dátumov aj udalostí, bude tiež potrebné použiť formát CSS na formátovanie dátumov tak, aby boli obidve informácie čitateľné.
Vytvorte tabuľku v HTML
Krok 1
Vytvorte tabuľku na usporiadanie kalendára. Táto tabuľka vyžaduje hlavičku so siedmimi bunkami, jednu pre každý deň v týždni. Je tiež potrebné vytvoriť šesť riadkov pravidelných buniek tabuľky. Skopírujte a prilepte výňatok na webovú stránku pomocou programu Poznámkový blok alebo editora kódu.
| Nedeľa | Pondelok | Utorok | Streda | Štvrtok | Piatok | Sobota |
|---|
Tento kód vytvorí tabuľku a nadpis. V prípade, že webová stránka používa tabuľky na iných stránkach, tabuľka používa identifikačný názov s názvom „kalendár“.
Krok 2
Pod značku „“ pridajte pár značiek tela:
Krok 3
Skopírujte nasledujúci kód a vložte ho medzi znak „
" šesťkrát:Tento kód vytvorí každý riadok so siedmimi bunkami, takže po pridaní šiestich z nich bude mať kalendár všetky údajové priestory, ktoré potrebujete pre všetky mesiace v roku.
Krok 4
Pridajte do kalendára dátumy podľa mesiaca, ktorý chcete zobraziť. Nahliadnite do skutočného kalendára a dávajte pozor, aby ste nepreskočili alebo neopakovali dátum. Priložte každý dátum k značkám „“, aby ste mohli neskôr prispôsobiť čísla:
Krok 5
Všimnite si udalosti v bunkách, ktoré obsahujú príslušné dátumy. Udalosti musia byť mimo značiek „“, ale vnútri „“
’:
Halloweenska Párty!
Posledný deň registrácie.
Prispôsobte si kalendár
Krok 1
Nájdite „
Osnova je voliteľná, ale toto je najvhodnejší spôsob pridávania okrajov do tabuliek na aktuálnych webových stránkach.
Krok 2
Prispôsobte názov tabuľky farbou pre písmená a druhou pre pozadie:
kalendár hláv
farba: #ffffff; farba pozadia: darkblue; váha písma: tučné; }
Je možné použiť hexadecimálny kód alebo názov farieb. Tento nadpis bude zobrazovať biely text na tmavomodrom pozadí.
Krok 3
Výplň, orámovanie, šírka a umiestnenie vo vzťahu k bunkám tabuľky:
th kalendár,
kalendár td
výplň: 20px; okraj: 1px čierna čierna; šírka: 100px; poloha: relatívna; }
Relatívne umiestnenie umožňuje programátorovi neskôr umiestniť dátumy vo forme čísel do rohov buniek tabuľky. Nenastavujte výšku, pretože tým obmedzíte množstvo textu, ktoré môžete pridať k ľubovoľnému dátumu.
Krok 4
Čísla vytvorte pomocou výplne, farby pozadia a absolútneho umiestnenia:
kalendár td span {
váha písma: tučné; pozícia: absolútna; dole: 0; vpravo: 0; displej: blok; výplň: 5px; farba pozadia: #eeeeee; }
Musíte zahrnúť reťazec „display: block“, aby značky „“ fungovali ako polia na webovej stránke, inak ich nebudete môcť vyplniť. Tento vzorový kód vytvorí v ľavom dolnom rohu každého datového priestoru slabo sivé políčko so zobrazením čísla dátumu.