March 7
Anche se le tabelle sono caduto in disgrazia quando si tratta di costruire interi layout di pagina Web, che ancora funzionano bene per la codifica calendari in formato HTML. Calendari visualizzano i dati tabulari in un certo senso, dal momento che sono organizzati in una griglia di date con le colonne di nome, per esempio, i giorni della settimana. Alcuni codice CSS in più avrà una griglia noioso dei giorni della settimana e dei numeri e farlo sembrare più come un calendario. Dal momento che i calendari di eventi hanno bisogno di spazi per entrambi i numeri di data e gli eventi, si dovrebbe anche usare i CSS per formattare le date in modo da mantenere entrambi i pezzi di informazioni leggibili.
1 Creare una tabella per strutturare il calendario. Questa tabella richiede un'intestazione con sette celle, una per ogni giorno della settimana. È inoltre necessario sei più righe di celle normali. Copia e incolla questo alla tua pagina Web utilizzando Blocco note o un editor di codice:
<Table id = "calendario">
<Thead>
<th>Sunday</th>
<th>Monday</th>
<th>Tuesday</th>
<th>Wednesday</th>
<th>Thursday</th>
<th>Friday</th>
<th>Saturday</th>
</ Thead>
</ Table>
Questo codice crea la tabella e l'intestazione. La tabella utilizza un nome di ID di "calendario" nel caso il vostro sito web utilizza le tabelle in altre pagine.
2 Aggiungere un paio di tag body tabella sotto il tag "<thead>":
<Tbody>
</ Tbody>
3 Copiare il seguente codice e incollarlo tra i "<tbody>" tag sei volte:
<Tr>
<Td> </ td>
<Td> </ td>
<Td> </ td>
<Td> </ td>
<Td> </ td>
<Td> </ td>
<Td> </ td>
</ Tr>
Questo codice crea ogni fila di sette cellule, in modo che quando si aggiungono sei di questi, il calendario avrà tutti gli spazi della data di cui ha bisogno per qualsiasi mese dell'anno.
4 Aggiungere date al calendario a seconda del mese che si desidera visualizzare. Fare riferimento a un calendario reale e fare attenzione a non saltare o ripetere una data. Avvolgere ogni data in "<span>" tag in modo da poter lo stile dei numeri in seguito:
<Td> <span> 31 </ span> </ td>
5 Scrivi i tuoi eventi nelle cellule che contengono le date rilevanti. Gli eventi devono andare al di fuori dei "<span>" tag ma entro i "<td>" tag. Se l'aggiunta di più di un evento a una cella, avvolgere ciascuno in un paio di "<p>" tag:
<Td> <span> 31 </ span>
<P> Halloween Party! </ P>
<P> L'ultimo giorno per la presentazione. </ P>
</ Td>
6 Individuare i "<style>" tag nel codice HTML, oppure aggiungere tra i "<head>" tag. Scrivi la prima regola di stile, puntando l'intera tabella, tra i "<style>" tag:
<Style type = "text / css">
calendario {
border: 1px solid black;
}
</ Style>
Il confine è facoltativo, ma questo è il modo giusto per aggiungere bordi alle tabelle nelle pagine web moderne.
7 Stile l'intestazione tavolo con un colore del carattere e il colore di sfondo:
Calendario thead {
colore: #FFFFFF;
background-color: blu scuro;
font-weight: bold;
}
È possibile utilizzare il codice esadecimale o colori con nome. Questa intestazione visualizza il testo bianco su sfondo blu scuro.
8 Dare padding, bordi, larghezza e posizionamento relativo alle cellule di tabella:
Calendario esimo, calendario td {
padding: 20px;
border: 1px nero solido;
width: 100px;
position: relative;
}
Il posizionamento relativo consente di posizionare i numeri di data negli angoli delle celle della tabella successiva. Non impostare l'altezza, perché questo limitare la quantità di testo è possibile aggiungere a qualsiasi data.
9 Creare i numeri usando imbottiture, un colore di sfondo e il posizionamento assoluto:
arco calendario td {
font-weight: bold;
position: absolute;
in basso: 0;
a destra: 0;
blocco di visualizzazione;
padding: 5px;
background-color: #eeeeee;
}
È necessario includere "display: block" per fare "<span>" tag si comportano come caselle sulla pagina Web, altrimenti non si può dare loro imbottitura. Questo esempio di codice crea una casella di colore grigio chiaro nell'angolo in basso a destra di ogni spazio data, la visualizzazione del numero di data.