La specifica CSS offre possibilità illimitate per la progettazione della tabella. Per impostazione predefinita, la tabella e le celle della tabella non hanno bordi e sfondi visibili e le celle all'interno della tabella non sono adiacenti l'una all'altra.

La larghezza delle celle della tabella è determinata dalla larghezza del loro contenuto, quindi la larghezza delle colonne della tabella può essere diversa. L'altezza di tutte le celle di una riga è la stessa ed è determinata dall'altezza della cella più alta.

Formattazione delle tabelle

1. Bordo dei bordi della tabella

La tabella e le celle al suo interno vengono visualizzate per impostazione predefinita nel browser senza bordi visibili. Bordi del tavolo impostato dalla proprietà border:

Tabella (bordo-collassa: collassa; / * rimuovi spazi vuoti tra le celle * / bordo: grigio solido 1px; / * imposta il bordo esterno della tabella grigio 1 pixel di spessore * /)

Bordi della cella del titolo di ogni colonna sono impostati per il esimo elemento:

Th (bordo: 1px grigio solido;)

Bordi delle celle i corpi della tabella sono impostati per l'elemento td:

Td (bordo: 1px grigio pieno;)

La larghezza dei bordi delle celle adiacenti non è raddoppiata, quindi puoi impostare i bordi per l'intera tabella nel modo seguente:

Th, td (bordo: 1px grigio pieno;)

Il bordo esterno della tabella può essere selezionato assegnandogli una larghezza maggiore:

Tabella (bordo: 3px grigio solido;)

I bordi possono essere impostati parzialmente:

/ * imposta un bordo esterno grigio di 3 pixel per la tabella * / table (bordo in alto: grigio solido di 3 pixel;) / * imposta un bordo grigio di 1 pixel per la cella del corpo della tabella * / td (bordo inferiore: grigio solido di 1 pixel;)

Puoi leggere di più sulla proprietà del confine.

2. Come impostare la larghezza e l'altezza del tavolo?

Predefinito larghezza e altezza del tavoloè determinato dal contenuto delle sue celle. Se la larghezza non è specificata, sarà uguale alla larghezza della riga (linea) più ampia.

Larghezza tabella e colonna dato con proprietà di larghezza... Se table (width: 100%;) è specificato per una tabella, la larghezza della tabella sarà uguale alla larghezza del blocco contenitore in cui si trova.

La larghezza della tabella e delle colonne è solitamente specificata in px o%, ad esempio:

Tabella (larghezza: 600px;) th (larghezza: 20%;) td: primo figlio (larghezza: 30%;)

Altezza del tavolo non impostato. L'altezza delle righe le tabelle possono essere manipolate aggiungendo padding superiore e inferiore agli elementi e ... Non è consigliabile correggere l'altezza utilizzando la proprietà height.

Th, td (imbottitura: 10px 15px;)

3. Come impostare lo sfondo del tavolo

Predefinito sfondo del tavolo e le celle sono trasparenti. Se la pagina o il blocco che contiene la tabella ha uno sfondo, risplenderà attraverso la tabella. Se lo sfondo è impostato sia per la tabella che per le celle, solo lo sfondo delle celle sarà visibile nei punti in cui lo sfondo della tabella e delle celle si sovrappongono. Lo sfondo dell'intera tabella e delle sue celle può essere:
riempire,
,
.

4. Colonne della tabella

Modello Tabelle CSS si concentra principalmente su stringhe (righe) formate utilizzando un tag

... In pratica, ci sono momenti in cui è necessario formattazione speciale colonne, che è possibile nei seguenti modi:

usando il tag

Puoi impostare lo sfondo per qualsiasi numero di colonne;

utilizzando il selettore table td: first-child, table td: last-child selector, puoi modellare la prima o l'ultima colonna della tabella (esclusa la prima cella dell'intestazione della tabella);

utilizzando il selettore di tabella td: nth-child (regola di selezione delle colonne), puoi applicare uno stile a qualsiasi colonna nella tabella.

Puoi leggere di più sui selettori CSS.

5. Come aggiungere un titolo alla tabella

