Come creare una tabella calendario con XHTML

May 27

Come creare una tabella calendario con XHTML


Extensible Hypertext Markup Language (XHTML) è un linguaggio di markup XML molto simile nella forma e funzione in HTML. Come con HTML, la creazione di un tavolo coinvolge la scrittura di codice per alcuni componenti di base: la tabella stessa, file e file di intestazione all'interno del tavolo, e celle di tabelle individuali. L'applicazione di alcune regole semplici Cascading Style Sheet (CSS) a questo quadro consente agli autori delle pagine web per creare un design tavolo che imita da vicino l'aspetto dei calendari tradizionali.

istruzione

1 Apri la tua pagina web. Se si utilizza un programma di modifica del testo come Blocco note o WordPad, aprire la pagina web e trovare la posizione nel codice in cui il vostro tavolo dovrebbe andare. Se si utilizza un programma di editing visivo come Adobe Dreamweaver o Microsoft Expression Web, aprire la pagina web e cliccare sulla specifica area in cui si desidera che il tavolo collocato. Quindi modificare la visualizzazione della pagina di visualizzazione del codice per vedere il codice HTML che controlla quella porzione della pagina.

2 Creare una riga vuota per il codice XHTML del calendario.

3 Aggiungere un titolo del calendario. Questo esempio crea un calendario per il mese di febbraio 2010. Copia e incolla il seguente codice sulla riga vuota si è creato nel passaggio precedente:

<h2> febbraio 2010 </ h2>

4 Creare la tabella che contiene. Inserire una riga vuota sotto il tag intestazione. Copia e incolla il seguente codice XHTML:

<Table>
</ Table>

5 Aggiungere una riga di intestazione alla tabella. Calendari mostrano generalmente i giorni della settimana lungo le loro righe superiori. Imitare questo formato inserendo una riga vuota sotto l'apertura "<table>" tag, e quindi copiare e incollare il seguente codice sulla riga vuota:

<Tr> <th> SUN </ th> <th> MON </ th> <th> TUE </ th> <th> WED </ th> <th> GIO </ th> <th> FRI </ th > <th> SAT </ th> </ tr>

6 Aggiungere una riga per ogni settimana del mese. Febbraio 2010 ha giorni si sviluppa su cinque settimane, in modo da cinque righe della tabella con sette celle ciascuno deve essere creato. Inserire una riga vuota sotto la riga di intestazione si è aggiunto nel passaggio precedente, e quindi copiare e incollare il seguente codice sulla linea:

<Tr> <td> </ td> <td> 1 </ td> <td> 2 </ td> <td> 3 </ td> <td> 4 </ td> <td> 5 </ td> <td> 6 </ td> </ tr>
<Tr> <td> 7 </ td> <td> 8 </ td> <td> 9 </ td> <td> 10 </ td> <td> 11 </ td> <td> 12 </ td > <td> 13 </ td> </ tr>
<Tr> <td> 14 </ td> <td> 15 </ td> <td> 16 </ td> <td> 17 </ td> <td> 18 </ td> <td> 19 </ td > <td> 20 </ td> </ tr>
<Tr> <td> 21 </ td> <td> 22 </ td> <td> 23 </ td> <td> 24 </ td> <td> 25 </ td> <td> 26 </ td > <td> 27 </ td> </ tr>
<Tr> <td> 28 </ td> <td> </ td> <td> </ td> <td> </ td> <td> </ td> <td> </ td> <td> < / td> </ tr>

Il carattere di spazio non-breaking "()" appare in cellule che non hanno valore numerico.

7 Aggiungere regole di stile CSS. Se si visualizza la tabella nel browser, vedrete che ha un design molto semplice. Alcune regole CSS semplici possono aumentare la larghezza della tabella, in grassetto e ombra la riga di intestazione, e di fornire i confini per ogni giorno della settimana. Nel loro insieme, questi stili aiutare il vostro tavolo assomigliare più da vicino un calendario. Individuare il "</ head>" tag vicino alla parte superiore del codice e inserire una riga vuota direttamente sopra di esso. Copia e incolla il seguente codice sulla riga vuota:

<Style type = "text / css">
tavolo {width: 75%}
th {background-color: #eee; border: 1px #ccc solido; padding: 5px; text-align: left}
td {border: 1px #ccc solido; padding: 5px; Larghezza: 14,29%}
</ Style>

8 Salvare la pagina e aprirlo nel browser. La pagina contiene ora una tabella XHTML formattato per assomigliare ad un mese di calendario.