Gli attributi della tabella HTML ti danno molto più controllo sulle tabelle HTML. Ci sono molti attributi disponibili per le tabelle per renderle più interessanti e cambiare l'aspetto della tua pagina.
Attributi dell'elemento HTML TABLE
Nel HTML5 l'elemento utilizza gli attributi globali e un altro attributo ed è stato modificato per avere solo il valore 1 o vuoto (ovvero border=""). Se vuoi cambiare la larghezza del bordo, dovresti usare la larghezza del bordo Proprietà CSS.
Vedi sotto per conoscere gli attributi validi della tabella HTML5.
Ci sono anche diversi attributi che fanno parte della specifica HTML 4.01 che è diventata obsoleta in HTML5:
- —Utilizzare la proprietà di riempimento CSS sugli elementi TD e TH della tabella.
- —Utilizzare la proprietà CSS border-spacing sulla tabella.
- —Usa gli stili CSS colore del bordo: nero; e in stile bordo sul tavolo.
- —Usa gli stili CSS colore del bordo: nero; e in stile bordo sugli elementi appropriati della tabella.
- —Invece, dovresti descrivere la struttura della tabella in una CAPTION o inserire l'intera tabella in una FIGURE e descriverla in una FIGCAPTION. In alternativa, puoi semplificare la struttura della tabella in modo che non sia necessaria alcuna spiegazione.
- —Utilizzare la proprietà larghezza CSS.
E un attributo che è stato deprecato in HTML 4.01 ed è anche obsoleto in HTML5.
- align: utilizza invece la proprietà margin CSS.
Ci sono anche diversi attributi che non fanno parte di alcuna specifica HTML. Usa questi attributi se sai che i browser supportati possono gestirli e non ti interessa l'HTML valido.
- —Utilizzare invece la proprietà CSS background-color.
- bordercolor: utilizza invece la proprietà CSS border-color.
- bordercolorlight: utilizza invece la proprietà CSS border-color.
- bordercolordark: utilizza invece la proprietà CSS border-color.
- cols: non esistono alternative a questo attributo.
- altezza: utilizzare invece la proprietà CSS altezza.
- —Utilizzare invece il margine della proprietà CSS.
- —Utilizzare invece la proprietà CSS white-space.
- —Utilizzare invece la proprietà CSS vertical-align.
Attributi degli elementi della tabella HTML5
Come accennato in precedenza, esiste un solo attributo, oltre agli attributi globali, valido su un elemento TABLE HTML5: border.
L'attributo border viene utilizzato per definire un bordo attorno all'intera tabella e a tutte le celle al suo interno. C'era qualche domanda se sarebbe stato incluso nelle specifiche HTML5, ma è rimasto perché forniva informazioni sulla struttura della tabella, oltre alle semplici implicazioni di stile.
Per aggiungere l'attributo border, impostare il valore su 1 se c'è un bordo e vuoto (o lasciare l'attributo) se non c'è. La maggior parte dei browser supporterà anche 0 per nessun bordo e qualsiasi altro valore intero (2, 3, 30, 500, ecc.) per dichiarare la larghezza del bordo in pixel, ma questo è obsoleto in HTML5. Invece, dovresti usare le proprietà di stile del bordo CSS per definire la larghezza del bordo e altri stili.
Per creare una tabella con un bordo, scrivi:
border="1">
Questo è un tavolo con un bordo
Questo descrive gli attributi TABLE che sono validi in HTML 4.01, ma sono obsoleti in HTML5. Se scrivi ancora documenti HTML 4.01, puoi utilizzare questi attributi, ma la maggior parte di essi ha alternative che renderanno le tue pagine più a prova di futuro quando passerai a HTML5.
Attributi HTML 4.01 validi
L'attributo che abbiamo descritto sopra. L'unica differenza tra HTML 4.01 e HTML5 è che puoi specificare qualsiasi intero intero (0, 1, 2, 15, 20, 200, ecc.) per definire la larghezza del bordo in pixel.
Per costruire una tabella con un bordo di 5 pixel, scrivi:
border="5">
Questa tabella ha un bordo di 5 pixel.
L'attributo definisce la quantità di spazio tra i bordi della cella e il contenuto della cella. L'impostazione predefinita è due pixel. Imposta il cellpadding su 0 se non vuoi spazi tra i contenuti e i bordi.
Per impostare il riempimento delle celle su 20, scrivi:
cellpadding="20">
Questa tabella ha un cellpadding di 20.
I bordi delle celle saranno separati da 20 pixel.
Visualizza un esempio di tabella con cellpadding.
L'attributo definisce la quantità di spazio tra le celle della tabella e il contenuto della cella. Come il cellpadding, il valore predefinito è impostato su due pixel, quindi è necessario impostarlo su 0 se non si desidera la spaziatura delle celle.
Per aggiungere la spaziatura delle celle a una tabella, scrivi:
cellpacing="20">
Questa tabella ha uno spazio tra le celle di 20.
Le celle saranno separate da 20 pixel.
L'attributo identifica quali parti del bordo che circondano l'esterno di una tabella saranno visibili. Puoi inquadrare il tuo tavolo su tutti e quattro i lati, su un lato qualsiasi, in alto e in basso, a sinistra e a destra o nessuno.
Ecco l'HTML per una tabella con solo il bordo sinistro:
frame="lhs">
Questo tavolo
avrà
solo il
lato sinistro incorniciato.
E un altro esempio con il frame inferiore:
frame="sotto">
Questo tavolo ha una cornice sul fondo.
Dai un'occhiata ad alcune tabelle con cornici.
L'attributo è simile all'attributo frame, solo che influisce sui bordi attorno alle celle della tabella. Puoi impostare regole su tutte le celle, tra le colonne, tra gruppi come TBODY e TFOOT o nessuno.
Per costruire una tabella con righe solo tra le righe, scrivi:
regole="righe">
Questo tavolo 4x4 ha
le righe non le colonne
delineato con il
attributo delle regole.
E un altro con linee tra le colonne:
regole="cols">
Questo è
un tavolo
dove il
colonne
siamo
evidenziato
Il l'attributo fornisce informazioni sulla tabella per lettori di schermo e altri interpreti che potrebbero avere problemi a leggere le tabelle. Per utilizzare l'attributo di riepilogo, scrivi una breve descrizione della tabella e la inserisci come valore dell'attributo. Il riepilogo non verrà visualizzato nella pagina Web nella maggior parte dei browser Web standard.
Ecco come scrivere una semplice tabella con un riepilogo:
sommario="Questa è una tabella di esempio che contiene informazioni di riempimento. Lo scopo di questa tabella è dimostrare un riassunto.">
colonna 1 riga 1.
colonna 2 riga 1.
colonna 1 riga 2.
colonna 2 riga 2.
L'attributo definisce la larghezza della tabella in pixel o come percentuale dell'elemento contenitore. Se la larghezza non è impostata, la tabella occuperà solo lo spazio necessario per visualizzare i contenuti, con una larghezza massima uguale alla larghezza dell'elemento padre.
Per creare una tabella con una larghezza specifica in pixel, scrivi:
larghezza="300">
Questa tabella è l'80% della larghezza del contenitore in cui si trova.
E per costruire una tabella con una larghezza che è una percentuale dell'elemento genitore, scrivi:
larghezza="80%">
Questa tabella è l'80% della larghezza del contenitore in cui si trova.
Attributo TABLE HTML 4.01 deprecato
C'è un attributo dell'elemento TABLE che è deprecato in HTML 4.01 e obsoleto in HTML5: align. Questo attributo ti consente di impostare la posizione della tabella sulla pagina rispetto al testo accanto. Questo attributo è stato deprecato in HTML 4.01 e dovresti evitare di usarlo. Invece, dovresti usare la proprietà CSS o il margine sinistro: auto; e margine destro: auto; stili. La proprietà float fornisce un risultato più vicino a quello fornito dall'attributo align, ma può influenzare il modo in cui viene visualizzato il resto del contenuto della pagina. Il margine destro: auto; e margine sinistro: auto; sono ciò che il W3C raccomanda come alternativa.
Ecco un esempio deprecato che utilizza l'attributo align:
align="right">
Questa tabella è allineata a destra.
Il testo scorre intorno ad esso a sinistra.
E per ottenere lo stesso effetto con HTML valido (non deprecato), scrivi:
style="float: right;">
Questa tabella è allineata a destra.
Il testo scorre intorno ad esso a sinistra.
Attributi TABLE obsoleti
Le informazioni precedenti descrivono gli attributi dell'elemento HTML che sono validi in HTML 4.01 ma sono obsoleti in HTML5.
Quanto segue descrive gli attributi TABLE che non sono validi in nessuna specifica corrente. Se non ti interessa se le tue pagine vengono convalidate e i tuoi utenti utilizzano un browser che supporta questi elementi, puoi utilizzare questi elementi. Ma la maggior parte di essi non è supportata nei browser moderni o dispone di alternative più conformi agli standard.
Non è consigliabile utilizzare questi attributi sulle tue tabelle HTML.
L'attributo è un vecchio attributo incluso prima che i CSS fossero ampiamente supportati. Ti permette di cambiare il colore di sfondo della tabella. Puoi impostare un nome di colore o un codice esadecimale. Questo attributo funziona ancora in molti browser, ma per HTML a prova di futuro, non dovresti usarlo e usare invece CSS.
L'alternativa migliore a questo attributo è la proprietà style.
Per cambiare il colore di sfondo di una tabella, scrivi:
style="colore-sfondo: #ccc;">
Questa tabella ha uno sfondo grigio.
Simile all'attributo bgcolor, l'attributo bordercolor ti permette di cambiare il colore dell'attributo. Questo attributo è supportato solo da Internet Explorer. Invece, dovresti usare la proprietà di stile del colore del bordo.
Per cambiare il colore del bordo del tuo tavolo, scrivi:
style="border-color: red;">
Questa tabella ha un bordo rosso.
Gli attributi bordercolorlight e bordercolordark sono stati inclusi in Internet Explorer per consentirti di creare un bordo 3D attorno alla tua tabella. Tuttavia, a partire da IE8, questo è supportato solo in modalità standard IE7 e Modalità stranezze. Microsoft afferma che queste proprietà non sono più supportate.
Per un breve periodo, l'attributo cols sull'elemento TABLE è stato proposto per aiutare i browser a sapere quante colonne aveva una tabella. La premessa era che questo avrebbe aiutato ad accelerare il rendering di tabelle di grandi dimensioni. Tuttavia è stato implementato solo da Internet Explorer e, a partire da IE8 e versioni successive, è supportato solo in modalità standard IE7 e modalità quirks.
Poiché esiste un attributo di larghezza (obsoleto in HTML5), molte persone presumevano che esistesse anche un attributo di altezza per le tabelle. Ma poiché le tabelle sono conformi alla larghezza del loro contenuto o alla larghezza definita nell'attributo CSS o larghezza, l'altezza non può essere vincolata. Quindi, invece, i browser hanno permesso all'attributo height di definire l'altezza minima della tabella. Se il tavolo fosse più alto di quell'altezza, verrebbe visualizzato più alto. Ma dovresti usare la proprietà.
Con la proprietà CSS altezza puoi vincolare l'altezza se usi anche la proprietà CSS per definire cosa succede con qualsiasi contenuto in eccesso.
Per impostare l'altezza minima su un tavolo, scrivi:
style="altezza: 30em;">
Questa tabella è alta almeno 30 ems.
I due attributi e lo spazio aggiunto attorno ai lati sinistro/destro (hspace) e superiore/inferiore (vspace) della tabella. Dovresti invece usare la proprietà style.
Per impostare lo spazio verticale su 20 pixel e lo spazio orizzontale su 40 pixel, scrivi:
style="margine: 20px 40px;"
Questa tabella ha un vspace di 20 pixel e uno hspace di 40 pixel.
L'attributo è un attributo booleano che definisce se il contenuto della tabella deve essere a capo del bordo dell'elemento padre o della finestra o forzare lo scorrimento orizzontale. Invece, dovresti definire le caratteristiche di wrapping di ogni cella della tabella usando la proprietà CSS.
Per fare in modo che una colonna con molto testo non vada a capo, scrivi:
style="white-space: nowrap;">Questa è una colonna con un sacco di contenuti. Ma anche se è più largo del contenitore, il testo non dovrebbe andare a capo della riga successiva, ma costringere invece la finestra del browser a scorrere orizzontalmente per vedere tutto il contenuto.
Infine, l'attributo definisce come il contenuto di ogni cella deve essere allineato verticalmente all'interno della cella. Invece di questo attributo non valido, dovresti usare la proprietà CSS su ogni cella di cui vuoi cambiare l'allineamento. Non noterai gli effetti di questo stile a meno che il contenuto della cella non sia inferiore allo spazio disponibile creato da altre celle più grandi.
Per forzare l'allineamento di una cella in basso (anziché al centro, come impostazione predefinita), scrivi:
Questa cella è più lunga delle altre e quindi costringerà l'altezza ad essere più alta. Quindi vedrai che la cella allineata verticalmente è allineata in basso.
style="vertical-align: bottom;">Contenuto in basso.
Contenuto in mezzo.