Puoi aggiungere un titolo a una tabella usando il tag e, utilizzando la proprietà caption-side, può essere posizionato davanti o sotto la tabella. Per allineare orizzontalmente il testo del titolo, applica proprietà text-align... Ereditato.

...

Tabella n. 1

Società	Q1	Q2	Q3	Q4

caption (caption-side: bottom; text-align: right; padding: 10px 0; font-size: 14px;) Riso. 2. Un esempio di visualizzazione dell'intestazione sotto la tabella

6. Come rimuovere lo spazio tra i fotogrammi delle celle?

Per impostazione predefinita, i bordi delle celle della tabella sono separati da un piccolo spazio. Se impostiamo border-collasso: collasso per la tabella, il divario verrà rimosso. La proprietà è ereditata.

Sintassi

Tabella (bordo-collasso: collasso;)
Riso. 3. Un esempio di tabelle con bordi di celle uniti e divisi

7. Come aumentare lo spazio tra i bordi delle celle

Usando proprietà del bordo-spacing è possibile modificare la distanza tra i frame delle celle. Questa proprietà vale per la tabella nel suo insieme. Ereditato.

Sintassi

Tabella (contrazione del bordo: separato; spaziatura del bordo: 10px 20px;) tabella (compressione del bordo: separato; spaziatura del bordo: 10px;) Riso. 4. Un esempio di tabelle con spazi maggiori tra i frame delle celle

8. Come nascondere le celle di tabella vuote

La proprietà celle vuote nasconde o mostra le celle vuote. Interessa solo le celle che non contengono alcun contenuto. Se viene specificato uno sfondo per una cella e per una tabella viene specificata una tabella (border-collapse: compression;), la cella non verrà nascosta. Ereditato.

Società	Q1	Q2	Q3
Microsoft	20.3	30.5
Google	50.2	40.63	45.23

