Creazione di tabelle utilizzando i fogli di stile (CSS) è un modo avanzato di visualizzazione dei dati o per creare un layout di pagina. CSS permette di creare codice più pulito, che si traduce in caricamento della pagina più veloce e consente di creare più di una tabella personalizzata. Utilizzando una semplice lista non ordinata HTML, CSS assegna regole di stile di ogni elemento per definire come visualizzare il vostro tavolo e presentare il contenuto. Le regole di stile possono essere fatti su misura per consentire di creare tutti i tipi di tabelle, dal semplice al complesso.

istruzione

codice CSS

1 Aprire un nuovo documento in un editor di testo HTML, come ad esempio BBEdit o Dreamweaver.

2 Creare una regola di stile classe chiamata ".table". Questa regola definisce carattere della vostra tabella. Per esempio:
.tavolo {

font-family: Verdana, Arial, Helvetica, sans-serif;

}

3 Creare una regola di stile classe chiamata ".table ul". Questa regola definisce della lista non ordinata margine, padding, galleggiante e di frontiera. Per esempio:
ul {.table

margin: 0px;
padding: 0px;
float: left;
border-top: 0px none;

}

4 Creare una regola di stile classe chiamata "ul li .table". Questa regola definisce imbottitura della voce di lista, list-style-type, colore di sfondo, dimensione del carattere, bordo inferiore, larghezza della tabella e il colore di sfondo. Per esempio:
.table ul li {

padding: 5px 5px 10px 10px;
list-style-type: none;
background-color: #CCCCFF;
font-size: 14px;
border-bottom: 1px solid #FFFFFF;
width: 150px;
color: #000033;

}

5 Creare una regola di stile classe chiamata "li.heading ul .table". Questa regola definisce le proprietà dei font della lista intestazione, colore di sfondo e bordo inferiore. Per esempio:
.table ul {li.heading

font-weight: bold;
color: #333366;
background-color: #9999CC;
text-transform: uppercase;
font-size: 16px;
border-bottom: 1px solid #FFFFFF;

}

6 Nome e salvare il file CSS con l'estensione "css".

7 Collega il tuo file CSS per il codice HTML aprendo il documento HTML e l'aggiunta di un link all'interno elemento "testa" del documento. Per esempio:
<Link href = "http://www.yoursite.com/table.css~~number=plural" rel = "stylesheet" type = "text / css" media = "all" />

Codice HTML

8 Inserire il "<div>" tag di apertura e aggiungere la "tabella" dominio di classe. Questo assegna lo stile del tavolo. Per esempio:
<Div class = "tavola">

9 Inserire il "<ul>" lista non ordinata tag di apertura. Questo inizia la prima colonna della tabella.

10 Inserire l'apertura "<li>" tag elemento della lista e aggiungere il "voci" dominio di classe. Questo assegna lo stile del titolo dell'elenco. Per esempio:
<Li class = "rubriche">

11 Inserire il testo della voce di elenco e chiudere la "<li />" tag. Il testo è il primo titolo della colonna. Per esempio:
<Li class = "voci"> Colonna 1 </ li>

12 Inserisci il maggior numero di tag di voci di elenco, se necessario. Il testo immesso in queste voci di elenco è il dato che appare nella colonna uno. Per esempio:
<Li> riga 1, colonna 1 </ li>
<Li> Riga 2, Colonna 1 </ li>
<Li> Riga 3, Colonna 1 </ li>

13 Inserire la chiusura "</ ul>" tag per completare la prima colonna della tabella.

14 Ripetere i passi a due, tre e quattro per aggiungere colonne e righe aggiuntive al tavolo, se necessario. Per esempio:
<Ul>
<Li class = "heading"> Colonna 2 </ li>
<Li> riga 1, colonna 2 </ li>
<Li> Riga 2, Colonna 2 </ li>
<Li> Riga 3, Colonna 2 </ li>
</ Ul>

15 Inserire la chiusura "</ div>" tag.

16 Nome e salvare il file HTML con l'estensione ".html".

Consigli e avvertenze

• È possibile aggiungere le specifiche di stile aggiuntive, come la dimensione del carattere o il colore, in ogni CSS rule.If non vedi le regole CSS che entreranno in vigore, assicurarsi che entrambi i file sono stati salvati e quindi utilizzare la funzione "Aggiorna" del vostro editor di testo HTML.