September 2
tabelle HTML sono stati utilizzati per controllare la formattazione di una pagina web con il testo, le immagini, i campi del modulo e di altre tabelle. Tuttavia, essi sono più adatti per la gestione dei dati di testo di immagini e tabelle nidificate. Il CSS (Cascading Style Sheet) \ "<div> \" tag può essere utilizzato per creare un formato di tabella-like che è più adatto a gestire immagini, campi modulo e altre tabelle. Inoltre, a differenza di tabelle, il foglio di stile può essere tenuto in un documento esterno e collegato al documento HTML, il che significa che un foglio di stile può essere utilizzato su più pagine del tuo sito.
1 Aprire un documento di testo in qualsiasi editor di testo.
2 Creare l'elemento tabella con il seguente codice: <br /> <br /> <br #table {width />: 90% <br /> schermo GO <br />: tavolo <br /> <br /> GO confine : 1px nero solido;}
3 Creare l'elemento riga con il seguente codice: <br /> <br /> #row {display: table-row;}
4 Creare gli elementi di cella con il seguente codice: <br /> <br /> <br #left {width />: 200px <br /> <br /> GO padding: 1em <br /> <br /> GO confine: 1px solid <br /> nero GO <br /> visualizzazione: <br /> table-cell GO <br />} <br /> <br /> <br #right {width />: 200px <br /> GO <br /> padding: 1em <br /> <br /> GO border: 1px solid <br /> nero visualizzazione GO <br /> <br /> table-cell GO <br />} <br /> < br /> #middle {<br /> padding: 1em <br /> <br /> GO border: 1px solid <br /> nero GO <br /> visualizzazione: <br /> table-cell GO <br /> }
5 Salvare il file con il nome di \ "table.css \"
6 Aprire un secondo documento di testo.
7 Digitare le righe seguenti per avviare il documento HTML e link al foglio di stile: <br /> <br /> <html> <br /> <head> <br /> <link rel = \ tipo "stylesheet \" = \ " text / css \ "href = \" table.css \ "/> <br /> </ head>
8 Digitare le righe seguenti per creare la tabella: <br /> <br /> <body> <br /> <div id = \ "tavolo \">
9 Digitare la seguente riga per creare la riga: <br /> <br /> <div id = \ "fila \">
10 Digitare le righe seguenti per creare le celle della tabella: <br /> <br /> <div id = \ "sinistra \"> <br /> <h4> Sinistra </ h4> <br /> <p> Questo è il colonna di sinistra </ p> <br /> </ div> <br /> <br /> <div id = \ "\ middle"> <br /> <h4> centro </ h4> <br /> <p > Questa è la colonna centrale </ p> <br /> </ div> <br /> <br /> <div id = \ "giusto \"> <br /> <h4> destro </ h4> <br /> <p> Questa è la colonna di destra </ p>
11 Digitare le seguenti righe per chiudere la \ "<div> \" tag e finire il documento HTML: <br /> <br /> </ div> <br /> </ div> <br /> </ div> < br /> </ body> <br /> </ html>
12 Salvare il documento con il \ ". Html \" estensione del file.
13 Prova il tuo tavolo aprendo il documento HTML in un browser Web.