table (border: 1px solido # 69c; border-collapse: separato; celle vuote: nascondi;) th, td (border: 2px solido # 69c;) Riso. 5. Un esempio di come nascondere una cella di tabella vuota

9. Layout del layout della tabella utilizzando la proprietà table-layout

Il layout di un layout di tabella è determinato da uno dei due approcci: layout fisso o layout automatico. Sotto layout in in questo caso indica come la larghezza della tabella è distribuita tra le larghezze delle celle. La proprietà non è ereditata.

Sintassi

Tavolo (disposizione tabella: fissa;)

10. Migliori layout di tabella

1. Minimalismo orizzontale

Le tabelle orizzontali sono tabelle in cui il testo viene letto orizzontalmente. Ogni entità è una linea separata. Puoi modellare le tabelle in questo modo in uno stile minimalista posizionando un bordo di due pixel sotto l'intestazione esimo.

Dipendente	Stipendio	Bonus	Supervisore
Stephen C. Cox	$300	$50	Bob
Josephin tan	$150	-	Annie
Joyce ming	$200	$35	Andy
James A. Pentel	$175	$25	Annie

tabella (famiglia di caratteri: "Lucida Sans Unicode", "Lucida Grande", Sans-Serif; dimensione del carattere: 14px; sfondo: bianco; larghezza massima: 70%; larghezza: 70%; collasso bordo: collasso; testo -align: left;) th (font-weight: normal; color: #039; border-bottom: 2px solid #6678b1; padding: 10px 8px;) td (color: #669; padding: 9px 8px; transizione: .3s lineare;) tr: hover td (colore: # 6699ff;)

In un largo numero righe, questo design delle tabelle le rende difficili da leggere. Per risolvere questo problema, puoi aggiungere un bordo di un pixel sotto tutti gli elementi td.

Td (border-bottom: 1px solid #ccc; color: # 669; padding: 9px 8px; transition: .3s linear;) / * resto del codice - come nell'esempio sopra * /

L'aggiunta di un: effetto hover all'elemento tr rende i tavoli dallo stile minimalista più facili da leggere. Quando passi il cursore del mouse su una cella, il resto delle celle della stessa riga vengono evidenziate contemporaneamente, il che semplifica il processo di tenere traccia delle informazioni se le tabelle hanno più colonne.

Th (font-weight: normal; color: #039; padding: 10px 15px;) td (color: # 669; border-top: 1px solid # e8edff; padding: 10px 15px;) tr: hover td (background: # e8edff ;)

2. Minimalismo verticale

Sebbene tali tabelle siano utilizzate raramente, le tabelle orientate verticalmente sono utili per categorizzare o confrontare le descrizioni degli oggetti rappresentati da una colonna. Puoi modellarli in uno stile minimalista aggiungendo uno spazio che separa le colonne.

Th (font-weight: normal; border-bottom: 2px solid # 6678b1; border-right: 30px solid #fff; border-left: 30px solid #fff; color: # 039; padding: 8px 2px;) td (border- a destra: 30px #fff solido; bordo sinistro: 30px #fff solido; colore: # 669; padding: 12px 2px;)

3. Stile "scatola"

Lo stile più affidabile per decorare tavoli di tutti i tipi è il cosiddetto stile "a scatola". È abbastanza per raccogliere un bene gamma di colori, quindi imposta il colore di sfondo per tutte le celle. Ricorda di enfatizzare la differenza tra le linee impostando i bordi come separatori.

Th (font-size: 13px; font-weight: normal; background: # b9c9fe; border-top: 4px solid #aabcfe; border-bottom: 1px solid #fff; color: #039; padding: 8px;) td (background : # e8edff; border-bottom: 1px solid #fff; color: # 669; border-top: 1px solido trasparente; padding: 8px;) tr: hover td (background: #ccddff;)

La parte più difficile è trovare la combinazione di colori che si fonderà armoniosamente con il tuo sito. Se il sito è caricato con grafica e design, sarà abbastanza difficile per te utilizzare questo stile.

Tabella (famiglia di caratteri: "Lucida Sans Unicode", "Lucida Grande", Sans-Serif; dimensione del carattere: 14px; larghezza massima: 70%; larghezza: 70%; allineamento del testo: centro; collasso bordo: collasso ; border-top: 7px solid # 9baff1; border-bottom: 7px solid # 9baff1;) th (font-size: 13px; font-weight: normal; background: # e8edff; border-right: 1px solid # 9baff1; border- left: 1px solid # 9baff1; color: # 039; padding: 8px;) td (background: # e8edff; border-right: 1px solid #aabcfe; border-left: 1px solid #aabcfe; color: # 669; padding: 8px ;)

4. Zebra orizzontale

Il tavolo Zebra sembra piuttosto attraente e maneggevole. Il colore di sfondo complementare può servire da spunto visivo per consentire alle persone di leggere la tabella.

Th (font-weight: normal; color: #039; padding: 10px 15px;) td (color: # 669; border-top: 1px solid # e8edff; padding: 10px 15px;) tr: nth-child (2n) ( sfondo: # e8edff;)

5. Stile giornale

Per ottenere il cosiddetto effetto giornale, puoi applicare bordi agli elementi della tabella e giocare con le celle all'interno. Uno stile di giornale leggero e minimalista potrebbe assomigliare a questo: gioca con la combinazione di colori, aggiungi bordi, imbottiture, sfondi diversi e l'effetto: al passaggio del mouse su una linea.

Table (border: 1px solid # 69c;) th (font-weight: normal; color: # 039; border-bottom: 1px tratteggiato # 69c; padding: 12px 17px;) td (color: # 669; padding: 7px 17px; ) tr: hover td (sfondo: #ccddff;)

Tabella (bordo: 1px solido # 69c;) th (font-weight: normale; color: # 039; padding: 10px;) td (color: # 669; border-top: 1px tratteggiato #fff; padding: 10px; sfondo: #ccddff;) tr: hover td (sfondo: # 99bcff;)

Tabella (bordo: 1px solido # 6cf;) th (font-weight: normale; font-size: 13px; color: # 039; text-transform: maiuscolo; border-right: 1px solido # 0865c2; border-top: 1px solido # 0865c2; border-left: 1px solid # 0865c2; border-bottom: 1px solid #fff; padding: 20px;) td (color: # 669; border-right: 1px tratteggiato # 6cf; padding: 10px 20px;)

6. Sfondo della tabella

Se stai cercando un veloce e modo unico design del tavolo, seleziona immagine attraente oppure una foto relativa all'argomento del tavolo e impostala come sfondo del tavolo.

Jpg ") no-repeat; background-position: 100% 55px;) th (font-weight: normal; color: #339; padding: 10px 12px;) td (background: url (" https: // site/images/ back..png "); sfondo: trasparente;)

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

Come Sviluppo WWWè diventato chiaro che i fondi incorporati in L non sono sufficienti per una visualizzazione di alta qualità di vario tipo 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 dei tavoli non bastava Alta qualità ed è stato eliminato dallo stile generale del documento.  Dopo l'introduzione delle tabelle in HTML, i webmaster non hanno solo uno strumento per inserire testo e dati numerici, ma un potente strumento di progettazione per inserire il posto giusto grafica e testo dello 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 ce ne sono tre tag TD,
 
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, va tenuto presente che non tutti i browser supportano le tabelle carattere in grassetto quindi è meglio impostare le intestazioni della tabella con<ТН>.

 

 

 

 
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
Di solito, qualsiasi testo che non rientra in una riga di una cella di tabella va a 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 riga vuota <ВR>...  Puoi anche definire colonne vuote specificando la loro larghezza in pixel o unità relative e senza inserire alcun dato nelle celle ricevute.  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 con ALIGN attributi e VALIGN. Attributo ALIGN determina l'allineamento orizzontale del testo e della grafica, ovvero a sinistra oa destra o al centro. Allineamento orizzontale può essere impostato 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. Allineamento verticale può essere impostato 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 righe, 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 crei tabelle nidificate, devi fare per tavoli diversi bordi di spessore variabile per renderli 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 andartene posto vuoto, puoi scrivere 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 questo attributoè il codice RGB o il nome del 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 con 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. 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 esegue il rendering più corretto effetti interessanti ottenuto con il loro aiuto

 

 

 

 

 

 
Università pedagogica statale degli Urali
 
Accoglienza!
 

 

 
Corso di formazione"Nozioni di base del 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 bella cornice, ma imposta anche un colore diverso dal testo e dai colori di 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 imposta il colore...  Di conseguenza colore di sfondo sarà visibile su tutti i bordi della tabella e 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.
Diventato popolare, i web designer hanno utilizzato principalmente il metodo del layout della tabella e hanno ottenuto ottimi risultati.

Tag usati per costruire una tabella in html
tavolo - tag richiesto aprire e chiudere un tavolo 
didascalia - tag opzionale indicando il titolo della tabella 
ns- un tag opzionale, nei cui tag di apertura e chiusura è scritto il nome della colonna.  Tipicamente evidenziato in grassetto 
vero- un tag obbligatorio da cui si apre e si chiude la linea 
td- un tag obbligatorio che indica l'apertura e la chiusura di una cella in una riga 

Codice di esempio per una tabella semplice
 

 

 

 



 



 

 

 


 


 
 
 
Nome della tabella
 
 
Colonna 1 

 
 
 
Colonna 2 

 
 
 
 
 
 
Il testo nella prima cella 

 
 
 
Il testo nella seconda cella 

 
 
 
 
 




 
Il browser visualizzerà

Scopo delle tabelle in html
La lezione sul foglio di calcolo è molto importante!  Grazie alle tabelle, puoi organizzare non solo testo, ma anche immagini, collegamenti e molto altro.  Nella tabella che puoi apparecchiare sfondo(o il suo colore), rientro, larghezza, frontiera e altri parametri, che gli darà un bell'aspetto.  Tabella - Il tuo primo passo per capire web design!  In precedenza, molti siti erano interamente strutturati come tabelle, ovvero tutto ciò che l'utente vedeva (menu laterale, Menu principale, contenuto) - era il contenuto delle celle di una grande tabella. 
A tal proposito, andiamo direttamente agli attributi che rendono il tavolo bellissimo... 
Proprietà e parametri delle tabelle html: rientro, larghezza, colore di sfondo, bordo (cornice)
Ho etichetta della tabella ci sono i seguenti attributi: 
larghezza- la larghezza del tavolo.  può essere in pixel o% della larghezza dello schermo. 
bgcolor- colore di sfondo delle celle della tabella 
sfondo- riempie lo sfondo del tavolo con un'immagine 
frontiera- cornice e bordi nella tabella.  Lo spessore è specificato in pixel. 
imbottitura cellulare- riempimento in pixel tra il contenuto della cella e il suo bordo interno
Come prima, scrivi il valore dell'attributo tra virgolette.
 
Consideriamo l'applicazione di questi attributi per esempio.  Per fare ciò, crea una tabella (ma già senza la didascalia e i tag usati estremamente raramente) e impostare il parametro sull'attributo confine (confine), larghezza (larghezza della tabella, riga o cella) e bgcolor (colore della cella)
 

 

 

 



 


 


 


 





 
Di conseguenza, il browser visualizzerà una tabella del seguente modulo 

portafoto- attributo che denota un bordo intorno al tavolo.  Ci sono i seguenti valori:
Vuoto - nessuna cornice,
sopra - solo il telaio superiore, 
sotto - solo il telaio inferiore, 
lati - solo telai superiore e inferiore, 
vsides - solo frame sinistro e destro, 
lhs - solo bordo sinistro, 
dx - solo bordo destro, 
scatola - tutte e quattro le parti della scatola.
regole- un attributo che denota i bordi all'interno di una tabella, tra le celle.  Ci sono i seguenti valori:
Nessuno: non ci sono bordi tra le celle, 
gruppi - confini solo tra gruppi di righe e gruppi di colonne (saranno discussi un po' più avanti), 
righe - bordi solo tra le righe, 
cols - bordi solo tra le colonne, 
all - mostra tutti i bordi.
Considera il codice di esempio
 

 

 

 


 
  
 
 
Colonna 1 

 
 
 
Colonna 2 

 
 
 
 
 
 



 
 


 
 
 
 

 


 


 


 





 
Risultato
Ora proviamo a creare una bella tabella.  Per fare ciò, iniziamo a utilizzare allineamento in tabella...  Per questo, ci sono i seguenti parametri già familiari:
allineare- allineamento del tavolo.  Può essere posizionato a sinistra (sinistra), destra (destra), centro (centro) 
spaziatura delle celle- distanza tra le celle della tabella.  Specificato in pixel (predefinito 0 pixel) 
imbottitura cellulare- riempimento in pixel tra il contenuto della cella e il suo bordo interno (per impostazione predefinita 0 pixel)
Consideriamo un esempio
 

 

 

 


 
  
 
 
Colonna 1 

 
 

Colonna 2 

 
 
 
 
 
 

Il testo nella prima cella della prima colonna 

 
 
Testo nella seconda cella della seconda colonna 

 
 
 
 


 


 


 


 





 
Il browser mostra una tabella centrata simile a questa
Stringhe Tr e celle td nelle tabelle HTML
Ti ricordo ancora una volta che le tabelle sono formate riga per riga (tr).  Le righe (tr) contengono già celle (td).  Se imposti un parametro per una stringa (tr), allora sarà valido per tutte le cellule(td) in questa riga, se per una cella specifica, solo per essa.  Negli esempi sopra, ho specificato il colore per la linea, questo parametro è stato distribuito di conseguenza per tutte le celle. 
 



 


Per i tag tr e td ci sono i seguenti
allineare- allineamento del testo all'interno della cella.  Sinistra, Destra, Centro 
valign- allineamento verticale del testo all'interno della cella.  Su (in alto), in basso (in basso), al centro (al centro) 
bgcolor- imposta il colore della linea 
larghezza- larghezza della colonna (accetteranno tutte le celle sottostanti questo parametro) è specificato in pixel o in percentuale, dove 100% è la larghezza dell'intera tabella 
altezza- altezza cella (tutte le celle nella riga accetteranno questo parametro)
Si consideri un codice in cui il contenuto delle celle (td) sia allineato su bordi diversi: nella prima a sinistra, nella seconda a destra:
 

 

 

 


 
 
 
 
Colonna 1 

 
 
 
Colonna 2 

 
 
 
 
 
 

Il testo nella prima cella della prima colonna 

 
 
Testo nella seconda cella della seconda colonna 

 
 
 
 
 

 
 
Colonna 1 

 
 
 
Colonna 2 

 
 
 
 


 


 


 


 





 
Risultato 

Con l'aiuto delle tabelle, puoi creare un'ottima pagina.  Non dimenticare che puoi inserire non solo testo nelle celle, ma anche immagini, collegamenti, ecc.!)
Grazie per l'attenzione!  Spero che il materiale sia stato utile!
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 il layout e il layout della pagina Web singoli elementi, perché tale tecnica non fornisce la flessibilità della struttura e l'adattabilità 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 tag accoppiato
 Fig. 1. Aspetto esteriore tabelle senza formattare le 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 delle 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 * / tabella (larghezza: 100%;) / * imposterà larghezza fissa per tabella * / tabella (larghezza: 600px;)
Se le celle della tabella sono impostate imbottitura e bordi, 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 della 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
4. Come creare una cella del corpo del tavolo
 situati nella stessa riga determinano il numero di celle nella riga della tabella.  Numero di coppie di cellule e per indicare ogni parte della tabella. 
L'elemento deve essere utilizzato nel seguente ordine: as elemento figlio
 
 
 
 
Colonna 1 

 
 
 
Colonna 2 

 
 
 
 
 
 

Il testo nella prima cella della prima colonna 

 
 
Testo nella seconda cella della seconda colonna 

 
 
 
 





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

  
crea celle di tabella, all'interno delle quali vengono inseriti i dati della tabella.  Tag accoppiati

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 pilastri 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 i 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
 
, 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 fermi l'overhead e i sottotitoli, e quando vengono stampati sulla stampante, saranno in grado di per utilizzare l'overhead e il sottotitolo come intestazioni di pagina.  Tuttavia, i browser moderni non lo fanno e lo visualizzano semplicemente come stringhe di dati o, in caso migliore, inserisci 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 di colonne da combinare per un lavoro stile uniforme, il valore predefinito è 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"
 
 

V questa sezione vengono discusse alcune funzionalità specifiche del browser e sottigliezze individuali costruzione e visualizzazione di tabelle.
Visualizzazione di celle vuote nelle tabelle HTML
Una delle caratteristiche della presentazione delle tabelle HTML browser diversiè visualizzare le celle vuote.  Secondo la descrizione linguaggio HTML tutti i browser dovrebbero riempire le righe con celle vuote se una riga contiene meno celle rispetto ad altre righe.  Inoltre, le celle che non contengono dati possono essere trovate ovunque nella tabella.
Esiste una distinzione tra celle vuote e celle che contengono dati invisibili.  In celle vuote all'interno di una coppia di tag e non contiene alcuna informazione o uno o più spazi che non vengono trattati come dati.  Le celle contenenti dati invisibili, ad esempio, possono contenere codice o codice di avanzamento riga 
o qualsiasi testo che corrisponda al colore di sfondo della cella.  Se le celle contenenti dati (anche se invisibili) vengono visualizzate allo stesso modo da tutti i browser, le celle vuote verranno visualizzate in modo diverso.  Il browser Netscape non mostra una cella vuota, ovvero il luogo in cui il data cella, verrà dipinto con il colore di sfondo della pagina, non con il colore di sfondo della cella, a differenza delle celle contenenti dati.  Non viene disegnato alcun bordo attorno alle celle vuote. Esempio HTML una tabella con una cella vuota è mostrata in Fig.  4.15.
Riso.  4.15. Vuoto Cella HTML le tabelle vengono visualizzate in modo diverso da browser diversi
Microsoft Internet Explorer sia quelle che le altre celle vengono visualizzate con il colore di sfondo delle celle.  Un browser come NSCA Mosaic offre all'utente la possibilità di determinare la natura dell'output delle celle di tabella vuote scegliendo le opzioni appropriate.  La conoscenza di tali funzionalità ti consentirà di progettare tabelle che verranno visualizzate opportunamente, indipendentemente dal browser selezionato dall'utente.  In alcuni casi è sufficiente per questo creare celle contenenti un unico codice invece di alcune celle vuote.