Sadržaj
- Stvorite tablicu u HTML-u
- Korak 1
- Korak 2
- 3. korak
- 4. korak
- Korak 5
- Prilagodite kalendar
- Korak 1
- Korak 2
- thead kalendar {
- 3. korak
- peti kalendar,
- td kalendar {
- 4. korak
- td span kalendar {
Iako su tablice pale u nemilost što se tiče izrade izgleda web stranica, i dalje dobro funkcioniraju za kodiranje HTML kalendara. Kalendari na neki način prikazuju tablične podatke jer su organizirani u mrežu datuma sa stupcima koji imaju nazive, na primjer, dane u tjednu. Dodatni CSS kôd učinit će zamornu mrežu s imenima i brojevima sličnijom kalendaru. Budući da događajima u kalendaru treba prostora, kako za broj datuma, tako i za događaje, također će biti potrebno upotrijebiti CSS za oblikovanje datuma na način da obje informacije budu čitljive.
Stvorite tablicu u HTML-u
Korak 1
Stvorite tablicu za strukturiranje kalendara. Ova tablica zahtijeva zaglavlje sa sedam ćelija, po jednu za svaki dan u tjednu. Također je potrebno stvoriti šest redaka redovnih ćelija tablice. Kopirajte i zalijepite izvadak na web stranicu uz pomoć Notepada ili uređivača koda.
| nedjelja | ponedjeljak | utorak | srijeda | četvrtak | petak | subota |
|---|
Ovaj će kôd stvoriti tablicu i naslov. Tablica koristi identifikacijski naziv pod nazivom "kalendar" u slučaju da web mjesto koristi tablice na drugim stranicama.
Korak 2
Dodajte par oznaka tijela ispod oznake "":
3. korak
Kopirajte sljedeći kod i zalijepite ga između "
" šest puta:Ovaj će kôd stvoriti svaki redak sa sedam ćelija, tako da će dodavanjem njih šest kalendar imati sve podatkovne prostore koji su vam potrebni za sve mjesece u godini.
4. korak
Dodajte datume u kalendar prema mjesecu koji želite prikazati. Pogledajte pravi kalendar i pripazite da datum ne preskočite ili ponovite. Svaki datum priložite oznakama "" kako biste kasnije mogli prilagoditi brojeve:
Korak 5
Zabilježite događaje u ćelijama koji sadrže relevantne datume. Događaji moraju biti izvan "" oznaka, ali unutar "" oznaka
’:
Zabava za Noć vještica!
Zadnji dan za registraciju.
Prilagodite kalendar
Korak 1
Pronađite "
Obrisi nisu obvezni, ali ovo je najprikladniji način dodavanja obruba tablicama na trenutnim web stranicama.
Korak 2
Naslov tablice prilagodite bojom za slova i drugom za pozadinu:
thead kalendar {
boja: #ffffff; boja pozadine: tamnoplava; font-weight: podebljano; }
Moguće je koristiti heksadecimalni kod ili naziv boja. Ovaj će naslov prikazati bijeli tekst na tamnoplavoj pozadini.
3. korak
Ispunjavanje, obrubi, širina i položaj u odnosu na ćelije tablice:
peti kalendar,
td kalendar {
podstava: 20px; obrub: 1px jednobojno crno; širina: 100px; položaj: relativan; }
Relativni smještaj omogućava programeru da kasnije postavi datume u obliku brojeva u kutove ćelija tablice. Ne postavljajte visinu, jer će to ograničiti koliko teksta možete dodati bilo kojem datumu.
4. korak
Stvorite brojeve pomoću ispune, boje pozadine i apsolutnog pozicioniranja:
td span kalendar {
font-weight: podebljano; položaj: apsolutni; dolje: 0; desno: 0; prikaz: blok; podstava: 5px; boja pozadine: #eeeeee; }
Morate uključiti "display: block" da bi oznake djelovale kao okviri na web stranici, inače ih nećete moći popuniti. Ovaj primjer koda stvara slabi sivi okvir u donjem lijevom kutu svakog datumskog prostora, prikazujući datumski broj.