Tabelle HTML organizzare e visualizzare i dati utilizzando righe o colonne. Le tabelle sono costituite da celle formate dall'intersezione di righe e colonne. Celle di tabella può contenere qualsiasi elemento HTML come intestazioni, elenchi, testo, immagini, elementi del modulo e altre tabelle. Per ogni tabella, puoi aggiungere un'intestazione associata posizionandola prima o dopo la tabella.

Le tabelle non vengono più utilizzate per l'impaginazione delle pagine web e l'impaginazione dei singoli elementi, in quanto tale tecnica non garantisce la flessibilità della struttura e la reattività del sito, aumentando notevolmente il markup HTML.

Tutti gli elementi della tabella sono disponibili così come i propri attributi.

Creare tabelle in HTML

• Contenuto:

1. Come creare una tabella

La tabella viene creata utilizzando un tag di coppia

Fig. 1. Aspetto della tabella senza formattazione delle proprietà CSS

Per impostazione predefinita, la tabella e le celle non hanno bordi visibili. frontiere impostato utilizzando la proprietà border:

/ * bordi esterni della tabella grigia con uno spessore di 1px * / tabella (bordo: 1px grigio solido;) / * bordi delle celle della prima riga della tabella * / th (bordo: 1px grigio solido;) / * bordi di celle del corpo della tabella * / td (bordo: 1px grigio solido;)

Spaziatura tra le celle della tabella rimosso utilizzando la proprietà table (border-collasso: collasso;).

Larghezza table è per impostazione predefinita uguale alla larghezza del suo contenuto interno. Per impostare la larghezza, è necessario impostare un valore per la proprietà larghezza:

/ * renderà la larghezza della tabella uguale alla larghezza del blocco contenitore in cui si trova * / table (width: 100%;) / * imposterà una larghezza fissa per la tabella * / table (width: 600px;)

Se il riempimento e i bordi sono specificati per le celle della tabella, la larghezza della tabella includerà i seguenti valori:
padding-left e padding-right, larghezza del bordo sinistro più larghezza del bordo destro dell'ultima cella nella riga. Se vengono specificati la larghezza e i bordi delle celle, la larghezza della tabella sarà la somma della larghezza delle celle più la larghezza del bordo sinistro e la larghezza del bordo destro dell'ultima cella nella riga .

2. Come creare righe (righe) di una tabella

Le righe o le righe di una tabella vengono create utilizzando il tag

... Il numero di righe orizzontali nella tabella è determinato dal numero di tag accoppiati .

3. Come creare una cella di intestazione della colonna della tabella

crea un'intestazione di colonna: una cella speciale, il cui testo è evidenziato in grassetto. Il numero di celle di intestazione è determinato dal numero di coppie di tag

4. Come creare una cella del corpo del tavolo

crea celle di tabella, all'interno delle quali vengono inseriti i dati della tabella. Tag accoppiati situati nella stessa riga determinano il numero di celle nella riga della tabella. Numero di coppie di cellule deve essere uguale al numero di coppie di celle... Gli attributi colspan, rowspan, headers sono disponibili per l'elemento.

5. Come aggiungere una didascalia (titolo) a una tabella

Crea una firma della tabella. Aggiunto subito dopo il tag

6. Raggruppamento di righe e colonne della tabella

Crea un gruppo di colonne strutturali evidenziando le celle logicamente uniformi. Raggruppa una o più colonne per una formattazione coerente, consentendo di applicare uno stile alle colonne invece di ripetere gli stili per ogni cella e per ogni riga. Aggiunto subito dopo i tag Riso. 2. Evidenziare le colonne della tabella in un colore diverso utilizzando tag e

7. Raggruppamento delle sezioni della tabella

L'elemento crea un gruppo di intestazioni per le righe della tabella per impostare un aspetto uniforme. Usato in combinazione con elementi

e per indicare ogni parte della tabella.

L'elemento deve essere utilizzato nel seguente ordine: da bambino

, dopo e, e prima , e elementi. Può essere utilizzato una volta all'interno di una tabella.raggruppa il contenuto principale di una tabella. Usato in combinazione con elementi e .

Crea un gruppo di righe per rappresentare le informazioni sugli importi o sui totali, situato nella parte inferiore della tabella. Usato una volta in tavola. Posizionato dopo il tag, prima dei tag

e .

