Vsebina
- Ustvarite tabelo v HTML
- Korak 1
- 2. korak
- 3. korak
- 4. korak
- 5. korak
- Prilagodite koledar
- Korak 1
- 2. korak
- thead koledar {
- 3. korak
- th koledar,
- td koledar {
- 4. korak
- td span koledar {
Čeprav tabele niso bile naklonjene gradnji postavitev spletnih strani, še vedno dobro delujejo za kodiranje koledarjev HTML. Koledarji prikazujejo tabelarne podatke na nek način, ko so organizirani v mrežo datumov s stolpci, imenovanimi na primer z dnevi v tednu. Dodatna koda CSS bo dolgočasno mrežo z imeni in številkami bolj podobno koledarju. Ker dogodki v koledarju potrebujejo prostor, tako za število datumov kot za dogodke, bo za uporabo datumov treba uporabiti tudi CSS, tako da bosta oba podatka berljiva.
Ustvarite tabelo v HTML
Korak 1
Ustvarite tabelo za strukturiranje koledarja. Ta tabela zahteva glavo s sedmimi celicami, po eno za vsak dan v tednu. Prav tako je treba ustvariti šest vrstic navadnih celic tabele. Kopirajte in prilepite odlomek na spletno stran s pomočjo Notepad-a ali urejevalnika kod.
| Nedelja | Ponedeljek | Torek | Sreda | Četrtek | Petek | Sobota |
|---|
Ta koda bo ustvarila tabelo in naslov. Tabela uporablja identifikacijsko ime, imenovano "koledar", če spletno mesto uporablja tabele na drugih straneh.
2. korak
Pod oznako "" dodajte par oznak telesa:
3. korak
Kopirajte naslednjo kodo in jo prilepite med
"šestkrat:Ta koda bo ustvarila vsako vrstico s sedmimi celicami, tako da bo imel koledar z dodajanjem šestih vseh podatkovnih prostorov, ki jih potrebujete za vse mesece v letu.
4. korak
V koledar dodajte datume glede na mesec, ki ga želite prikazati. Oglejte si pravi koledar in pazite, da ne preskočite ali ponovite datuma. Vsak datum priložite oznakam "", da boste lahko pozneje prilagodili številke:
5. korak
Upoštevajte dogodke v celicah, ki vsebujejo ustrezne datume. Dogodki morajo biti zunaj oznak "", vendar znotraj ""
’:
Noč čarovnic!
Zadnji dan za registracijo.
Prilagodite koledar
Korak 1
Poiščite
Oris ni obvezen, vendar je to najprimernejši način dodajanja robov tabelam na trenutnih spletnih straneh.
2. korak
Naslov tabele prilagodite z barvo za črke in drugo za ozadje:
thead koledar {
barva: #ffffff; barva ozadja: temno modra; teža pisave: krepko; }
Možno je uporabiti šestnajstiško kodo ali ime barv. Ta naslov bo prikazal belo besedilo na temno modrem ozadju.
3. korak
Izpolnite, obrobe, širino in položaj glede na celice tabele:
th koledar,
td koledar {
oblazinjenje: 20px; obroba: 1px enobarvna črna; širina: 100px; položaj: sorodnik; }
Relativna umestitev omogoča programerju, da pozneje postavi datume v obliki števil v vogale celic tabele. Ne nastavite višine, saj bo to omejilo, koliko besedila lahko dodate kateremu koli datumu.
4. korak
Ustvarite številke z uporabo polnila, barve ozadja in absolutnega pozicioniranja:
td span koledar {
teža pisave: krepko; položaj: absolutno; spodaj: 0; desno: 0; zaslon: blok; oblazinjenje: 5px; barva ozadja: #eeeeee; }
Vključiti morate "display: block", da bodo oznake "" delovale kot polja na spletni strani, sicer jih ne boste mogli izpolniti. Ta vzorčna koda ustvari šibko sivo polje v spodnjem levem kotu vsakega datumskega prostora, ki prikazuje številko datuma.