Contenuto
- Crea una tabella in HTML
- Passo 1
- Passo 2
- Passaggio 3
- Passaggio 4
- Passaggio 5
- Personalizza il calendario
- Passo 1
- Passo 2
- thead calendar {
- Passaggio 3
- esimo calendario,
- td calendar {
- Passaggio 4
- td span calendar {
Sebbene le tabelle siano cadute in disgrazia quando si tratta di creare layout di pagine web, funzionano ancora bene per la codifica di calendari HTML. I calendari visualizzano i dati tabulari in un modo, una volta organizzati in una griglia di date con colonne denominate, ad esempio, con i giorni della settimana. Il codice CSS aggiuntivo renderà una griglia noiosa con nomi e numeri più simile a un calendario. Poiché gli eventi su un calendario richiedono spazio, sia per il numero di date che per gli eventi, sarà anche necessario utilizzare CSS per formattare le date in modo da mantenere leggibili entrambe le informazioni.
Crea una tabella in HTML
Passo 1
Crea una tabella per strutturare il calendario. Questa tabella richiede un'intestazione con sette celle, una per ogni giorno della settimana. È inoltre necessario creare sei righe di celle di tabella regolari. Copia e incolla l'estratto in una pagina web con l'aiuto di Blocco note o di un editor di codice.
| Domenica | Lunedi | martedì | mercoledì | giovedi | Venerdì | Sabato |
|---|
Questo codice creerà la tabella e il titolo. La tabella utilizza un nome identificativo chiamato "calendario" nel caso in cui il sito web utilizzi tabelle su altre pagine.
Passo 2
Aggiungi un paio di tag body sotto il tag "":
Passaggio 3
Copia il seguente codice e incollalo tra "
" sei volte:Questo codice creerà ogni riga con sette celle, in modo che aggiungendone sei, il calendario avrà tutti gli spazi dati necessari per tutti i mesi dell'anno.
Passaggio 4
Aggiungi le date al calendario in base al mese che desideri mostrare. Consulta un calendario reale e fai attenzione a non saltare o ripetere una data. Racchiudi ogni data con i tag "" in modo da poter personalizzare i numeri in seguito:
Passaggio 5
Prendi nota degli eventi nelle celle che contengono date rilevanti. Gli eventi devono essere al di fuori dei tag "" ma all'interno del "
’:
Festa di Halloween!
Ultimo giorno per la registrazione.
Personalizza il calendario
Passo 1
Individua il "
La struttura è facoltativa, ma questo è il modo più appropriato per aggiungere bordi alle tabelle nelle pagine web correnti.
Passo 2
Personalizza il titolo della tabella con un colore per le lettere e un altro per lo sfondo:
thead calendar {
colore: #ffffff; colore di sfondo: blu scuro; spessore del carattere: grassetto; }
È possibile utilizzare il codice esadecimale o il nome dei colori. Questo titolo visualizzerà il testo bianco su uno sfondo blu navy.
Passaggio 3
Riempimento, bordi, larghezza e posizione rispetto alle celle della tabella:
esimo calendario,
td calendar {
imbottitura: 20px; bordo: 1px nero pieno; larghezza: 100px; posizione: relativa; }
Il posizionamento relativo consente al programmatore di inserire le date sotto forma di numeri negli angoli delle celle della tabella in un secondo momento. Non impostare un'altezza, poiché ciò limiterà la quantità di testo che puoi aggiungere a qualsiasi data.
Passaggio 4
Crea i numeri usando il riempimento, il colore di sfondo e il posizionamento assoluto:
td span calendar {
spessore del carattere: grassetto; posizione: assoluta; in basso: 0; destra: 0; blocco di visualizzazione; imbottitura: 5px; colore di sfondo: #eeeeee; }
Devi includere "display: block" per fare in modo che i tag "" agiscano come caselle sulla pagina web, altrimenti non sarai in grado di riempirli. Questo codice di esempio crea una debole casella grigia nell'angolo inferiore sinistro di ogni spazio data, che mostra il numero della data.