L'attributo HTML larghezza viene utilizzato per impostare la larghezza di una cella di tabella, che sovrascrive il valore predefinito. È obsoleto. Utilizza i CSS per controllare il layout delle celle nelle tabelle HTML.
Impostazione della larghezza delle colonne della tabella
L'attributo larghezza, ora deprecato, una volta lo era metodo standard regolare la larghezza delle colonne della tabella. Per impostazione predefinita, il browser regolerà le colonne della tabella in modo che corrispondano al suo contenuto. Ma se hai bisogno di controllare la larghezza di ogni colonna, puoi farlo regolando la larghezza di ciascun elemento
| Magro | Davvero davvero davvero ampio |
|---|---|
| Poco |
Come puoi vedere, nel primo caso non abbiamo applicato alcun CSS o HTML td width . Cosa farà il browser con una tabella del genere?
| Magro | Davvero davvero davvero ampio |
| Poco |
Il browser ha assegnato molto più spazio alla seconda colonna rispetto alla prima. Ora faremo la stessa cosa, ma utilizzeremo l'attributo width per forzare le colonne ad avere la stessa dimensione:
| Magro | Davvero davvero davvero ampio |
|---|---|
| Poco | Tanti, tanti, tanti, tanti contenuti, così tanti che potremmo persino aver bisogno di un'interruzione di riga. |
In entrambi i casi, il browser deve assegnare a ciascuna colonna la stessa larghezza. Ma la prima tabella dovrebbe impostare automaticamente le sue dimensioni per riempire lo spazio disponibile, mentre la seconda ha una larghezza fissa.
| Magro | Davvero davvero davvero ampio |
| Poco | Tanti, tanti, tanti, tanti contenuti, così tanti che potremmo persino aver bisogno di un'interruzione di riga. |
Piuttosto buono. Sfortunatamente, questo non è un codice HTML valido perché Tabella HTML la larghezza è stata deprecata. Ma puoi fare lo stesso con codice semplice CSS:
| Magro | Davvero davvero davvero ampio |
|---|---|
| Poco |
Vediamo come il browser visualizzerebbe una tabella utilizzando i CSS invece dell'attributo width:
| Magro | Davvero davvero davvero ampio |
| Poco | Tanti, tanti, tanti, tanti contenuti, così tanti che richiederanno un'interruzione di riga. |
Altezza della fila del tavolo regolabile
Un altro attributo strettamente correlato alla larghezza è l'altezza ( altezza). Anche questo attributo è deprecato e non deve essere utilizzato. Ma poiché stiamo parlando di regolare la larghezza delle colonne, dobbiamo considerare di regolare l'altezza delle righe. Ecco come veniva fatto prima di utilizzare l'attributo legacy:
| Magro | Davvero davvero davvero ampio |
|---|---|
| Poco | Tanti, tanti, tanti, tanti contenuti, così tanti che richiederanno un'interruzione di riga. |
Come il browser restituisce questo esempio:
Ad essere onesti, non riesco a immaginare perché dovresti controllare l'altezza della linea con utilizzando l'HTML larghezza td. Ha molto più senso configurare l'esterno e imbottitura per il contenuto degli elementi
Opzioni
align Determina l'allineamento orizzontale del contenuto della cella.background Specifica l'immagine di sfondo per la cella.
bgcolor Colore di sfondo della cella.
bordercolor Il colore del bordo.
| ... | |
| ... | ... |
altezza L'altezza della cella.
nowrap Disabilita il ritorno a capo della riga.
rowspan Estende celle verticali.
3.2
4
valign Allinea verticalmente il contenuto della cella.
1.0
1.1
larghezza La larghezza della cella.
Etichetta di chiusura
Non richiesto.
...
Esempio 1: utilizzo di un tag
Etichetta TD Descrizione dei parametri del tag
Parametro ALLINEA
nowrap Disabilita il ritorno a capo della riga.
| rowspan Estende celle verticali. | 3.2 | 4 | valign Allinea verticalmente il contenuto della cella. | 1.0 | 1.1 |
larghezza La larghezza della cella.
Etichetta di chiusura
Non richiesto.
HTML:
| ... | ... |
Descrizione
| rowspan Estende celle verticali. | 3.2 | 4 | valign Allinea verticalmente il contenuto della cella. | 1.0 | 1.1 |
larghezza La larghezza della cella.
Imposta l'allineamento orizzontale del contenuto della cella. Sintassi Argomenti left Allinea il contenuto della cella a sinistra. centro Allineamento centrale.
Non richiesto.
Esempio 1: utilizzo di un tag
destra Allinea a destra.
Descrizione dei parametri del tag
Parametro ALLINEA
giustificare Giustificazione (sia a destra che a sinistra).
Valore predefinito
| Esempio 2: allineamento del contenuto della cella> ... |
Tag TD, parametro di allineamento
larghezza La larghezza della cella.
Parametro SFONDO
Non richiesto.
Esempio 1: utilizzo di un tag
Specifica un'immagine da utilizzare come immagine di sfondo di una cella di tabella. A differenza delle immagini normali, lo sfondo non ha larghezza o altezza impostate e viene sempre visualizzato a dimensione intera al 100%. Se l'immagine è di dimensioni inferiori rispetto alla larghezza o all'altezza della cella, l'immagine viene ripetuta orizzontalmente verso destra e verso il basso, allineandosi come un mosaico. Per questo motivo al bivio
immagini di sfondo
Potrebbero verificarsi differenze visibili che i visitatori del sito noteranno. Quando scegli un'immagine di sfondo, assicurati che ci sia abbastanza contrasto tra essa e il contenuto della cella. Le immagini animate possono essere utilizzate come sfondi.
Formato GIF
I numeri esadecimali vengono utilizzati per specificare i colori. Il sistema esadecimale, a differenza del sistema decimale, si basa, come suggerisce il nome, sul numero 16. I numeri saranno i seguenti: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A , B, C , D, E, F. I numeri da 10 a 15 vengono sostituiti in lettere latine. I numeri maggiori di 15 nel sistema esadecimale si formano combinando due numeri in uno solo. Ad esempio, il numero 255 nel sistema decimale corrisponde al numero FF in sistema esadecimale. Per evitare confusione nel determinare il sistema numerico, prima numero esadecimale inserisci il simbolo cancelletto #, ad esempio #666999. Ciascuno dei tre colori – rosso, verde e blu – può assumere valori da 00 a FF. Pertanto, il simbolo del colore è diviso in tre componenti #rrggbb, dove i primi due simboli indicano la componente rossa del colore, i due centrali il verde e gli ultimi due il blu.
Descrizione dei parametri del tag
Dipende dal browser e dalla sua versione, solitamente utilizzato bianco sfondo.
Parametro ALLINEA
colore di sfondo
Esempio 4: colore di sfondo della cella
| ... |
| ... |
Parametro BORDERCOLOR
| rowspan Estende celle verticali. | 3.2 | 4 | valign Allinea verticalmente il contenuto della cella. | 1.0 | 1.1 |
larghezza La larghezza della cella.
Imposta il colore del bordo attorno alla cella. La cornice viene visualizzata una volta installata parametro del bordo con un valore di tag diverso da zero
| ... | ||||||||||||||||||
| ... | ... |
Parametro COLSPAN
Riso. 1. Un esempio di tabella in cui viene utilizzata l'unione orizzontale delle celle
La tabella mostrata in Fig. 1 contiene due righe e due colonne e le celle orizzontali superiori sono combinate utilizzando il parametro colspan.
Non richiesto.
Esempio 1: utilizzo di un tag
Descrizione dei parametri del tag
Esempio 6: Unione di celle
| cella 1 | |
| cella 2 | cella 3 |
Parametro ALTEZZA
| rowspan Estende celle verticali. | 3.2 | 4 | valign Allinea verticalmente il contenuto della cella. | 1.0 | 1.1 |
larghezza La larghezza della cella.
Il browser stesso imposta l'altezza della tabella e delle sue celle in base al loro contenuto.
Non richiesto.
Esempio 1: utilizzo di un tag
Descrizione dei parametri del tag
Tuttavia, se utilizzi il parametro altezza, l'altezza delle celle verrà modificata. Ci sono due opzioni possibili qui. Se il valore dell'altezza è inferiore al contenuto della cella, questo parametro verrà ignorato. Quando l'altezza di una cella è impostata su un valore superiore al suo contenuto, viene aggiunto uno spazio vuoto verticale.
Parametro ALLINEA
L'altezza viene calcolata in base al contenuto della cella.
| ... |
Tag TD, parametro di altezza
larghezza La larghezza della cella.
Parametro NOWRAP
Non richiesto.
Esempio 1: utilizzo di un tag
Descrizione dei parametri del tag
Per impostazione predefinita, nowrap non è impostato.
Parametro ALLINEA
Esempio 8: utilizzo del parametro nowrap
| ... |
Parametro ROWSPAN
Riso. 2. Un esempio di tabella in cui viene utilizzata l'unione verticale delle celle
Nella figura mostrata. 2 contiene due righe e due colonne e le celle verticali di sinistra vengono combinate utilizzando il parametro rowspan.
Non richiesto.
Esempio 1: utilizzo di un tag
Qualsiasi numero intero positivo maggiore di 2.
Descrizione dei parametri del tag
Esempio 9: Unione di celle
| cella 1 | cella 2 |
| cella 3 |
Parametro VALIGN
| rowspan Estende celle verticali. | 3.2 | 4 | valign Allinea verticalmente il contenuto della cella. | 1.0 | 1.1 |
larghezza La larghezza della cella.
Imposta l'allineamento verticale del contenuto della cella. Per impostazione predefinita, il contenuto di una cella si trova verticalmente al centro.
Non richiesto.
Esempio 1: utilizzo di un tag
top Allinea il contenuto della cella al bordo superiore della riga.Descrizione dei parametri del tag
Parametro ALLINEA
mezzo Allinea al centro.
| ... | ... |
baseline Allineamento alla linea di base, che aggancia il contenuto della cella su una riga.
| rowspan Estende celle verticali. | 3.2 | 4 | valign Allinea verticalmente il contenuto della cella. | 1.0 | 1.1 |
larghezza La larghezza della cella.
Esempio 10: allineamento in una cella Tag TD, parametro valign Parametro LARGHEZZA Imposta la larghezza della cella. Se la larghezza totale del contenuto supera la larghezza della cella specificata, il browser proverà a "schiacciarlo". date dimensioni
Non richiesto.
Esempio 1: utilizzo di un tag
a causa della formattazione del testo. Nei casi in cui ciò non è possibile, ad esempio, la cella contiene immagini,
Descrizione dei parametri del tag
parametro di larghezza
Parametro ALLINEA
verrà ignorato e la nuova larghezza della cella verrà calcolata in base al suo contenuto.
| ... | ... |
La larghezza viene calcolata in base al contenuto della cella.
COL specifica la larghezza e altri attributi di una o più colonne della tabella. Se questo tag è presente, il browser inizia a mostrare il contenuto della tabella senza attendere che venga completamente caricata.
COLGROUP è progettato per impostare la larghezza e lo stile di una o più colonne della tabella. TABLE funge da contenitore per gli elementi che definiscono il contenuto della tabella. Qualsiasi tabella è composta da righe e celle, specificate utilizzando i tag TR e TD. allineare l'attributo
| Attributo | allineare |
specifica l'allineamento in una cella. Di seguito una tabella di valori e un esempio:
COLGROUP è progettato per impostare la larghezza e lo stile di una o più colonne della tabella. Cella 1 Cella 2 attributo di sfondo sfondo
| Attributo | allineare |
definisce l'immagine che verrà inserita nella cella. L'equivalente nei CSS è la proprietà
COLGROUP è progettato per impostare la larghezza e lo stile di una o più colonne della tabella. immagine di sfondo Aggiunge un colore di sfondo a una determinata cella. Il valore deve includere il colore di sfondo. L'equivalente nei CSS è la proprietà colore di sfondo sfondo
| Attributo | allineare |
attributo colspan
COLGROUP è progettato per impostare la larghezza e lo stile di una o più colonne della tabella. colspan utilizzato per unire le celle orizzontalmente. L'attributo viene utilizzato spesso, per capirlo vediamo un esempio:
| Linea 1 | ||
| Linea 2 | Linea 2 | |
| Linea 3 | Linea 3 | Linea 3 |
attributo altezza
COLGROUP è progettato per impostare la larghezza e lo stile di una o più colonne della tabella. altezzaè responsabile dell'altezza della cella. Accetta valori in pixel e percentuali. È disapprovato ed è considerato migliore utilizzare i CSS, cosa con cui sono d'accordo. Di seguito è riportato un esempio:
| Attributo | allineare |
attributo rowspan
COLGROUP è progettato per impostare la larghezza e lo stile di una o più colonne della tabella. estensione delle righeè responsabile dell'unione delle celle verticalmente. L'attributo è utile per creare tabelle complesse. Di seguito è riportato un esempio:
| Attributo | allineare |
| Cella 3 |
attributo valign
COLGROUP è progettato per impostare la larghezza e lo stile di una o più colonne della tabella. valign usato per allineamento verticale contenuto della cella. Di seguito una tabella di valori e un esempio:
| Ciao | Lorem ipsum dolor sit amet, consectetur élite adipica. Vestibolo dell'egestas orci. Vivamus vitae pretium neque. Vestibolo ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Ut finibus commodo nibh, in accumsan nulla finibus at. Etiam nec lacus eu turpis volutpat sodales. Ut pretium dui lacus, non commodo est placerat malesuada. Nulla bibendum quam elit, in placerat ex placerat ut. Curabitur non aliquet massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nam gravida mi quis enim vulputate, sed convallis magna ultrice. Proin purus enim, fermentum vel tincidunt id, bibendum eget Felis. |
attributo larghezza
COLGROUP è progettato per impostare la larghezza e lo stile di una o più colonne della tabella. larghezzaè responsabile della larghezza della cella. Accetta valori in pixel e percentuali. È disapprovato ed è considerato migliore utilizzare i CSS, cosa con cui sono d'accordo. Di seguito è riportato un esempio:
| Attributo | allineare |
Ciao, cari lettori del sito blog. Porto alla vostra attenzione un altro articolo, che sarà dedicato a cos'è una tabella in Html, quali tag servono per crearla (Tr, Th, Td, Table, Colspan, Cellpadding, Cellspacing), come impostare sfondo e bordi per questo, e anche molto altro ancora.
Nonostante il fatto che il layout tabellare del sito () in Linguaggio HTML() viene gradualmente sostituito da quello basato su blocchi, è ancora necessario conoscere i tag principali e la possibilità di personalizzare le tabelle. Ad esempio, il motore utilizza ancora un layout obsoleto e, se desideri apportare modifiche, aspetto le sue pagine, allora questa conoscenza ti aiuterà.
Anche semplice inserimento Il codice del contatore delle visite potrebbe richiedere la comprensione dei principi di costruzione delle tabelle in HTML. Permettimi di ricordarti che abbiamo già considerato, così come.
Tabelle in Html - elementi Table, Tr, Th, Td
Al giorno d'oggi, il layout delle tabelle è passato in secondo piano con l'avvento dei CSS, ma nonostante ciò è spesso il massimo in modo conveniente la presentazione delle informazioni rimane ancora quella del buon vecchio tablet ed è ancora necessario conoscerne i tag principali.
Prima, anche prima Implementazione dei CSS, i webmaster generalmente non potevano farne a meno, perché era su di essi che si basava l'intero layout dei siti. Sono stati utilizzati non solo i tag base Table, Tr, Th e Td, ma anche tutta la ricca gamma di elementi ausiliari (Col, Tbody, Caption, Rowspan, Colspan, ecc.). Su Internet è ancora possibile trovare siti e forum creati sulla base del layout tabellare, che possono fungere da ulteriore incentivo per studiare le basi della loro costruzione.
Le tabelle nel linguaggio Html sono un elemento speciale, perché fondamentalmente l'elemento Table è a livello di blocco, ma allo stesso tempo non occupa tutto lo spazio a sua disposizione in larghezza, come fanno gli altri elementi di blocco. In larghezza occupa solo lo spazio necessario per accogliere il contenuto, né più né meno.
Tuttavia, sotto tutti gli altri aspetti, il tag Table si comporterà esattamente come un elemento blocco. Ad esempio, sulla pagina web verranno visualizzati i segni che si susseguono nel codice essere posizionati uno sotto l'altro, anche se le loro dimensioni permetterebbero loro di posizionarsi sulla stessa linea. Un'altra caratteristica è che hanno una struttura piuttosto complessa, nella quale ci si può facilmente confondere.
Sono formati secondo il seguente principio. L'intera tabella è incorniciata dai tag Table di apertura e chiusura, all'interno dei quali le sue righe vengono create utilizzando Tr, ad esempio, in questo modo:
Ma all'interno di Tr, le celle vengono create utilizzando Td. Possono anche essere create utilizzando Th, e la differenza tra queste celle e quelle create utilizzando gli elementi Td sarà solo puramente visiva. Funzionalmente, gli elementi Td e Th funzionano in modo identico.
Ma il contenuto di una cella creata con il tag Td sarà allineato a sinistra, mentre il contenuto di una cella creata con il tag Th sarà allineato al centro e sarà anche in grassetto nel carattere utilizzato. Gli stessi elementi Th sono stati introdotti proprio per creare intestazioni di colonne e righe per le tabelle.
Ed è all'interno delle celle Td o Th che si trova il contenuto. Tutto ciò che vedi in una pagina web all'interno di una tabella si troverà esattamente all'interno delle celle formate dai tag di apertura e chiusura Td o Th:
Ma la creazione stessa dei segni avviene riga per riga: apriamo Tr e quindi chiudiamo Tr. Quante coppie di elementi Tr hai, il numero di righe che otterrai. Quante colonne ci saranno?
Esattamente tante celle (Td o Th) quante ne crei in ogni riga (Tr). Se vuoi creare un segno semplice e simmetrico (vedi immagine sopra), devi rendere lo stesso numero di celle (Td o Th) in ciascuna riga.
Quindi, le tabelle in Html sono formate riga per riga: Tr è responsabile della formazione delle righe e Td o Th sono responsabili della formazione delle colonne. Ciò che è degno di nota è che all'interno di Td o Th puoi inserire assolutamente qualsiasi contenuto: testo, elementi in linea o di blocco ( , immagini che utilizzano , intestazioni, paragrafi), ecc.
Quello. Si scopre che non può esserci una tabella nel codice Html che sia composta da meno di tre elementi: Table, Tr, Td (o Th).
Tabella: l'elemento principale della tabella
Cominciamo dal tag Table, cioè dagli attributi che possiede:
In realtà questi non sono tutti gli attributi, ma solo quelli più rilevanti e utilizzati. al momento. Massimo informazioni dettagliate per tutti i tipi di attributi del tag Table, così come qualsiasi altro elemento.
Perché la tabella è un elemento a blocchi che tende a non occupare tutto lo spazio disponibile in larghezza, il che significa che possiamo applicarlo allineamento orizzontale al tag Table utilizzando l'attributo Allineare.
Ma qui non è così semplice, perché usare i valori sinistra e destra in Allinea non porterà ad allineare il nostro segno a sinistra o a destra, ma ad avvolgere il testo attorno ad esso, in completa analogia con come lo vedevamo con . Bene, se usi il valore Centro per Allinea, sarà semplicemente allineato al centro senza alcun avvolgimento.
Utilizzando Attributo larghezza puoi impostare la larghezza della tabella, e puoi utilizzare sia valori assoluti in pixel che valori relativi in percentuale (100% corrisponderà all'intero spazio disponibile in larghezza).
Andiamo avanti. Imbottitura cellulare ti permette di impostare il rientro del contenuto nelle celle (Td o Th) dai suoi bordi (su tutti e quattro i lati contemporaneamente) e Spaziatura celle ti permette di impostare la distanza tra le celle adiacenti della tabella in pixel (il valore predefinito èdue pixel ). Penso che l'idea sia chiara, ma sarà più chiaro mostrarlo con un esempio:
I seguenti attributi del tag Table sono responsabili dello sfondo della nostra tabella: questi sono gli elementi Bgcolor e Background. Come probabilmente ricorderai, utilizzando Background (che, tra l'altro, viene utilizzato solo nel tag Body e negli elementi - Table, Tr, Th o Td) puoi selezionare qualsiasi immagine dal file come sfondo, il cui percorso sarà specificato come valore questo attributo.
Questa immagine, come una tessera, coprirà l'intera pagina web (nel caso Etichetta del corpo) o l'intera tabella (nel caso di Table), ad esempio, in questo modo:
Quando utilizzi l'attributo Bgcolor in Table, dovrai specificare come valore il colore con cui vuoi riempire la tua tabella. vedere il collegamento fornito.
Andiamo avanti. Il prossimo è l'attributo Confine, che è responsabile della formazione della cornice. Ci sono sottigliezze nello spiegare come disegnare le cornici, ma per semplicità possiamo dire che la cornice verrà disegnata attorno alle celle e attorno alla tabella stessa. In Bordo avrai la possibilità di impostare lo spessore di questo bordo in pixel. Per impostazione predefinita, non viene disegnato alcun bordo (bordo=0).
Ma va tenuto presente che in Cornice HTML La tavola è in rilievo. Avrà i colori dei lati chiari e scuri, che sembrano caduti dall'alto angolo superiore luce dello schermo. A questo proposito va tenuto presente che in Border non si imposta la larghezza dell'intera cornice. A questo spessore verrà aggiunta luce e lato oscuro. In generale, è un po 'confuso, ma devi guardarlo con un esempio.
Con l’elemento Tabella considereremo di aver finito ed è ora di passare a quello successivo. La particolarità di Tr è che è puramente di servizio e non è visibile nella pagina web. Fondamentalmente, Tr è un contenitore invisibile per il Td o il Th che si troverà al suo interno.
Tr - elemento riga della tabella in Html
Usando il tag Tr, posizioniamo semplicemente tutte le celle in esso contenute (Td o Th) in una riga e il gioco è fatto, Tr stesso non è visibile. Da ciò segue un'importante conclusione: tutti gli attributi di questo tag vengono applicati specificamente alle celle contenute in questo contenitore. Gli attributi Tr attualmente più comunemente utilizzati sono presentati nella figura:
Allinea funziona allo stesso modo dei paragrafi o dei titoli, il contenuto di tutte le celle (Td o Th) di una determinata riga (Tr) è allineato a sinistra o a destra o centrato.
Valign imposta l'allineamento verticale del contenuto in tutte le celle (Td o Th) di una determinata riga (Tr). I valori Alto, Medio e Basso impostano l'allineamento rispettivamente su alto, medio e basso. L'allineamento predefinito è Medio.
Il valore Linea di base specifica l'allineamento del testo in Td o Th di questa linea lungo la linea di base del carattere. Questo può essere conveniente quando hai cellule diverse il testo ha dimensione diversa font e l'allineamento della linea di base in Valign renderà tale tabella più utilizzabile per i lettori (secondo me):
Solo le prime righe di contenuto nelle celle (Td o Th) verranno allineate lungo la linea di base del carattere e tutte le altre righe di contenuto verranno posizionate man mano che ciò accade.
Puoi anche utilizzare l'attributo Bgcolor nel tag Tr, riempiendo queste righe con il colore di sfondo di cui hai bisogno. Quello. Tutte le celle in questa riga sono riempite con il colore scelto:
Come puoi vedere, è Td o Th all'interno di questo elemento Tr che viene riempito con il colore di sfondo, perché la linea stessa non è visibile nella piastra.
Td o Th - elementi della cella della tabella in Html
Bene, ora passiamo all'elemento più importante: la cella, ovvero gli attributi dei tag Td e Th, che sono ancora in uso:
Align e Valign nei tag Td o Th dicono al browser esattamente come il contenuto dovrebbe essere allineato su larghezza e altezza e non su tutta la riga, come abbiamo visto di recente. Inoltre, gli attributi di una cella specifica avranno la priorità attributi simili linee.
Quelli. nell'intera riga, il contenuto delle celle può essere allineato a destra, ma in alcune singole righe è possibile impostare un allineamento diverso e avrà priorità (interrupt) sull'allineamento specificato nel tag Tr.
Larghezza e Altezza ti consentono di impostare l'altezza e la larghezza della cella, sia in pixel che in percentuale (per larghezza). Bgcolor e Background negli elementi Html Td o Th ti consentono di impostare uno sfondo separato (sotto forma di colore o immagine) per ogni cella specifica:
Nowrap in Td o Th impedisce il trasferimento del contenuto nella cella nuova linea, a meno che non appaia nel testo di questo contenuto. Cioè, in questo caso caratteri di spazio bianco non verrà utilizzato per il ritorno a capo automatico del testo. Probabilmente, questo attributo può essere considerato una sorta di analogo di quello descritto.
Bene, ora siamo arrivati ad attributi molto interessanti e, soprattutto, utili: Colspan e Rowspan. Significano portata. Rowspan è l'intervallo di righe e Colspan è l'intervallo di colonne. Servono rispettivamente per combinare le celle in una colonna o in una riga.
Se desideri combinare più celle in una colonna della tabella, dovrai utilizzare Rowspan, perché copri più righe con una cella. E se vuoi combinare più celle di seguito, dovrai utilizzare Colspan, perché Devi coprire più colonne con una cella.
Colspan e Rowspan sono impostati per impostazione predefinita uguale a uno, cioè. ogni cella appartiene ad una colonna e ad una riga. Non appena hai unito le celle, queste iniziano già ad appartenere a più colonne o più righe (o entrambe contemporaneamente).
Didascalia: titolo della tabella
C'è un altro elemento aggiuntivo chiamato "Titolo tabella HTML" ed è formato utilizzando i tag Caption. Questo elemento viene utilizzato non più di una volta (o non viene utilizzato affatto) e viene posizionato immediatamente dopo il tag di apertura Table. Solo il contenuto in linea può trovarsi all'interno di una didascalia e non devono esserci elementi di blocco al suo interno.
La posizione della didascalia può essere impostata utilizzando l'attributo Allinea. I valori Superiore e Inferiore imposteranno rispettivamente la posizione dell'intestazione sopra e sotto la tabella. I valori Left e Right non sono attualmente utilizzati, perché funzionano in modo completamente diverso in browser diversi. Sarebbe meglio dimenticarsene. Quelli. Di in generale La didascalia può essere posizionata solo sotto o sopra il segno (questo valore viene utilizzato per impostazione predefinita):
In generale si può fornire il seguente schema a blocchi di costruzione:
Diamo ora un'occhiata a un esempio di come creare una tabella con celle di dimensioni diverse, alcune delle quali si estenderanno su più colonne o righe. Come vi abbiamo già detto poco prima, vengono creati riga per riga in Html. Affidiamoci allo schema mostrato nella figura situata appena sopra.
Per prima cosa scriviamo il tag di apertura Table e subito dopo apriamo il tag della prima riga Tr. La prima riga della nostra tabella futura è costituita da una cella che si estende su due colonne contemporaneamente, quindi dovrai aggiungere l'attributo Colspan=2 al tag di questa cella:
Successivamente, chiudiamo il tag della prima riga (Tr) e apriamo il tag di quella successiva, che avrà già due celle. La prima cella della seconda riga non è significativa e sarà costituita dai soliti tag di apertura o chiusura Td o Th, tra i quali verrà racchiuso il suo contenuto.
Ma la seconda cella della seconda riga è notevole, perché copre due righe contemporaneamente e quindi dovremo aggiungere l'attributo Rowspan=2 al suo tag:
Bene, dobbiamo solo descrivere la terza riga. La prima cella di questa riga, ancora una volta, non rappresenta nulla di speciale, ma la seconda è già stata descritta da noi nella seconda riga, il che significa che non sarà più qui. Ogni cella può essere descritta una sola volta, spero che questo sia chiaro. Quello. la terza riga della tabella sarà simile a questa:
Bene, ora combiniamo tutto questo in un unico codice e vediamo cosa succede:
In realtà, è andata come avevamo previsto. È chiaro che qui non c'è nulla di complicato: basta comprendere la logica di come funzionano gli attributi Colspan e Rowspan.
Layout tabellare (obsoleto).
Ora parliamo di un concetto come il layout tabulare e del motivo per cui sono diventati lo strumento principale nel linguaggio di markup ipertestuale in assenza di CSS (ora, ovviamente, ovunque). Il fatto è che solo le tabelle consentono di risolvere in modo semplice e flessibile il problema principale nel layout del sito Web: posizionare gli elementi di blocco nel codice HTML in una riga.
Come già sapete, gli elementi blocco, se inseriti uno dopo l'altro nel codice Html, verranno posizionati uno sotto l'altro nella pagina web. A proposito, gli stessi segni sono anche elementi di blocco e puoi utilizzare due metodi per metterli in una riga.
Il primo è assegnare l'attributo Allinea con il valore Sinistra al tag Tabella della prima delle tabelle, per cui il secondo si troverà già a destra del primo e premerà contro di esso. Scrivendo Align=left e il secondo nel tag Table, possiamo mettere fino a tre pezzi in una riga.
Ma il primo metodo non ci permette di allontanarli l’uno dall’altro, perché a quel tempo i CSS non erano ancora utilizzati. Pertanto, il modo più conveniente per posizionare più tabelle (o qualsiasi altro elemento di blocco) in una riga era creare una tabella con una riga (Tr) e il numero di celle di cui avevamo bisogno (Td o Th), commisurato al numero di blocchi elementi che dovremmo posizionare in una riga.
Quindi, per il posizionamento più semplice di più pezzi in fila, dovrai creare le cosiddette tabelle nidificate, quando un'altra viene inserita in una cella come contenuto:
Ora a Elementi HTML posizionati nelle celle della tabella che abbiamo creato, sarà possibile applicare tutti gli attributi sopra descritti, sia per i tag Tr che per i tag Td o Th. Sarà possibile posizionare il contenuto nelle celle, impostare i rientri richiesti, riempirlo con lo sfondo, ecc.
Quelli. ora senza utilizzando i CSS(che prima non esisteva) possiamo allineare il contenuto (i nostri elementi a blocco), e rendendo invisibile la cornice del segno possiamo così posizionare il contenuto sulla pagina web. Ad esempio, non sarà difficile impostare una visualizzazione di testo a tre colonne o qualsiasi cosa desideri.
Se apri codice sorgente qualche vecchio sito, o meglio ancora, un forum, poi con un alto grado di probabilità vedrai molti segni annidati dentro altri, e così via fino alla completa confusione.
Con la disposizione dei tavoli, tali disegni erano usati ovunque, e alcune soluzioni di quel tempo, che ora sarebbero state realizzate in pochissimo tempo, richiedevano strutture molto ingombranti di tablet annidati uno dentro l'altro. Orizzontale e menu verticali per siti web, suddivisione di paragrafi con testi in colonne e molto altro ancora
Tbody, Thead e Tfoot - contenitori per righe in una tabella Html
Ma torniamo di nuovo alle nostre pecore e guardiamo alcuni altri elementi che rendevano possibile in precedenza (quando ancora non esistevano i CSS) impostare immediatamente le proprietà per gran numero righe nel tag Table. Tr stessi sono contenitori invisibili per Td o Th, ma esistono inoltre altri tre tipi di contenitori, che a loro volta fungono da contenitori per Tr.
Usandoli, saremo in grado di impostare immediatamente le proprietà di grande gruppo linee, ad esempio, riempirle con uno sfondo, assegnare l'allineamento desiderato, ecc. Sto parlando di elementi come Thead (per l'intestazione), Tbody (per il contenuto) e Tfoot (per la fine). Quando si crea una tabella, viene scritto prima un gruppo di righe relative all'intestazione (racchiusa nei tag Thead), poi un gruppo di righe relative alla sua fine (Tfoot), e solo successivamente un gruppo di righe relative al suo contenuto principale (Tbody ).
IN Tabella HTML La sezione Thead può essere specificata una sola volta oppure potrebbe non esistere affatto. Lo stesso vale per il contenitore realizzato con elementi Tfoot. Ma deve essere presente almeno una sezione Tbody.
Ma, ad esempio, i segni mostrati in questa pagina vengono visualizzati perfettamente, anche se non mi sono preso la briga di aggiungere i tag Tbody di apertura e chiusura. Tutto è molto semplice: il browser stesso ha aggiunto gli elementi Tbody durante l'analisi del codice, cosa che puoi verificare guardando questo codice risultante:
Ma in pratica, se i webmaster erano soliti creare tabelle complesse, allora Tbody era loro molto utile. Diciamo che hai una tabella con un paio di migliaia di righe e devi regolare l'allineamento in tutte le celle in un modo diverso da quello predefinito. Senza utilizzare Tbody, dovresti aggiungere l'attributo corrispondente a tutti i tag di riga un paio di migliaia di volte.
Ma puoi racchiudere tutte queste migliaia di righe in un contenitore Tbody e scriverci solo attributo richiesto con l'allineamento richiesto. Ciò può alleviare notevolmente il codice HTML da ripetizioni non necessarie. In generale, dentro tabelle semplici gli elementi Tbody, Thead e Tfoot possono essere trascurati, ma in quelli complessi il loro uso è ancora rilevante anche ai nostri tempi, quando esiste tale strumento potente come i CSS.
Col: imposta la larghezza delle colonne della tabella
Col e Colgroup ora hanno quasi la stessa influenza, quindi parliamo del loro utilizzo usando l'elemento Col come esempio. È necessario impostare opportunamente la larghezza di colonne e righe. Col ha due attributi principali, Span e Larghezza, che ti consentono di impostare larghezze diverse per tutte le colonne racchiuse nei tag Col.
Span imposta l'intervallo (la dimensione del contenitore) specificando il numero di colonne a cui verrà applicata la larghezza specificata in Larghezza. Ad esempio, in questo modo:
Quelli. per le prime due colonne della tabella ho impostato la larghezza su 50 pixel, per la terza colonna su 200 pixel e per le restanti due su 100 pixel ciascuna. Tutto è abbastanza semplice e chiaro, secondo me. Ma in realtà, la larghezza delle colonne specificata tramite gli elementi Col è solo una tua dichiarazione, perché quando cambi la dimensione della finestra del browser, la larghezza delle colonne cambierà.
Buona fortuna a te! A presto sulle pagine del blog del sito
Puoi guardare altri video andando su");">
Potresti essere interessato
Seleziona, Opzione, Area testo, Etichetta, Fieldset, Legenda - tag Moduli HTML elenchi a discesa e campo di testo 
Come vengono impostati i colori nel codice Html e CSS, selezione delle sfumature RGB nelle tabelle, output Yandex e altri programmi 
MailTo - cos'è e come creare un collegamento in Html per inviare una Email 
Moduli HTML per il sito: tag Form, Input e Select, Option, Textarea, Label e altri per la creazione di elementi di moduli web
Ogni etichetta
Come creare una tabella in html
Ecco un esempio, codice html:
Tabella di esempio Colonna 1 Colonna 2
Presta attenzione alla cella
Ora diamo uno sguardo più da vicino a tutti gli attributi del tag
| o linee | ||||||||||
| ... | ... |
...
2. Proprietà background="URL" - imposta immagine di sfondo. Al posto dell'URL dovrebbe essere scritto l'indirizzo dell'immagine di sfondo. Esempio
Converte nel seguente contenuto della pagina: Nell'esempio considerato, il ns immagine di sfondo si trova nella cartella img (che si trova nella stessa directory della pagina html) e l'immagine si chiama fon.gif . Tieni presente che nel tag abbiamo aggiunto style="color:white;" . Poiché lo sfondo è quasi nero, per evitare che il testo si confonda con lo sfondo, abbiamo reso il testo bianco. 3. Proprietà bgcolor="color" - imposta il colore di sfondo della tabella. Puoi scegliere qualsiasi colore dall'intera tavolozza (vedi codici e nomi dei colori html) 4. Proprietà border="number" - imposta lo spessore del bordo della tabella. Negli esempi precedenti abbiamo specificato border="1" , il che significa che lo spessore del bordo è 1 pixel. 5. Proprietà bordercolor="color" - imposta il colore del bordo. Se border="0" non ci sarà alcun bordo e il colore del bordo non avrà significato. 6. Proprietà cellpadding="number" - rientro dal frame al contenuto della cella in pixel. 7. Proprietà cellulespacing="numero" - la distanza tra le celle in pixel. 8. Proprietà cols="numero" - numero di colonne. Se non lo imposti, il browser stesso determinerà il numero di colonne. L'unica differenza è che specificando questo parametro molto probabilmente accelererai il caricamento della tabella. 9. Property frame="parameter" - come visualizzare i bordi attorno alla tabella. Può assumere i seguenti valori:
10. Proprietà altezza="numero" - imposta l'altezza della tabella: in pixel o in percentuale. 11. Regole proprietà="parametro" - dove visualizzare i bordi tra le celle. Può assumere i seguenti valori:
|