Questo raggruppamento di righe è stato stabilito nello standard nell'aspettativa che i browser, quando visualizzano lunghe tabelle, assicurino che le righe di dati vengano fatte scorrere mantenendo stazionari l'overhead e il sottotitolo, e quando vengono stampati sulla stampante, saranno in grado di per utilizzare l'overhead e il sottotitolo come intestazioni e piè di pagina. Tuttavia, i browser moderni non lo fanno e visualizzano semplicemente e come righe di dati o, nella migliore delle ipotesi, mettono semplicemente le righe corrispondenti all'inizio e alla fine della tabella.

8. Come combinare le celle della tabella

Gli attributi colspan e rowspan combinano le celle della tabella. L'attributo colspan specifica il numero di celle unite orizzontalmente e l'ampiezza di righe verticalmente.


Riso. 3. Un esempio di combinazione di celle di tabella orizzontalmente utilizzando l'attributo colspan

9. Attributi degli elementi della tabella

Tabella 1. Attributi degli elementi della tabella

Valori accettati: un elenco di nomi di celle, separati da spazi; questi nomi devono essere assegnati alle celle tramite il loro attributo id.
Valori accettati: qualsiasi numero intero positivo.

Attributo	Descrizione, valore accettato
colspan	Il numero di celle per riga da combinare orizzontalmente.
intestazioni	Specifica un elenco di celle di intestazione che contengono informazioni di intestazione per la cella di dati corrente. Progettato per i browser vocali.	...	...
intervallo di righe	Il numero di celle nella colonna da unire verticalmente.	Valori possibili: un numero da 1 a 999.
span	Il numero predefinito di colonne da combinare per creare un singolo stile è 1.

10. Un esempio di creazione di una tabella


Riso. 4. Creare il menu di un ristorante utilizzando una tabella HTML

Markup HTML

Menu del ristorante "Romashka"

Cucina	Piatti freddi		Piatti caldi		dolci
	Insalate	Spuntini	Primo pasto	Secondi piatti
russo	La vinaigrette	Lingua di rafano	Zuppa di cavolo cappuccio con crauti	Gnocchi di patate	Mele al forno con miele
	Olivie	gelatina di manzo	sottaceti casalinghi	Carassi al forno in panna acida	torta di frittelle
	Aringhe sotto la "pelliccia"	Lucioperca in gelatina	Miscuglio di carne	Cotolette di Pozharskie	Torta "Patate"
spagnolo	ceviche di capesante	empanadas	Zuppa di pane all'aglio	Paella ai frutti di mare	churros
	Timballo di avocado e tonno	fotoamatore	fabada asturiano	Raxo di maiale	Almoishavena
	Fagioli con prosciutto	Changfain	Zuppa di pesce con gnocchi di semolino	Tortilla di patate	Bunuelos
francese	Insalata dei Vosgi	Riyette di pollo	Crema di melanzane "Renoir"	Le patate sono limitate	brioche
	Panzanella	Delizie al formaggio	Zuppa di zucca francese	Gratin di pollame	Torta Limone Ligure
	Tartaro	Salmone sott'aceto	Zuppa Conti	Tartiflett	Savarin "Trionfo"

Quindi le tabelle svolgono un ruolo molto importante nella creazione di un wireframe invisibile per una pagina web. E questo aiuterà a organizzare in modo uniforme e bello testo, menu, immagini, ecc.
Per una migliore comprensione di ciò che sto cercando di dirti, dai un'occhiata a un esempio di wireframe di una pagina web:

Così, come creare una semplice tabella in HTML?
Per creare una tabella, devi utilizzare tre tag:

TAVOLO – questo tag è necessario per aprire la tabella. È una specie di contenitore che contiene altri elementi. Qui l'ho piegato in modo che tu non possa capirlo senza una ciambella. Niente, lo capirai quando vedrai un esempio.
Tag di fine necessario.

La tabella è composta da una riga

riga 1	riga 1
riga 2	riga 2
riga 3	riga 3

cella 1	cella 2
cella 1	cella 2
cella 1	cella 2

TR – crea una nuova riga della tabella. Tag di fine necessario.

TD – crea una nuova cella nella riga. Tag di fine necessario.

Diamo un'occhiata a un esempio per capire meglio tutto quanto sopra:

riga 1 cella1	riga1 cella2
riga 2 cella 1	riga 2 cella 2
riga 3 cella 1	riga 3 cella 2

Ecco il risultato:

riga 1 cella1	riga1 cella2
riga 2 cella 1	riga 2 cella 2
riga 3 cella 1	riga 3 cella 2

