Hvordan bygge en HTML Aktivitetskalender

Hvordan bygge en HTML Aktivitetskalender


Selv om bord falt i unåde når det gjelder å bygge hele nettsiden oppsett, de fortsatt fungerer godt for koding kalendere i HTML. Kalendere vise tabelldata på en måte, siden de er organisert i et rutenett av datoer med navngitte kolonner, for eksempel dagene i uken. Noen ekstra CSS-kode vil ta en kjedelig rutenett av ukedag navn og nummer, og at det ser mer ut som en kalender. Siden event kalendere trenger rom for både dato tall og hendelser, bør du også bruke CSS til å formatere datoer på en måte som holder begge delene informasjon lesbar.

Bruksanvisning

Bygg HTML Table

1 Lag en tabell for å strukturere kalenderen. Denne tabellen krever en header med syv celler, en for hver dag i uken. Du må også seks mer rader med vanlige tabellceller. Kopier og lim inn denne i din webside ved hjelp av Notepad eller en kode redaktør:

<Table id = "kalender">
<Thead>

&lt;th>Sunday&lt;/th>
&lt;th>Monday&lt;/th>
&lt;th>Tuesday&lt;/th>
&lt;th>Wednesday&lt;/th>
&lt;th>Thursday&lt;/th>
&lt;th>Friday&lt;/th>
&lt;th>Saturday&lt;/th>

</ Thead>
</ Table>

Denne koden vil skape bordet og spissen. Tabellen bruker en ID navnet "kalender" i ditt tilfelle nettstedet bruker tabeller på andre sider.

2 Legg et par bord body-taggene under "<thead>" tag:

<Tbody>
</ Tbody>

3 Kopier følgende kode og lim den inn mellom "<tbody>" tags seks ganger:

<Tr>
<Td> </ td>
<Td> </ td>
<Td> </ td>
<Td> </ td>
<Td> </ td>
<Td> </ td>
<Td> </ td>
</ Tr>

Denne koden vil lage hver rad med syv celler, slik at når du legger seks av disse, vil kalenderen har alle dato områder det er behov for en måned av året.

4 Legg datoene i kalenderen din avhengig av måneden du vil vise. Refererer til en reell kalender og være forsiktig for ikke å hoppe eller gjenta en dato. Pakk hver dato i "<span>" koder, slik at du kan style tallene senere:

<Td> <span> 31 </ span> </ td>

5 Skriv dine aktiviteter i cellene som inneholder deres aktuelle datoene. Hendelsene må gå utenfor "<span>" koder, men innenfor "<td>" koder. Hvis du legger til mer enn én hendelse til en celle, pakk hver og en i et par av "<p>" tags:

<Td> <span> 31 </ span>
<P> Halloween Party! </ P>
<P> Siste dag for innleveringer. </ P>
</ Td>

stil Kalender

6 Finn "<style>" koder i HTML-koden, eller legge dem mellom "<head>" koder. Skriv din første stilen regel rettet mot hele tabellen, mellom "<style>" tags:

<Style type = "text / css">

kalender {

border: 1px solid black;

}
</ Style>

Grensen er valgfritt, men dette er den riktige måten å legge til rammer rundt bordene i moderne websider.

7 Style table header med en skriftfarge og bakgrunnsfarge:

kalender thead {

color: # ffffff;
background-color: mørkblå;
font-weight: bold;
}

Du kan bruke enten heksadesimale koden eller navngitte farger. Denne overskriften viser hvit tekst på en marineblå blå bakgrunn.

8 Gi padding, grenser, bredde og relativ posisjonering til tabellceller:

kalender th, kalender td {

padding: 20px;
border: 1px solid black;
width: 100px;
position: relative;
}

Relativ posisjonering kan du plassere dato tallene i hjørnene av tabellcellene senere. Ikke sett en høyde, fordi det vil begrense hvor mye tekst du kan legge til noen dato.

9 Lag tallene ved hjelp av polstring, en bakgrunnsfarge og absolutt posisjonering:

kalender td span {

font-weight: bold;
position: absolute;
bottom: 0;
høyre: 0;
display: block;
padding: 5px;
background-color: #eeeeee;
}

Du må ta med "display: block" å gjøre "<span>" tags oppfører seg som bokser på websiden, ellers kan du ikke gi dem padding. Denne koden eksemplet oppretter en lys grå boks i nederste høyre hjørne av hver dato plass, viser datoen nummeret.