Tabella HTML Setting & dimensioni delle colonne

December 15

Tabella HTML Setting & dimensioni delle colonne


All'interno di una tabella HTML, gli sviluppatori possono elencare le righe, colonne e contenuti che il browser Web sarà visualizzata utilizzando un layout tabellare. Nel determinare la presentazione di tabelle e colonne di una tabella, gli sviluppatori possono scegliere di specificare le proprietà di stile all'interno del markup HTML o in codice Cascading Style Sheet separata. tabelle HTML, e le loro colonne, possono incorporare un sacco di possibili impostazioni e opzioni stilistiche.

Stile Tabella

Utilizzando dichiarazioni CSS, è possibile specificare le proprietà per le tabelle HTML, colonne e celle. Il seguente esempio markup HTML crea un semplice elemento di tabella:
<Table>
<Tr> <td> Un cellulare </ td> </ tr>
<Tr> <td> Un altro cellulare </ td> </ tr>
</ Table>

L'elemento "tr" rappresenta una riga della tabella, mentre l'elemento "td" è una singola cella all'interno di una riga. Il contenuto di ogni cella si trova tra l'apertura e chiusura tag "TD". Questa pagina può includere dichiarazioni CSS sia nella sezione di testa o in un file CSS separato collegato a da lì. Il seguente codice di esempio CSS dimostra impostando alcuni particolari elementi di stile di tabella:
table {border: 1px solid # 000000; width: 60%; }
td {padding: 3px; }

Questo codice imposta le proprietà della tabella, tra cui larghezza, rispetto al elemento padre della tabella, più larghezza del bordo, lo stile e il colore. La dichiarazione "td" per padding colpisce tutte le celle di una tabella nella pagina, aggiungendo spazio tra il contenuto di una cella e il suo bordo.

Elementi HTML

Le pagine Web possono utilizzare l'elemento HTML "col" per definire le proprietà delle colonne della tabella. La seguente tabella modificata markup illustrato l'utilizzo dell'elemento:
<Table>
<Col align = "left">
<Col align = "right">
<Tr> <td> Un cellulare </ td> <td> Un altro cellulare </ td> </ tr>
</ Table>

I tag "col" qui dettare allineamento per le due colonne all'interno della tabella. Altri attributi dell'elemento consentono agli sviluppatori di impostare le proprietà di allineamento verticale e per l'applicazione di styling per più colonne. L'elemento "colgroup" specifica la formattazione di un gruppo di colonne all'interno di una tabella come segue:
<Table>
<Span colgroup = "2" align = "right"> </ colgroup>
<Tr> <td> Un cellulare </ td> <td> Un altro cellulare </ td> </ tr>
</ Table>

Questo elemento impone allineamento per entrambe le colonne della tabella.

Stile colonna

Le pagine Web possono dettare lo stile per "col" e "elementi COLGROUP" utilizzando il codice CSS, sia in-line, come parte del markup HTML, o separatamente, all'interno di file CSS. Il seguente codice HTML di esempio mostra come aggiungere un attributo class ad un elemento:
<Class col = "maincol">

All'interno del codice CSS per questa pagina, il seguente codice di esempio potrebbe specificare regole di stile per le colonne con questo particolare valore di attributo di classe:
col.maincol {
color: # 330000;
background-color: # CCCCCC;
}

Per specificare gli elementi "col" all'interno di tabelle con un attributo particolare classe, CSS può utilizzare il seguente codice:
Col table.maintable {padding: 5px; }

attributi

elementi HTML per le tabelle, le celle e le colonne possono tutti includere alcuni attributi che determinano le proprietà di stile. Ad esempio, l'elemento di tabella può presentare un elemento larghezza come segue:
<Table width = "500px">

Alcuni dei styling attributi per le tabelle e le cellule sono diventati deprecato nelle ultime versioni di HTML, con gli sviluppatori incoraggiati ad usare i CSS, invece, anche se la maggior parte dei browser supportano ancora gli attributi. Ad esempio, l'elemento cella di tabella può includere larghezza e altezza attributi come segue:
<Td height = larghezza "50px" = "100px">

L'elemento tabella prende anche gli attributi opzionali per il colore di sfondo e l'allineamento, che sono entrambi deprecato. Quando una proprietà viene deprecato, questo significa che potrebbe non essere supportata nelle future versioni di HTML, quindi non è generalmente raccomandato per l'uso in siti attuali.