Lascia che ti spieghi tutto.
Ogni volta che viene creata una nuova tabella, viene aperto un tag.

.
Successivamente, lo posizioniamo al centro del contenitore. etichetta , che indica l'inizio di una nuova serie.
In questa riga, inserisci due celle con contenuto usando il tag

Chiudi la riga con un tag .
Apertura di un'altra riga con un tag
Chiudi la riga con un tag .
Apri la terza riga con il tag e inserisci di nuovo due celle.
Chiudi la riga con un tag .
Chiudi la tabella con un tag

riga 1 cella1	riga1 cella2

.

Penso che tu l'abbia capito? Nel caso qualcuno abbia dimenticato cos'è un attributo frontiera che sto usando insieme al tag

, vi ricordo che questo è lo spessore del telaio. Se in frontiera sarà impostato su "0", quindi i bordi della tabella saranno invisibili.

Guarda un paio di esempi tabelle create e puoi andare oltre:

riga 1 cella 1

riga 2 cella 1

Risultato:

Per inserire un'immagine in una tabella, è necessario avere una conoscenza di base di base su come inserire un'immagine in un file HTML. Ne parlo a. Ora che conosci le sfumature di base di un'immagine in HTML, puoi provare a inserire un'immagine in una tabella. Questo può essere fatto come segue:

nella linea tra i tag inserire un'immagine.

riga 1 cella 1

riga 1 cella 2

Risultato:

riga 1 cella 1

riga 1 cella 2

Come combinare le celle in una tabella?

Per combinare le celle in una tabella, devi utilizzare attributi come questo:
COLSPAN- determina il numero di colonne.
Il valore predefinito è 1.
ROWSPAN- determina il numero di righe.
Il valore predefinito è 1.

unire le celle nella riga superiore utilizzando l'attributo colspan :

riga 1 cella 1 + 2
riga 2 cella 1	riga 2 cella 2

Risultato:

Come posso impostare la dimensione del tavolo?

Per impostare l'altezza e la larghezza della tabella, utilizzare i seguenti attributi:

LARGHEZZA- la larghezza del tavolo. La dimensione è impostata in pixel o in percentuale.
ALTEZZAÈ l'altezza del tavolo. La dimensione è impostata in pixel o in percentuale.

riga 1 cella1	riga1 cella2
riga 2 cella 1	riga 2 cella 2

Risultato:

Allineare il contenuto in una tabella

Per allineare il contenuto (testo, immagini) all'interno della tabella, puoi utilizzare i seguenti attributi:

ALLINEARE- allineamento orizzontale del contenuto nella tabella.
Attribuire ALLINEARE i valori sono assegnati: sinistra (predefinito), centro,Giusto.
sinistra - spingere il contenuto a sinistra;
centro - posto al centro;
Giusto - spingere il contenuto sul lato destro

VALIGN- allineamento verticale del contenuto nella tabella.
Attribuire VALIGN i valori sono assegnati: in alto, in basso, in mezzo.
superiore – premi il contenuto verso l'alto;
parte inferiore – spingere il contenuto verso il basso;
mezzo – imposta il contenuto nel mezzo

riga 1 cella1	riga1 cella2
riga 2 cella 1	riga 2 cella 2

Risultato:

Come faccio a creare lo sfondo del tavolo?

Puoi anche impostare lo sfondo della tabella per tutte le sue celle combinate, nonché per ciascuna cella separatamente. Puoi impostare lo sfondo con un colore o con un'immagine. Ci sono due attributi per lo sfondo:

BGCOLOR- colore di sfondo per l'intera tabella o per ogni cella separatamente. Il colore è impostato da un codice o una parola.
SFONDO- lo sfondo della tabella è riempito con un'immagine.

Attenzione: se vuoi impostare lo sfondo con un colore o un'immagine di sfondo per l'intera tabella, gli attributi devono essere impostati nel tag

... E se solo su una cella specifica, allora il tag

