Conţinut
- Creați un tabel în HTML
- Pasul 1
- Pasul 2
- Pasul 3
- Pasul 4
- Pasul 5
- Personalizați calendarul
- Pasul 1
- Pasul 2
- calendarul de cap {
- Pasul 3
- al treilea calendar,
- td calendar {
- Pasul 4
- td span calendar {
Deși tabelele au scăzut din favoare atunci când vine vorba de construirea aspectelor paginilor web, acestea funcționează în continuare bine pentru codarea calendarelor HTML. Calendarele afișează datele tabulare într-un fel, odată ce sunt organizate într-o grilă de date cu coloane denumite, de exemplu, cu zilele săptămânii. Codul CSS suplimentar va face o grilă plictisitoare cu nume și numere mai mult ca un calendar. Deoarece evenimentele dintr-un calendar au nevoie de spațiu, atât pentru numărul de date, cât și pentru evenimente, va fi, de asemenea, necesar să utilizați CSS pentru a formata datele într-un mod care să permită citirea ambelor informații.
Creați un tabel în HTML
Pasul 1
Creați un tabel pentru a structura calendarul. Acest tabel necesită un antet cu șapte celule, câte una pentru fiecare zi a săptămânii. De asemenea, este necesar să creați șase rânduri de celule de tabel obișnuite. Copiați și lipiți fragmentul într-o pagină web cu ajutorul Notepad-ului sau a unui editor de coduri.
| duminică | luni | marţi | miercuri | joi | vineri | sâmbătă |
|---|
Acest cod va crea tabelul și titlul. Tabelul folosește un nume de identificare numit „calendar” în cazul în care site-ul web folosește tabele pe alte pagini.
Pasul 2
Adăugați o pereche de etichete de corp sub eticheta „”:
Pasul 3
Copiați următorul cod și lipiți-l între „
" de sase ori:Acest cod va crea fiecare rând cu șapte celule, astfel încât prin adăugarea a șase dintre ele, calendarul va avea toate spațiile de date de care aveți nevoie pentru toate lunile anului.
Pasul 4
Adăugați date în calendar în funcție de luna pe care doriți să o afișați. Consultați un calendar real și aveți grijă să nu săriți sau să repetați o dată. Anexați fiecare dată cu etichetele "" pentru a putea personaliza numerele ulterior:
Pasul 5
Rețineți evenimentele din celule care conțin date relevante. Evenimentele trebuie să fie în afara etichetelor „”, dar în „
’:
Petrecere de Halloween!
Ultima zi pentru înregistrare.
Personalizați calendarul
Pasul 1
Localizați „
Schița este opțională, dar acesta este cel mai potrivit mod de a adăuga chenare la tabelele de pe paginile web curente.
Pasul 2
Personalizați titlul tabelului cu o culoare pentru litere și alta pentru fundal:
calendarul de cap {
culoare: #ffffff; culoare de fundal: albastru închis; font-weight: bold; }
Este posibil să utilizați cod hexazecimal sau numele culorilor. Acest titlu va afișa un text alb pe un fundal albastru-deschis.
Pasul 3
Umplere, margini, lățime și poziție în raport cu celulele tabelului:
al treilea calendar,
td calendar {
umplutură: 20 px; chenar: 1px negru solid; lățime: 100px; poziție: relativă; }
Plasarea relativă permite programatorului să plaseze date mai târziu sub formă de numere în colțurile celulelor tabelului. Nu setați o înălțime, deoarece aceasta va restricționa cât de mult text puteți adăuga la orice dată.
Pasul 4
Creați numerele folosind umplerea, culoarea de fundal și poziționarea absolută:
td span calendar {
font-weight: bold; poziție: absolută; jos: 0; dreapta: 0; display: bloc; umplutură: 5 px; culoare de fundal: #eeeeee; }
Trebuie să includeți „afișare: blocare” pentru ca etichetele „„ să acționeze ca niște casete pe pagina web, altfel nu le veți putea completa. Acest exemplu de cod creează o casetă gri slabă în colțul din stânga jos al fiecărui spațiu de dată, afișând numărul datei.