Tartalom
- Hozzon létre egy táblázatot HTML-ben
- 1. lépés
- 2. lépés
- 3. lépés
- 4. lépés
- 5. lépés
- A naptár testreszabása
- 1. lépés
- 2. lépés
- fejnaptár {
- 3. lépés
- th naptár,
- td naptár {
- 4. lépés
- td span naptár {
Bár a táblázatok nem részesültek előnyben a weboldal elrendezésének felépítésében, a HTML-naptárak kódolásához mégis jól használhatók. A naptárak a táblázatos adatokat bizonyos módon jelenítik meg, miután dátumrácsba rendezték őket oszlopokkal, például a hét napjaival. Az extra CSS-kód fárasztó rácsot hoz létre nevekkel és számokkal, mint egy naptár. Mivel a naptár eseményeihez hely szükséges, mind a dátumok számához, mind az eseményekhez, a CSS használatával a dátumokat úgy is formázni kell, hogy mindkét információ olvasható maradjon.
Hozzon létre egy táblázatot HTML-ben
1. lépés
Hozzon létre egy táblázatot a naptár felépítéséhez. Ehhez a táblához egy hét cellás fejléc szükséges, a hét minden napjára egy. Szükség van továbbá hat sor szabályos tábla cellájának létrehozására. Másolja és illessze be a kivonatot egy weboldalra a Jegyzettömb vagy a kódszerkesztő segítségével.
| vasárnap | hétfő | kedd | szerda | csütörtök | péntek | szombat |
|---|
Ez a kód hozza létre a táblázatot és a címet. A táblázat a "naptár" nevű azonosító nevet használja arra az esetre, ha a webhely más oldalakon is használ táblákat.
2. lépés
Adjon hozzá egy pár törzscímkét a "" címke alá:
3. lépés
Másolja a következő kódot, és illessze be a "
" hatszor:Ez a kód minden sort hét cellával hoz létre, így hat közülük összeadásával a naptárban megtalálhatók lesznek az év minden hónapjára szükséges adatok.
4. lépés
Adja hozzá a dátumokat a naptárhoz a megjeleníteni kívánt hónapnak megfelelően. Forduljon egy igazi naptárhoz, és vigyázzon, ne hagyjon ki és ne ismételjen meg egy dátumot. Csatolja az egyes dátumokat a "" címkékkel, hogy később személyre szabhassa a számokat:
5. lépés
Vegye figyelembe a cellák eseményeit, amelyek releváns dátumokat tartalmaznak. Az eseményeknek a "" címkéken kívül, de a "" belül kell lenniük
’:
Halloween party!
Utolsó nap a regisztrációhoz.
A naptár testreszabása
1. lépés
Keresse meg a
A vázlat opcionális, de ez a legmegfelelőbb mód a szegélyek hozzáadására az aktuális weboldalak tábláihoz.
2. lépés
Testreszabhatja a táblázat címét a betűk színével, a háttér pedig egy másikkal:
fejnaptár {
szín: #ffffff; háttérszín: sötétkék; betű súlya: félkövér; }
Lehetőség van hexadecimális kód vagy a színek nevének használatára. Ez a cím fehér szöveget fog megjeleníteni sötétkék alapon.
3. lépés
Kitöltés, szegélyek, szélesség és elhelyezkedés a táblázat celláihoz képest:
th naptár,
td naptár {
párnázás: 20px; szegély: 1px egyszínű fekete; szélesség: 100px; pozíció: rokon; }
A relatív elhelyezés lehetővé teszi a programozó számára, hogy később dátumokat számok formájában helyezzen el a táblázat celláinak sarkaiba. Ne állítson be magasságot, mert ez korlátozza, hogy mennyi szöveget adhat hozzá bármely dátumhoz.
4. lépés
Hozza létre a számokat a kitöltés, a háttérszín és az abszolút pozicionálás segítségével:
td span naptár {
betű súlya: félkövér; pozíció: abszolút; alsó: 0; jobbra: 0; kijelző: blokk; párnázás: 5px; háttérszín: #eeeeee; }
Meg kell adnia a "display: block" elemet, hogy a "" címkék mezőként működjenek a weboldalon, különben nem fogja tudni kitölteni őket. Ez a mintakód egy halvány szürke mezőt hoz létre az egyes dátumterek bal alsó sarkában, megjelenítve a dátum számát.