. Per una migliore comprensione, vedere un esempio: riga 1 cella1 riga1 cella2 riga 2 cella 1 riga 2 cella 2 Risultato: Attenzione: se l'immagine è di dimensioni inferiori per cella, si ripeterà finché non riempirà la cella fino alla fine. Se l'immagine è più grande della cella, lo sfondo dell'immagine verrà ritagliato per adattarlo alle dimensioni della cella. E infine, ti dirò di più su due attributi utili. Nel caso in cui desideri improvvisamente aumentare la distanza tra tutte le celle, i seguenti attributi ti aiuteranno: IMBOTTITURA CELLULARE–Distanza tra il frame di ogni cella della tabella html e il contenuto del materiale in essa contenuto. riga 1 cella1 riga1 cella2 riga 2 cella 1 riga 2 cella 2 Risultato: riga 1 cella1 riga1 cella2 riga 2 cella 1 riga 2 cella 2 SPAZIO CELLULARE–Distanza tra i bordi delle celle vicine. riga 1 cella1 riga1 cella2 riga 2 cella 1 riga 2 cella 2 Risultato: riga 1 cella1 riga1 cella2 riga 2 cella 1 riga 2 cella 2 Fuh, detto! Spero di aver affrontato il compito e di aver spiegato tutto ciò che sapevo tabelle html... E per te, ti consiglio di sistemare bene il materiale. Prova a creare la tua tabella, o meglio un intero scheletro per una pagina web da una tabella html. Tutto il meglio per te! Grazie per aver visitato il mio blog. A causa della versatilità delle tabelle, del gran numero di parametri che ne controllano l'aspetto, le tabelle sono diventate a lungo uno standard definito per il layout delle pagine Web. Un tavolo con un bordo invisibile è come una griglia modulare, nei cui blocchi è conveniente posizionare elementi di una pagina web. Tuttavia, questo non è l'approccio giusto, perché ogni oggetto HTML è definito per i propri scopi e se viene utilizzato per altri scopi, e inoltre, significa che non ci sono alternative. Questo è stato il caso per molto tempo, fino a quando i livelli non hanno sostituito le tabelle nel layout del sito. Ciò non significa che i livelli vengano ora utilizzati sempre, ma la tendenza è già stata chiaramente delineata: le tabelle vengono utilizzate per posizionare i dati tabulari e i livelli vengono utilizzati per il layout e il design. Creare una tabella Una tabella è composta da righe e colonne di celle che possono contenere testo e immagini. In genere, le tabelle vengono utilizzate per organizzare e presentare i dati, ma le capacità delle tabelle non si limitano a questo. Con l'aiuto delle tabelle, è conveniente comporre i layout di pagina disponendo frammenti di testo e immagini nel modo desiderato. Per aggiungere una tabella a una pagina web, usa il tag ... Questo elemento funge da contenitore per gli elementi che definiscono il contenuto della tabella. Qualsiasi tabella è composta da righe e celle, che vengono impostate di conseguenza utilizzando i tag e crea una nuova riga. Più avanti in annidato ... La tabella deve contenere almeno una cella (esempio 12.1). Consentito al posto del tag usa tag ... Testo in una cella decorata con un tag , visualizzato in grassetto dal browser e allineato al centro della cella. Altrimenti, le differenze tra le celle create tramite tag e no. Esempio 12.1. Creare una tabella Cella 1 Cella 2 Cella 3 Cella 4 L'ordine delle celle e il loro aspetto è mostrato in Fig. 12.1. è il corpo del tavolo. Il corpo è composto da righe e colonne. La tabella viene compilata riga per riga. ogni tag vengono create le colonne. È possibile creare più colonne. In questo caso, è necessario tenere traccia del numero di colonne in ogni riga. Ad esempio, se la prima riga aveva 5 colonne, anche le righe successive dovrebbero avere 5 colonne. In caso contrario, il tavolo galleggia. È possibile combinare le celle. Come creare una tabella in html Facciamo un esempio, codice html: Esempio di tabella Colonna 1 Colonna 2 Attenzione alla cellula ... Usiamo lo speciale attributo colspan per combinare le celle orizzontalmente. Il suo valore numerico indica il numero di colonne da combinare. C'è anche un analogo di questo attributo: tag (intestazione della tabella), dove devi anche scrivere colspan. Il risultato sarà lo stesso. Ma si usa spesso il solito td. Ora diamo un'occhiata più da vicino a tutti gli attributi del tag. . Attributi e proprietà dei tag Al tag di apertura puoi scrivere vari attributi. 1. Property align = "parameter" - imposta l'allineamento della tabella. Può assumere i seguenti valori: Nell'esempio sopra, abbiamo allineato la tabella al centro align = "center". Questo attributo può essere applicato non solo a una tabella, ma anche a singole celle di tabella. ... Pertanto, l'allineamento sarà diverso nelle diverse celle. Per esempio , , , o cols - la linea viene visualizzata tra le colonne nessuno - tutti i bordi sono nascosti righe: il bordo viene disegnato tra le righe della tabella create tramite il tag 12. Larghezza proprietà = "numero" - imposta la larghezza della tabella: in pixel o in percentuale. 13. Property class = "class_name" - è possibile specificare il nome della classe a cui appartiene la tabella. 14. Stile proprietà = "stili": gli stili possono essere impostati individualmente per ogni tabella. Ora è il momento di tuffarsi nella tabella e guardare gli attributi delle celle della tabella. Questi attributi devono essere scritti nel tag di apertura. e sono disponibili le stesse opzioni di sarà applicato gerarchicamente a tutti o stringhe ... ... ... 2. Proprietà sfondo = "URL" - imposta l'immagine di sfondo. Al posto dell'URL, deve essere scritto l'indirizzo dell'immagine di sfondo. Esempio Esempio di tabella Colonna 1 Colonna 2 Convertito nella pagina nel seguente: Nell'esempio sopra, la nostra immagine di sfondo si trova nella cartella img (che si trova nella stessa directory della pagina html) e l'immagine si chiama fon.gif. Nota che nel tag abbiamo aggiunto style = "color: white;" ... Poiché lo sfondo è quasi nero, in modo che il testo non si fonda con lo sfondo, abbiamo reso il testo bianco. 3. Proprietà bgcolor = "color" - imposta il colore di sfondo della tabella. Come colore, puoi scegliere una qualsiasi dell'intera tavolozza (vedi codici e nomi dei colori html) 4. Property border = "number" - imposta lo spessore del bordo della tabella. Negli esempi precedenti, abbiamo specificato border = "1", il che significa che la larghezza del bordo è di 1 pixel. 5. Property bordercolor = "color" - imposta il colore del bordo. Se border = "0", allora non ci sarà alcun bordo e il colore del bordo non avrà senso. 6. Proprietà cellpadding = "numero" - rientro dal frame al contenuto della cella in pixel. 7. Proprietà cellspacing = "numero" - la distanza tra le celle in pixel. 8. Proprietà cols = "numero" - il numero di colonne. Se non lo specifichi, il browser determinerà da solo il numero di colonne. L'unica differenza è che specificando questo parametro è probabile che si velocizzi il caricamento della tabella. 9. Property frame = "parameter" - come visualizzare i bordi intorno alla tabella. Può assumere i seguenti valori: void - non tracciare confini bordo - il bordo intorno al tavolo sopra - bordo nella parte superiore della tabella sotto - bordo in fondo alla tabella hsides - aggiungi solo bordi orizzontali (in alto e in basso nella tabella) vsides - disegna solo bordi verticali (sinistra e destra della tabella) dx - bordo solo sul lato destro del tavolo lhs - bordo solo sul lato sinistro del tavolo 10. Altezza proprietà = "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: all: viene tracciata una linea attorno a ciascuna cella della tabella gruppi - viene visualizzata la linea tra i gruppi formati da tag . Attributi e proprietà 1. Property align = "parameter" - imposta l'allineamento di una singola cella nella tabella. Può assumere i seguenti valori: allineamento sinistra - sinistra allineamento centro - centro allineamento destro - destro 2. Property background = "URL" - imposta l'immagine di sfondo della cella. Al posto dell'URL, deve essere scritto l'indirizzo dell'immagine di sfondo. 3. Proprietà bgcolor = "color" - imposta il colore di sfondo della cella. 4. Property bordercolor = "color" - imposta il colore del bordo della cella. 5. Proprietà char = "lettera" - imposta la lettera da cui deve essere eseguito l'allineamento. Il valore dell'attributo align deve essere impostato su char. 6. Proprietà colspan = "numero" - imposta il numero di celle orizzontali da combinare. 7. Altezza proprietà = "numero" - imposta l'altezza della tabella: in pixel o in percentuale%. 8. Larghezza proprietà = "numero" - imposta la larghezza della tabella: in pixel o in percentuale%. 9. Property rowspan = "number" - imposta il numero di celle verticali unite. 10. Property valign = "parameter" - allineamento verticale del contenuto della cella. top - allinea il contenuto della cella alla parte superiore della riga allineamento medio-medio fondo - allinea al fondo linea di base - allineamento della linea di base Nota 1 Per tag ... Parametri per un tag dentro Come evitare che le celle della tabella si attacchino l'una all'altra Nel caso in cui si utilizzi il bordo (bordo delle celle) e lo zero padding tra le celle, sono ancora incollati insieme e si ottiene un doppio bordo. Per evitare ciò, è necessario registrare la tabella border-collapse: crolla nel foglio di stile: ... Caro lettore, ora hai imparato molto di più sul tag della tabella html. Ora ti consiglio di passare alla lezione successiva. Questo capitolo approfondisce i principi dell'uso delle tabelle nel markup HTML. Questa è un'organizzazione tabulare del testo, una griglia di coordinate tabulari e un grafico organizzato in tabelle. Funzioni di descrizione della tabella HTML Con lo sviluppo del WWW, è diventato chiaro che i mezzi incorporati in NTML non sono sufficienti per la visualizzazione di alta qualità di vari tipi di documenti. Lo svantaggio di НТМL era la mancanza di strutture espositive da tavolo nella sua composizione. A questo scopo, testo preformattato (tag ), in cui la tabella era delineata con simboli ASCII. Ma questa forma di presentazione delle tabelle non era di alta qualità ed è stata eliminata dallo stile generale del documento. Con l'introduzione delle tabelle in HTML, i webmaster hanno più di uno strumento per posizionare testo e dati numerici, ma un potente strumento di progettazione per posizionare grafica e testo nel posto giusto sullo schermo. Creare tabelle in HTML Il tag è usato per descrivere le tabelle<ТАВLЕ>... Etichetta<ТАВLЕ>Come molti altri, traduce automaticamente la riga prima e dopo la tabella. Crea riga tabella - tag<ТR> Etichetta<ТR>(Table Row, table row) crea una riga di tabella. Tutto il testo, gli altri tag e gli attributi che devono essere posizionati su una riga devono essere posizionati tra i tag lt; TR>. Definizione delle celle della tabella - Tag<ТD> Le celle di dati sono generalmente posizionate all'interno di una riga di tabella. Ogni cella contenente testo o immagine deve essere circondata da tag<ТD>... Numero di tag<ТD>per riga definisce il numero di celle tavolo Se una tabella ha due tag TR, allora ha due righe. Se ci sono tre tag TD in una riga, poi in esso tre colonne. Intestazioni di colonna della tabella - Tag<ТН> Le intestazioni per le colonne e le righe della tabella vengono impostate utilizzando il tag di intestazione<ТН>(Tabella Neader, intestazione della tabella). Questi tag sono come<ТD>... La differenza è che il testo tra i tag<ТН>, è scritto automaticamente in grassetto ed è posizionato al centro della cella per impostazione predefinita. Puoi annullare la centratura e allineare il testo a sinistra oa destra. Se usi<ТD>con etichetta<В>e attributo<АLIGN=center>, il testo avrà anche l'aspetto di un titolo. Tuttavia, tieni presente che non tutti i browser supportano il testo in grassetto nelle tabelle, quindi è meglio impostare i titoli delle tabelle utilizzando<ТН>. Il titolo è centrato per impostazione predefinita L'intestazione può concatenare colonne L'intestazione può essere posizionata davanti alle colonne Testo o dati Testo o dati L'intestazione può concatenare le righe Testo o dati Testo o dati Testo o dati Testo o dati Testo o dati Testo o dati Utilizzo delle intestazioni di tabella - tag<САРТIОN> Etichetta consente di creare intestazioni di tabella. Per impostazione predefinita, i titoli sono centrati e posizionati sopra (<САРТION АLIGN=top>), o sotto il tavolo (<САРТION ALIGN=bottom>). Il titolo può essere qualsiasi testo e immagine. Il testo verrà suddiviso in righe che corrispondono alla larghezza della tabella. A volte il tag<САРТION>utilizzato per la didascalia sotto l'immagine. Per fare ciò, è sufficiente descrivere la tabella senza bordi. Dirigendosi sopra il tavolo Testo o dati Testo o dati Testo o dati Testo o dati Titolo sotto la tabella Testo o dati Testo o dati Testo o dati Attributo NOWRAP In genere, qualsiasi testo che non rientra in una riga di una cella di tabella viene spostato alla riga successiva. Tuttavia, quando si utilizza l'attributo NOWRAP con i tag<ТН>o<ТD>la lunghezza della cella si espande in modo che il testo racchiuso rientri in una riga. Attributo COLSPAN tag<ТD>e<ТН>modificato utilizzando l'attributo COLSPAN (Column Span). Se vuoi rendere una cella più larga della parte superiore o inferiore, puoi utilizzare l'attributo COLSPAN per allungarla su un numero qualsiasi di celle regolari. Se vuoi rendere una cella più larga della parte superiore o inferiore, puoi usare l'attributo СLSPAN = 2, allungarlo su un numero qualsiasi di celle regolari. Attributo ROWSPAN Attributo ROWSPAN utilizzato nei tag<ТD>e<ТН>, è simile all'attributo COLSPAN =, tranne per il fatto che specifica il numero di righe per l'estensione della cella. Se hai specificato un numero maggiore di uno nell'attributo ROWSPAN = s, il numero di righe corrispondente deve trovarsi sotto la cella allungata. Non può essere posizionato in fondo alla tabella. Attributo LARGHEZZA L'attributo WIDTH viene utilizzato in due modi. Puoi metterlo in un tag<ТАВLЕ>per dare la larghezza dell'intera tabella, o può essere usato nei tag<ТD>o<ТН>per impostare la larghezza di una cella o di un gruppo di celle. La larghezza può essere specificata in pixel o in percentuale. Ad esempio, se imposti nel tag<ТАВLЕ>WIDTH = 250, ottieni una tabella larga 250 pixel indipendentemente dalle dimensioni della pagina sul monitor. Quando si imposta WIDTH = 50% nel tag<ТАВLЕ>la tabella occuperà metà della larghezza della pagina per qualsiasi dimensione dell'immagine sullo schermo. Quindi, quando specifichi una larghezza della tabella come percentuale, tieni presente che se l'utente ha un viewport ristretto, la tua pagina potrebbe sembrare un po' strana. Se stai utilizzando i pixel e la tabella è più larga della finestra, in basso viene visualizzata una barra di scorrimento per spostarti a sinistra e a destra sulla pagina. A seconda dell'attività da svolgere, entrambi i metodi di impostazione della larghezza della tabella possono essere utili. Testo o dati - 100% di larghezza o Testo o dati - 50% di larghezza o Testo o dati - 200 pixel di larghezza o Testo o dati - 100 pixel di larghezza Applicazione di celle vuote Se una cella non contiene dati, non avrà bordi. Se vuoi che una cella abbia bordi ma nessun contenuto, devi inserire qualcosa che non sarà visibile quando viene visualizzato. Puoi usare una riga vuota<ВR>... Puoi anche definire colonne vuote specificando la loro larghezza in pixel o unità relative e non inserendo alcun dato nelle celle risultanti. Questo strumento può essere utile quando si posizionano testo e grafica in una pagina. Attributo CELLPADDING Questo attributo definisce la larghezza dello spazio bianco tra il contenuto della cella ei suoi bordi, ovvero imposta i margini all'interno della cella. Testo o dati Testo o dati Testo o dati Testo o dati Testo o dati Testo o dati Testo o dati Testo o dati Testo o dati Testo o dati Testo o dati Testo o dati Gli attributi ALIGN e VALIGN tag<ТR>, <ТD>e<ТН>può essere modificato utilizzando gli attributi ALIGN e VALIGN. L'attributo АLIGN determina l'allineamento orizzontale del testo e della grafica, ovvero a sinistra oa destra o al centro. L'allineamento orizzontale può essere specificato in diversi modi: ALIGN = sanguina a sinistra preme il contenuto della cella a filo contro il bordo sinistro. ALLINEA = sinistra allinea il contenuto della cella a sinistra con il padding specificato dall'attributo CELLPADDING. ALLINEA = centro centra il contenuto della cella. ALIGN = destra allinea a destra il contenuto della cella con il padding specificato dall'attributo CELLPADDING. Testo o dati Testo o dati Testo o dati Testo o dati Testo o dati Testo o dati Testo o dati Testo o dati Testo o dati Testo o dati Testo o dati Testo o dati Testo o dati Testo o dati Testo o dati L'attributo VALIGN allinea verticalmente testo e grafica all'interno di una cella. L'allineamento verticale può essere specificato in diversi modi: VALIGN = in alto allinea il contenuto della cella al bordo superiore. VALIGN = medio centra verticalmente il contenuto della cella. VALIGN = fondo allinea il contenuto di una cella al bordo inferiore. L'attributo VALIGN allinea verticalmente testo e grafica all'interno di una cella. superiore, mezzo, parte inferiore. VALIGN = top Allinea il contenuto della cella al suo bordo superiore. superiore, superiore, superiore. VALIGN = middle Centra verticalmente il contenuto della cella. mezzo, mezzo, mezzo. VALIGN = bottom Allinea il contenuto della cella al bordo inferiore. parte inferiore, parte inferiore, parte inferiore. Attributo BORDER Nel tag<ТАВLЕ>spesso determinano l'aspetto dei frame, ovvero le linee che circondano le celle della tabella e la tabella stessa. Se non specifichi un bordo, otterrai una tabella senza linee, ma ci sarà spazio per loro. Lo stesso risultato si può ottenere impostando<ТАВLЕ ВОRDER=0>... A volte vuoi rendere il bordo più spesso per farlo risaltare meglio. Puoi impostare bordi eccezionalmente audaci per attirare l'attenzione su un'immagine o un testo. Quando si creano tabelle nidificate, è necessario creare bordi di diverso spessore per tabelle diverse per renderle più facili da distinguere. Attributo CELLSPACING L'attributo CELLSPACING specifica la larghezza, in pixel, degli spazi tra le celle. Se questo attributo non è specificato, il valore predefinito è due pixel. L'attributo CELLSPACING = ti consente di posizionare testo e grafica dove vuoi. Se vuoi lasciare uno spazio vuoto, puoi inserire uno spazio nella cella. Testo o dati Testo o dati Testo o dati Testo o dati Testo o dati Testo o dati Testo o dati Testo o dati Testo o dati Testo o dati Testo o dati Testo o dati Testo o dati Testo o dati Testo o dati Testo o dati Testo o dati Attributo BGCOLOR Questo attributo consente di impostare il colore di sfondo. A seconda di quale tag (TABLE, TR, TD) viene applicato, il colore di sfondo può essere impostato per l'intera tabella, per una riga o per una singola cella. Il valore di questo attributo è un codice RGB o un nome di colore standard. Testo o dati Testo o dati Testo o dati Testo o dati Testo o dati Testo o dati SFONDO Attributo Questo attributo imposta l'immagine di sfondo per le tabelle. Applicare ai tag TABLE e TD. Il suo valore è l'URL del file immagine di sfondo. L'uso di questo attributo è discusso di seguito. Utilizzo delle tabelle nel design della pagina La cosa buona dei tavoli è che puoi rendere invisibili i loro bordi se vuoi. Questo permette di usare il tag<ТАВLЕ>posizionare magnificamente testo e grafica sulla pagina. Mentre il tag<ТАВLЕ>rimane l'unico potente strumento di formattazione in HTML. I progettisti di pagine Web ora hanno quasi la stessa libertà di utilizzare lo "spazio bianco" dei creatori di pagine stampate. Le tabelle sono il modo migliore per allontanarsi dal posizionamento gerarchico del testo nelle pagine Web. Se il browser supporta le tabelle, di solito visualizza correttamente gli effetti più interessanti prodotti con esse. Università pedagogica statale degli Urali Accoglienza! Corso di formazione "Fondamenti di WEB-mastering" Creare tavoli colorati Alcuni browser consentono la visualizzazione dei colori. Esistono diversi modi per colorare la tabella, dipendono principalmente dal browser utilizzato. Bordi colorati in Netscape Navigator. Non solo puoi circondare il tavolo con una bella cornice, ma puoi anche impostare un colore diverso dai colori del testo e dello sfondo. Crea una semplice GIF grigia (o qualunque GIF desideri avere come sfondo) e definiscila nel tag<ВODY>come sfondo della pagina. Quindi imposta il colore di sfondo della pagina. Di conseguenza, il tuo tag<ВОDY>sarà simile a questo: Hai creato un doppio sfondo: GIF e un determinato colore. Di conseguenza, il colore di sfondo sarà visibile su tutti i bordi delle tabelle e sulle linee orizzontali (<НR>). Indipendentemente dal fatto che la GIF di sfondo sia grigia o meno, le linee colorate e i bordi delle tabelle risalteranno notevolmente. Se la GIF di sfondo non è troppo complessa, il tempo di caricamento della pagina aumenterà solo leggermente. Principali articoli correlati Operatore di filiale "Seleziona caso" In che modo i tag non accoppiati sono diversi dai tag accoppiati? Condensatori Differenza di potenziale tra piastre di condensatori con capacità Categorie: Programmi Sicurezza Windows 10 Ferro da stiro Windows 8 In contatto con Errori © 2021 bumotors.ru. Come configurare smartphone e PC. Portale informativo.