Saturs
- Izveidojiet tabulu HTML formātā
- 1. solis
- 2. solis
- 3. solis
- 4. solis
- 5. solis
- Pielāgojiet kalendāru
- 1. solis
- 2. solis
- galvas kalendārs {
- 3. solis
- th kalendārs,
- td kalendārs {
- 4. solis
- td span kalendārs {
Kaut arī tīmekļa lapu izkārtojuma izveidē tabulas ir zaudējušas labvēlību, tās joprojām labi darbojas HTML kalendāru kodēšanai. Kalendāri parāda tabulas datus savā veidā, tiklīdz tie ir sakārtoti datumu režģī ar kolonnām, piemēram, ar nedēļas dienām. Papildu CSS kods padarīs garlaicīgu režģi ar nosaukumiem un numuriem vairāk līdzīgus kalendāram. Tā kā notikumiem kalendārā ir nepieciešama vieta gan datumu skaitam, gan notikumiem, datumu formatēšanai būs nepieciešams izmantot CSS, lai abas informācijas daļas būtu lasāmas.
Izveidojiet tabulu HTML formātā
1. solis
Izveidojiet tabulu, lai strukturētu kalendāru. Šajā tabulā ir nepieciešama galvene ar septiņām šūnām, pa vienai katrai nedēļas dienai. Ir arī jāizveido sešas parasto tabulas šūnu rindas. Nokopējiet un ielīmējiet fragmentu tīmekļa lapā, izmantojot Notepad vai kodu redaktoru.
| Svētdiena | Pirmdiena | Otrdiena | Trešdiena | Ceturtdiena | Piektdiena | Sestdiena |
|---|
Šis kods izveidos tabulu un nosaukumu. Tabulā tiek izmantots identifikācijas nosaukums, ko sauc par “kalendāru”, ja vietne izmanto tabulas citās lapās.
2. solis
Zem taga "" pievienojiet pāris ķermeņa tagus:
3. solis
Nokopējiet šo kodu un ielīmējiet to starp "
"sešas reizes:Šis kods izveidos katru rindu ar septiņām šūnām, lai, pievienojot sešas no tām, kalendārā būtu visas vajadzīgās datu vietas visiem gada mēnešiem.
4. solis
Pievienojiet kalendāram datumus atbilstoši mēnesim, kuru vēlaties parādīt. Iepazīstieties ar īstu kalendāru un uzmanieties, lai neizlaistu un neatkārtotu datumu. Katru datumu pievienojiet tagiem, lai vēlāk numurus varētu pielāgot:
5. solis
Atzīmējiet notikumus šūnās, kas satur attiecīgos datumus. Notikumiem jāatrodas ārpus tagiem, bet iekšā
’:
Helovīna ballīte!
Pēdējā reģistrēšanās diena.
Pielāgojiet kalendāru
1. solis
Atrodiet
Kontūra nav obligāta, taču tas ir vispiemērotākais veids, kā pievienot apmales tabulām pašreizējās tīmekļa lapās.
2. solis
Pielāgojiet tabulas nosaukumu ar krāsu burtiem un citu fonu:
galvas kalendārs {
krāsa: #ffffff; fona krāsa: tumši zila; fonta svars: treknrakstā; }
Ir iespējams izmantot heksadecimālo kodu vai krāsu nosaukumu. Šajā nosaukumā tiks parādīts balts teksts uz tumši zila fona.
3. solis
Aizpildīšana, apmales, platums un novietojums attiecībā pret tabulas šūnām:
th kalendārs,
td kalendārs {
polsterējums: 20 pikseļi; apmale: 1px cieta melna; platums: 100 pikseļi; amats: radinieks; }
Relatīvais izvietojums ļauj programmētājam vēlāk tabulas šūnu stūros ievietot datumus skaitļu veidā. Nenorādiet augstumu, jo tas ierobežos to, cik daudz teksta jūs varat pievienot jebkuram datumam.
4. solis
Izveidojiet numurus, izmantojot aizpildījumu, fona krāsu un absolūto pozicionēšanu:
td span kalendārs {
fonta svars: treknrakstā; pozīcija: absolūta; apakšā: 0; pa labi: 0; displejs: bloks; polsterējums: 5px; fona krāsa: #eeeeee; }
Jums jāiekļauj "display: block", lai tagi "" darbotos kā lodziņi tīmekļa lapā, pretējā gadījumā jūs tos nevarēsiet aizpildīt. Šis koda paraugs katras datuma vietas apakšējā kreisajā stūrī izveido vāju pelēku lodziņu, kurā tiek parādīts datuma numurs.