Utilizzando fogli di stile CSS per posizionare gli oggetti su una pagina Web, è possibile modificare rapidamente il layout senza toccare il codice HTML che definisce l'oggetto. Tabelle, ad esempio, sono utili per la visualizzazione di dati tabulari. Se non si stile un tavolo, si siede sul bordo sinistro del browser. È possibile sperimentare con gli stili di layout diverso utilizzando CSS per aggiungere un numero qualsiasi di spazi a bordo sinistro di una tabella.

Istruzioni

1

Aprire un documento HTML utilizzando l'editor HTML o blocco note.

2

Aggiungere il codice riportato di seguito alla sezione body del documento:

< table class = "addSpacesLeft" >
< tr >
< td > < un /td >
< td > < /td > B
< /tr >
< tr >
< td > < /td > B
< td > < /td > D
< /tr >
< / tabella >

Questo codice aggiunge un tag "table" per la sezione del corpo. L'aggiunta di questo tag crea una semplice tabella con quattro elementi. Il tag di tabella fa riferimento a una classe CSS denominata "addSpacesLeft."

3

Incollare il seguente codice CSS nella sezione head del documento:

< style type = "text/css" >
.addSpacesLeft
{margin-left: 100px;}
< / stile >

Questa è la classe "addSpacesLeft". Si noti che i nomi delle classi CSS hanno periodi all'inizio dei loro nomi. Tuttavia, quando si fa riferimento la classe nel codice HTML, come illustrato nel passaggio precedente, nessun periodo appare davanti al nome. Questa classe CSS ha un attributo di margine sinistro. Il valore dell'attributo è 100px. Acronimo di 100 pixel. Poiché il tag di tabella fa riferimento a questa classe, il margine sinistro della tabella apparirà 100 pixel dal bordo sinistro del browser.

Consigli & Avvertenze

• Questo esempio utilizza un valore elevato di 100px per il margine sinistro della tabella per dimostrare l'effetto. Utilizzare qualsiasi numero che si desidera aggiungere spazi all'estremità sinistra di una tabella. Cambiare il valore di "8px," per esempio, e browser saranno posto otto pixel prima del bordo sinistro della tabella.
• Aggiungere la classe CSS "addSpacesLeft" a qualsiasi pagina Web che contiene le tabelle. Dopo aver aggiunto un riferimento a questa classe al tag "table" di un documento HTML come mostrato in questi passaggi, è possibile modificare il numero di spazi che appaiono prima della tabella semplicemente aggiornando la classe CSS anziché modificare il codice HTML che definisce il vostro tavolo.