Gli attributi della tabella HTML offrono un maggiore controllo sulle tabelle HTML. Ci sono molti attributi disponibili alle tabelle per renderli più interessanti e cambiare l'aspetto della tua pagina.
Attributi elemento TABLE HTML
In HTML5 l'elemento utilizza gli attributi globali e un altro attributo:. Ed è cambiato per avere solo il valore di 1 o vuoto (es. border = ""). Se vuoi cambiare la larghezza del bordo, dovresti usare il larghezza del bordo Proprietà CSS.
Vedi sotto per conoscere gli attributi della tabella HTML5 validi.
Ci sono anche diversi attributi che fanno parte della specifica HTML 4.01 che è diventata obsoleta in HTML5:
- -Utilizzare il CSS
imbottituraproprietà sul tavoloTDeTHelementi. - -Utilizzare la proprietà CSS
border-spacingsul tavolo. - -Usare gli stili CSS
border-color: nero;estile del bordosul tavolo. - -Usare gli stili CSS
border-color: nero;estile del bordosugli elementi appropriati della tabella. - -Invece, dovresti descrivere la struttura del tavolo in a
DIDASCALIAo inserire l'intera tabella in aFIGURAe descrivendolo in aFIGCAPTION. In alternativa, è possibile semplificare la struttura della tabella in modo che non sia necessaria alcuna spiegazione. - -Utilizzare il CSS
larghezzaproprietà.
E un attributo che è stato deprecato in HTML 4.01 ed è anche obsoleto in HTML5.
Ulteriori informazioni sugli attributi TABELLA HTML 4.01.
allineare-Utilizzare il CSSmargineproprietà invece.
Ci sono anche diversi attributi che non fanno parte di alcuna specifica HTML. Utilizza questi attributi se sai che i browser supportati possono gestirli e non ti interessa il codice HTML valido.
- -Utilizzare la proprietà CSS
colore di sfondoanziché. colore del bordo-Utilizzare la proprietà CSScolore del bordoanziché.BORDERCOLORLIGHT-Utilizzare la proprietà CSScolore del bordoanziché.BORDERCOLORDARK-Utilizzare la proprietà CSScolore del bordoanziché.Cols-Non c'è alternativa a questo attributo.altezza-Utilizzare la proprietà CSSaltezzaanziché.- -Utilizzare la proprietà CSS
margineanziché. - -Utilizzare la proprietà CSS
margineanziché. - -Utilizzare la proprietà CSS
white-spaceanziché. - -Utilizzare la proprietà CSS
vertical-alignanziché.
Ulteriori informazioni sugli specifici attributi TABLE del browser.
Attributi elemento TABLE HTML5
Come accennato in precedenza, esiste un solo attributo, oltre agli attributi globali, che è valido su un HTML5 TAVOLO elemento: confine.
Il confine l'attributo viene utilizzato per definire un bordo attorno all'intera tabella e a tutte le celle al suo interno. C'era qualche domanda sul fatto che sarebbe stato incluso nella specifica HTML5, ma è rimasto perché forniva informazioni sulla struttura della tabella, oltre alle semplici implicazioni di stile.
Per aggiungere il confine attributo, si imposta 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" >
Questa è una tabella con un bordo
Esistono attributi HTML 4.01 obsoleti in HTML5. Se hai intenzione di scrivere documenti HTML 4.01, puoi impararli, altrimenti puoi ignorarli. La maggior parte di questi attributi ha alternative, descritte sopra.
Descriviamo gli attributi dell'elemento che sono validi in HTML5 (e HTML 4.01). Questo descrive ilTAVOLO attributi validi in HTML 4.01, ma obsoleti in HTML5. Se si scrivono ancora documenti HTML 4.01, è possibile utilizzare questi attributi, ma la maggior parte di essi ha alternative che renderanno le pagine più a prova di futuro quando ci si sposta su HTML5.
Attributi HTML 4.01 validi
L'attributo che abbiamo descritto sopra. L'unica differenza in HTML 4.01 da 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 5px, scrivi:
<> border = "5" > Questa tabella ha un bordo 5px.
Guarda un esempio di due tabelle con bordi.
L'attributo definisce la quantità di spazio tra i bordi della cella e il contenuto della cella. Il valore predefinito è due pixel. Impostare ilcellpadding a0 se non vuoi spazio tra il contenuto e i bordi.
Per impostare il riempimento della cella su 20, scrivere:
<> cellpadding = "20" > Questo tavolo ha un cellpadding di 20. I bordi della cella saranno separati di 20 pixel.
Guarda un esempio di una tabella con il cellpadding
L'attributo definisce la quantità di spazio tra le celle della tabella e il contenuto della cella. Piacecellpadding, il valore predefinito è impostato su due pixel, quindi è necessario impostarlo su0 se non vuoi spaziatura tra le celle.
Per aggiungere la spaziatura delle celle a una tabella, scrivi:
<> cellspacing = "20" > Questo tavolo ha un cellspacing di 20. Le celle saranno separate di 20 pixel.
Vedi una tabella con cellspacing
L'attributo identifica quali parti del bordo che circondano l'esterno di una tabella saranno visibili.Puoi incorniciare il tuo tavolo su tutti e quattro i lati, su qualsiasi lato, sopra e sotto, a sinistra ea destra, o nessuno.
Ecco l'HTML per una tabella con solo il bordo del lato sinistro:
frame = "ss" >
Questo tavolo avrà solo il lato sinistro incorniciato.
E un altro esempio con il telaio inferiore:
frame = "sotto" >
Questa tabella ha una cornice in basso.
Scopri alcune tabelle con cornici
L'attributo è simile altelaio attributo, solo che influenza i bordi attorno alle celle della tabella. È possibile impostare regole su tutte le celle, tra le colonne, tra gruppi comeTBODY eTFOOT o nessuno.
Per costruire una tabella con linee solo tra le righe, scrivi:
regole = "righe" >
Questo tavolo 4x4 ha le righe non colonne delineato con il attributo delle regole.
E un altro con linee tra le colonne:
rules = "cols" >
Questo è un tavolo dove il colonne siamo evidenziato
Ecco un esempio di una tabella con regole
L'attributo fornisce informazioni sulla tabella per gli screen reader e altri programmi utente che potrebbero avere problemi nella lettura delle tabelle. Per usare ilsommario attributo, scrivi una breve descrizione della tabella e inseriscila come valore dell'attributo. Il riepilogo non verrà visualizzato nella pagina Web nella maggior parte dei browser Web standard.
Ecco come scrivere una tabella semplice con un riepilogo:
<> summary = "Questa è una tabella di esempio che contiene informazioni di riempimento. Lo scopo di questa tabella è di dimostrare un riepilogo." > colonna 1 riga 1 colonna 2 riga 1 colonna 1 riga 2 colonna 2 riga 2
Visualizza una tabella con un riepilogo
L'attributo definisce la larghezza della tabella in entrambi i pixel o come percentuale dell'elemento contenitore. Se lalarghezza non è impostato, la tabella occuperà solo lo spazio necessario per visualizzare il contenuto, con una larghezza massima uguale alla larghezza dell'elemento genitore.
Per costruire una tabella con una larghezza specifica in pixel, scrivi:
<> width = "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:
<> width = "80%" > Questa tabella è l'80% della larghezza del contenitore in cui si trova.
Vedi un esempio di una tabella con una larghezza
Attributo TABELLA HTML 4.01 deprecato
C'è un attributo diTAVOLO elemento deprecato in HTML 4.01 e obsoleto in HTML5:allineare. Questo attributo consente di impostare la posizione della tabella sulla pagina rispetto al testo accanto. Questo attributo è stato deprecato in HTML 4.01 e si dovrebbe evitare di usarlo. Invece, dovresti usare la proprietà CSS o ilmargin-left: auto; emargin-right: auto; stili. Ilgalleggiante proprietà ti dà un risultato che è più vicino a ciò che ilallineare attributo fornito, ma può influire sul modo in cui viene visualizzato il resto dei contenuti della pagina. Ilmargin-right: auto; emargin-left: auto; sono ciò che il W3C raccomanda come alternativa.
Ecco un esempio deprecato usando ilallineare attributo:
<> align = "right" > Questa tabella è allineata a destra Il testo scorre attorno a sinistra
Vedi un esempio deprecato usando ilallineare attributo.
E per ottenere lo stesso effetto con codice HTML valido (non deprecato), scrivi:
<> style = "float: right;" > Questa tabella è allineata a destra Il testo scorre attorno a sinistra
Quanto segue spiegaTAVOLO attributi che non fanno parte di alcuna specifica HTML.
Le informazioni precedenti descrivono gli attributi dell'elemento HTML che sono validi in HTML 4.01 ma sono obsoleti in HTML5.
Quanto segue descriveTAVOLO attributi che non sono validi in alcuna specifica corrente. Se non ti interessa sapere se le tue pagine sono valide e gli utenti utilizzano un browser che supporta questi elementi, puoi utilizzare questi elementi. Ma la maggior parte di essi non sono supportati nei browser moderni o hanno alternative che sono più conformi agli standard.
Non è consigliabile utilizzare questi attributi sulle tue tabelle HTML.
L'attributo è un vecchio attributo che è stato incluso prima che il CSS fosse ampiamente supportato. Ti permette di cambiare il colore di sfondo della tabella. È possibile impostare un nome di colore o un codice esadecimale. Questo attributo funziona ancora in molti browser, ma per l'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 = "background-color: #ccc;" > Questa tabella ha uno sfondo grigio
Simile albgcolor attributo, ilcolore del bordo attributo ti consente di cambiare il colore dell'attributo. Questo attributo è supportato solo da Internet Explorer. Invece, dovresti usare la proprietà di stile border-color.
Per cambiare il colore del bordo del tuo tavolo, scrivi:
style = "border-color: red;" >
Questa tabella ha un bordo rosso.
IlBORDERCOLORLIGHT eBORDERCOLORDARK gli attributi sono stati inclusi in Internet Explorer per consentire di creare un bordo 3D attorno al tuo tavolo. Tuttavia, a partire da IE8 e versioni successive, questo è supportato solo in modalità standard IE7 e modalità strane. Microsoft afferma che queste proprietà non sono più supportate.
Per un breve periodo, ilCols attributo sulTAVOLO l'elemento è stato proposto per aiutare i browser a sapere quante colonne aveva una tabella. La premessa era che questo avrebbe aiutato a velocizzare 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à strane.
Perché c'è unlarghezza attributo (obsoleto in HTML5) molte persone presumevano che esistesse unaltezza attributo anche per le tabelle. Ma perché le tabelle sono conformi alla larghezza del loro contenuto o alla larghezza definita nel CSS olarghezza attributo, l'altezza non può essere limitata. Quindi, invece, i browser hanno permesso ilaltezza attributo per definire l'altezza minima della tabella. Se il tavolo fosse più alto di quell'altezza, apparirà più alto. Ma dovresti usare la proprietà
Con il CSSaltezza proprietà è possibile limitare l'altezza se si utilizza anche la proprietà CSS per definire cosa succede con qualsiasi contenuto in eccesso.
Per impostare l'altezza minima su un tavolo, scrivi:
<> style = "height: 30em;" > Questa tabella ha un'altezza di almeno 30 em.
I due attributi e lo spazio aggiunto attorno ai lati sinistro / destro (hspace) e alto / basso (vspace) del tavolo. Dovresti invece usare la proprietà style.
Per impostare lo spazio verticale su 20 pixel e lo spazio orizzontale su 40 pixel, scrivi:
<> style = "margin: 20px 40px;" Questa tabella ha uno spazio vs di 20 pixel e un hspace di 40 pixel.
L'attributo è un attributo booleano che definisce se il contenuto della tabella deve essere avvolto sul bordo dell'elemento o finestra padre o forzare lo scorrimento orizzontale. Invece, dovresti definire le caratteristiche di avvolgimento di ogni cella di tabella usando la proprietà CSS.
Per fare in modo che una colonna con molto testo non venga avvolta, scrivi:
<> style = "white-space: nowrap;" > Questa è una colonna con un sacco di contenuti. Ma anche se è più largo del contenitore, il testo non dovrebbe essere inserito nella riga successiva, ma imporre invece la finestra del browser per 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 utilizzare la proprietà CSS su ogni cella di cui vuoi modificare 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 una cella ad allineare in basso (piuttosto che al centro, come impostazione predefinita), scrivi:
Questa cella è più lunga del resto e quindi costringerà l'altezza ad essere più alta. Quindi vedrai che la cella allineata verticalmente è allineata al fondo. <> style = "vertical-align: bottom;" > Contenuto in basso. Contenuto nel mezzo.
