Contenuto della confezione della tabella...
Il risultato di questo esempio è mostrato in Fig. 2.
Riso. 2. Allineare il tavolo sul lato destro
L'esempio corrente crea una tabella con uno sfondo grigio e l'allineamento a destra. Per sviluppare i rientri dalla tabella al contenuto, viene utilizzato il parametro margin con un valore di 10 pixel.
Per evitare che la tabella si avvolga quando è allineata lungo uno dei bordi, il modo più semplice è aggiungere un tag dopo la tabella
con il chiaro: entrambi gli stili impostati. Questo comando disabilita il wrapping da entrambi i bordi sinistro e destro (esempio 3).
contenuto...
L'allineamento della tabella al centro avviene allo stesso modo, tramite il parametro tag align="center".
, ma in questo caso non c'è il wrapping e il contenuto dopo la tabella inizia sempre su una nuova riga.
Dovrebbe essere facile per il visitatore trovare le informazioni di cui ha bisogno nella pagina. Per questo, oltre che per esprimere qualche espressione, vengono utilizzati vari tag HTML. Questo articolo discuterà le sfumature del lavoro con le tabelle, in particolare il loro allineamento.
Sottigliezze di base
Innanzitutto, va notato che questa forma grafica di presentazione dei dati consente di strutturare le informazioni, il che ne facilita notevolmente l'assimilazione. Quasi tutti i contenuti possono essere inseriti all'interno delle celle della tabella: dal testo al video. È importante considerare non solo le dimensioni, ma anche la sua posizione.
Come centrare il tavolo stesso
Molto spesso, è necessario disporre il tavolo al centro della pagina, sebbene inizialmente sia premuto sul lato sinistro della pagina. Per allinearlo al centro, devi impostare la sua proprietà margin su auto.
Ciò fa sì che il riempimento della tabella venga calcolato automaticamente. Dopodiché, la tabella sarà centrata sulla pagina.
Allineamento al centro nelle celle
Altrettanto spesso, è necessario allineare i dati al centro di una cella. In questo caso, ci sono tre modi: orizzontale, verticale e assoluto. Dal loro nome è chiaro su quale asse avverrà la centratura. In ogni caso, viene utilizzato il tag
, che è responsabile di una cella specifica nella riga. Successivamente, devi assegnare i suoi attributi valign (verticale) e/o align (orizzontale) a "centro", a seconda della tua attività:
| Testo al centro della cella |
Se vuoi rendere questa formattazione standard per l'intero sito o pagina (in modo da non riscrivere ogni tabella), allora dovresti usare gli stili CSS. Per fare ciò, aggiungi il seguente codice all'interno del tag :
Utilizzando questo metodo, puoi anche impostare l'allineamento per una cella specifica, nonché per una colonna, una riga o l'intera tabella nel suo insieme. Come puoi vedere, uno qualsiasi dei metodi è molto semplice.
Penso che molti di voi che hanno svolto lavori di layout abbiano riscontrato la necessità di allineare gli elementi verticalmente e sappiano quali difficoltà sorgono quando si allinea un elemento al centro. Sì, per l'allineamento verticale in CSS esiste una speciale proprietà di allineamento verticale con molti valori. Tuttavia, in pratica non funziona come previsto. Proviamo a capirlo.
Confrontiamo i seguenti approcci. Allineamento con: - tavoli,
- rientro,
- altezza della linea ,
- allungamento,
- margine negativo,
- trasformare,
- pseudo elemento
- scatola flessibile.
A titolo illustrativo, considera il seguente esempio. 
Ci sono due elementi div, uno nidificato nell'altro. Diamo loro le classi appropriate - esterno e interno.
L'obiettivo è allineare l'elemento interno al centro dell'elemento esterno.Per cominciare, considera il caso in cui le dimensioni del blocco esterno e interno conosciuto. Aggiungiamo display: inline-block all'elemento interno e text-align: center e vertical-align: medio all'elemento esterno. Ricorda che l'allineamento si applica solo agli elementi che hanno la modalità di visualizzazione in linea o blocco in linea. Impostiamo le dimensioni per i blocchi, così come i colori di sfondo per vedere i loro bordi. Esterno (larghezza: 200px; altezza: 200px; allineamento testo: centro; allineamento verticale: medio; colore di sfondo: #ffc; ) .interno ( display: blocco in linea; larghezza: 100px; altezza: 100px; colore di sfondo : #fcc; )
Dopo aver applicato gli stili, vedremo che il blocco interno è allineato orizzontalmente, ma non verticalmente:
http://jsfiddle.net/c1bgfffq/ Perchè è successo? Il fatto è che la proprietà vertical-align influisce sull'allineamento l'elemento stesso, non il suo contenuto(tranne quando viene applicato alle celle della tabella). Pertanto, l'applicazione di questa proprietà all'elemento esterno non ha fatto nulla. Inoltre, applicare questa proprietà all'elemento interno non farà nulla, poiché i blocchi in linea sono allineati verticalmente con i blocchi vicini e nel nostro caso abbiamo un blocco in linea. Esistono diverse tecniche per risolvere questo problema. Diamo un'occhiata più da vicino a ciascuno di essi di seguito. Allineamento con una tabellaLa prima soluzione che viene in mente è quella di sostituire il blocco esterno con una tabella a cella singola. In questo caso, l'allineamento verrà applicato al contenuto della cella, ovvero al blocco interno.
http://jsfiddle.net/c1bgfffq/1/L'evidente svantaggio di questa soluzione è che dal punto di vista semantico è sbagliato usare le tabelle per l'allineamento. Il secondo svantaggio è che per creare una tabella è necessario aggiungere un altro elemento attorno al blocco esterno. Il primo meno può essere parzialmente rimosso sostituendo i tag table e td con div e impostando la modalità di visualizzazione della tabella in CSS.
.outer-wrapper ( display: tabella; ) .outer ( display: table-cell; )
Tuttavia, il blocco esterno rimarrà comunque un tavolo con tutte le conseguenze che ne conseguiranno.Allineamento con imbottituraSe si conoscono le altezze del blocco interno ed esterno, è possibile impostare l'allineamento utilizzando il riempimento verticale del blocco interno, utilizzando la formula: (H esterno - H interno) / 2. Esterno (altezza: 200px; ) .interno (altezza: 100px; margine: 50px 0; )
http://jsfiddle.net/c1bgfffq/6/ Lo svantaggio della soluzione è che è applicabile solo in un numero limitato di casi quando si conoscono le altezze di entrambi i blocchi. Allineamento con l'altezza della lineaSe sai che il blocco interno non deve occupare più di una riga di testo, puoi utilizzare la proprietà line-height e impostarla uguale all'altezza del blocco esterno. Dal momento che il contenuto del blocco interno non dovrebbe andare a capo della seconda riga, si consiglia di aggiungere lo spazio bianco: nowrap e overflow: anche regole nascoste. Esterno ( altezza: 200px; altezza della linea: 200px; ) .inner ( spazio bianco: nowrap; overflow: nascosto; )
http://jsfiddle.net/c1bgfffq/12/ Questa tecnica può essere utilizzata anche per allineare il testo multilinea se si sovrascrive il valore dell'altezza della linea per il blocco interno e si aggiungono le regole display: inline-block e vertical-align: middle . Esterno (altezza: 200px; altezza della linea: 200px; ) .interno (altezza della linea: normale; display: blocco in linea; allineamento verticale: medio; )
http://jsfiddle.net/c1bgfffq/15/ Lo svantaggio di questo metodo è che l'altezza del blocco esterno deve essere nota. Allineamento allungatoQuesto metodo può essere utilizzato quando l'altezza del blocco esterno è sconosciuta, ma l'altezza di quello interno è nota. Per questo hai bisogno di: - impostare il posizionamento relativo al blocco esterno e il posizionamento assoluto al blocco interno;
- aggiungi le regole in alto: 0 e in basso: 0 al blocco interno, in conseguenza del quale si estenderà all'intera altezza del blocco esterno;
- impostare il valore su auto per il riempimento verticale del blocco interno.
.esterno ( posizione: relativa; ) .interno ( altezza: 100px; posizione: assoluta; alto: 0; basso: 0; margine: automatico 0; )
http://jsfiddle.net/c1bgfffq/4/ L'essenza di questa tecnica è che l'impostazione di un'altezza per un blocco allungato e posizionato in modo assoluto fa sì che il browser calcoli il riempimento verticale in uguale proporzione se il loro valore è impostato su auto. Allineamento con margine superiore negativoQuesto metodo è diventato ampiamente noto e viene utilizzato molto spesso. Come il precedente, si applica quando non si conosce l'altezza del blocco esterno, ma si conosce l'altezza di quello interno. È necessario impostare il blocco esterno sul posizionamento relativo e il blocco interno sul posizionamento assoluto. Quindi è necessario spostare la scatola interna verso il basso della metà dell'altezza della parte superiore della scatola esterna: 50% e spostarla verso l'alto della metà della propria altezza margine superiore: -H interno / 2. Esterno (posizione: relativa; ) .interno (altezza: 100px; posizione: assoluta; superiore: 50%; margine superiore: -50px; )
http://jsfiddle.net/c1bgfffq/13/ Lo svantaggio di questo metodo è che l'altezza dell'unità interna deve essere nota. Allineamento con trasformazioneQuesto metodo è simile al precedente, ma può essere applicato quando l'altezza del blocco interno è sconosciuta. In questo caso, invece di impostare un riempimento negativo in pixel, puoi utilizzare la proprietà transform e sollevare il riquadro interno utilizzando la funzione translateY e un valore di -50% . Esterno ( posizione: relativa; ) .interno ( posizione: assoluta; in alto: 50%; trasforma: traduciY(-50%); )
http://jsfiddle.net/c1bgfffq/9/ Perché nel metodo precedente era impossibile impostare il valore in percentuale? Poiché i valori percentuali della proprietà margin sono relativi all'elemento padre, un valore del 50% equivarrebbe alla metà dell'altezza del riquadro esterno e avremmo bisogno di aumentare il riquadro interno della metà della sua stessa altezza. Questo è esattamente lo scopo della proprietà transform. Lo svantaggio di questo metodo è che non può essere applicato se il blocco interno ha un posizionamento assoluto. Allineamento con FlexboxIl modo più moderno per allineare verticalmente è utilizzare il layout della scatola flessibile (popolarmente noto come Flexbox). Questo modulo ti consente di controllare in modo flessibile il posizionamento degli elementi sulla pagina, posizionandoli quasi ovunque. L'allineamento centrale per Flexbox è un compito molto semplice. Il blocco esterno deve essere impostato per visualizzare: flex e il blocco interno deve essere impostato su margin: auto . Ed è tutto! Bello, non è vero? Esterno ( display: flex; larghezza: 200 px; altezza: 200 px; ) . interno ( larghezza: 100 px; margine: auto; )
http://jsfiddle.net/c1bgfffq/14/ Lo svantaggio di questo metodo è che Flexbox è supportato solo dai browser moderni. Quale modo scegliere?È necessario procedere dall'enunciazione del problema: - Per l'allineamento verticale del testo, è preferibile utilizzare il riempimento verticale o la proprietà line-height.
- Per elementi posizionati in modo assoluto con un'altezza nota (come le icone), è l'ideale un approccio con margine superiore negativo.
- Per i casi più complessi in cui l'altezza del blocco è sconosciuta, è necessario utilizzare uno pseudo-elemento o la proprietà transform.
- Bene, se sei abbastanza fortunato da non dover supportare le versioni precedenti di IE, ovviamente Flexbox è migliore.
Tag: aggiungi tag
o proprietà della tabella HTML e delle celle negli esempi
Continuiamo a studiare Tabelle HTML. La lezione attuale ti insegnerà come installare Dimensioni della tavola, allineare verticalmente e orizzontalmente il suo contenuto, più precisamente il contenuto delle celle. Imparerai anche come determinare Intestazione della tabella HTML.
Navigazione della pagina
Larghezza e altezza della cella della tabella HTML (dimensione della cella)
Altezza e larghezza della cella HTML, dimensioni definito dai seguenti attributi:
Sono state impostate le dimensioni della prima cella della prima riga. Di conseguenza, la seconda cella della stessa riga ha ereditato l'altezza della prima e la prima cella della seconda riga ne ha ereditato la larghezza (la larghezza della prima cella, la prima riga). Questa è una caratteristica dell'interazione degli elementi Tabelle HTML.
Allineamento HTML orizzontale nella tabella e nella cella, testo
Allineamento HTML all'interno di una tabella. Testo a sinistra, a destra, centrato nelle celle della tabella:
Risultato:
Risultato:
Risultato:
tag | | determinare Intestazione della tabella HTML.
Centro tabella HTML, lato sinistro, destro
Disposizione orizzontale della tabella HTML all'interno di una pagina web:
L'esempio sopra ne mostra tre separati tavoli, ognuno dei quali è costituito da una cella. bgcolor- HTML attributo - definisce il colore di sfondo. Nel tutorial precedente l'abbiamo usato css analogico - colore di sfondo.
Tabella HTML situata all'interno di una cella
All'interno della seconda cella ce n'è un'altra tavolo con i suoi attributi, valori e stili.
Dimensioni e sfondo del tavolo interno, in contrasto con quello esterno, sono dati con l'aiuto di css.
informa il browser che la tabella è completa.
Qualsiasi tabella è composta da colonne e righe.
Etichetta
crea una stringa e il tag | cella di fila. Di conseguenza, quante celle sono incluse in una riga, ci saranno tante colonne nella tabella.
Etichetta | crea anche una cella. La sua differenza dal tag | che la cella creata dal tag | è una cella di intestazione: il suo contenuto è centrato e, se è testo, il browser lo visualizza in grassetto.
Il contenuto della cella creata dal tag | di default si trova nella sua parte sinistra.
Etichetta crea un'intestazione di tabella, si trova all'interno del tag - subito dopo il tag di apertura. Il titolo è posizionato sopra la tabella per impostazione predefinita ed è centrato.
Intestazione tabella
1a cella della 1a riga |
2a cella della 1a riga |
1a cella 2a riga |
2a cella della 2a riga |
|
|
Allineamento della tabella. Allineamento del contenuto delle celle
L'attributo align del tag viene utilizzato per allineare la tabella.
.
Con l'attributo align puoi posizionare la tabella nella parte sinistra o destra (align= "left" e align= "right" ) della finestra del browser ( elemento padre) o dal suo centro (align= "center" ).
Allineamento del contenuto della riga ( etichetta
) e celle ( etichetta |
) orizzontalmente viene eseguita anche con l'attributo align e verticalmente con l'attributo valign:
L'attributo align prende i valori left , right , center , e justify , che impostano l'allineamento del contenuto di righe e celle rispettivamente in base alla loro sinistra, destra, centro e larghezza;
L'attributo valign, che assume i valori top , bottom e middle , imposta l'allineamento del contenuto di righe e celle rispettivamente in base alla loro parte superiore, inferiore e centrale.
L'attributo align serve anche per allineare l'intestazione ( etichetta
) orizzontalmente e determinandone la posizione - sopra o sotto il tavolo.
Per impostazione predefinita, il contenuto della cella è allineato a sinistra in orizzontale e al centro in verticale.
Altezza e larghezza della tabella e delle celle
Le dimensioni predefinite ( altezza e larghezza) e le tabelle e le celle cambiano a seconda della dimensione del loro contenuto.
Ma l'altezza e la larghezza sia della tabella che delle sue singole celle possono essere impostate in modo esplicito, utilizzando rispettivamente gli attributi hieght e width.
Etichetta | Quello che crea la riga della tabella non ha gli attributi di altezza e larghezza. L'altezza di una riga corrisponde all'altezza delle celle che vi si trovano. La larghezza della riga è uguale alla larghezza della tabella.
I valori di altezza e larghezza sono specificati in pixel o come percentuale dello spazio libero. Per impostare i valori:
Specifica un numero intero positivo. In questo caso, la dimensione sarà data in pixel;
Specificare un numero intero positivo con il simbolo %.
Se il contenuto della tabella o della cella supera le dimensioni specificate, verranno ignorate dal browser e le nuove dimensioni verranno selezionate automaticamente in base alle dimensioni del contenuto.
Come si vede dall'esempio: specificando la larghezza di una delle celle della colonna si imposta così la larghezza dell'intera colonna; e specificando l'altezza di una delle celle della riga, si imposta l'altezza dell'intera riga.
Bordi di tabelle e celle
La tabella e ciascuna delle sue celle hanno i propri bordi, che non sono visibili per impostazione predefinita.
L'attributo del bordo del tag permette di rendere visibili i bordi e di impostarne lo spessore. Questo visualizzerà i bordi attorno alla tabella e attorno a ciascuna cella.
Spessore bordo ( o cornici) è specificato in pixel. Il valore dell'attributo border è un numero intero positivo. Se l'attributo del bordo viene specificato senza un valore, il bordo avrà uno spessore di 1 pixel.
Lo spessore del bordo viene impostato solo per la tabella. Lo spessore del bordo attorno alle celle è sempre 1 pixel ( o assente).
Per impostazione predefinita, il bordo viene visualizzato con un effetto 3D ed è nero.
L'attributo bordercolor imposta il colore del bordo e rimuove l'effetto 3D. L'attributo può essere utilizzato per impostare il colore del bordo della tabella ( etichetta
), stringhe ( etichetta
) o celle ( etichetta |
).
L'attributo bordercolor non è supportato da tutti i browser e pertanto non è consigliato. Per impostare il colore del bordo, è meglio usare gli stili ( è già in css).
L'attributo del bordo non è stato specificato. |
Pertanto, non ci sono confini. |
|
|
Il bordo della tabella ha uno spessore di 3 pixel. |
Le celle hanno bordi spessi 1 pixel! |
|
|
Visualizzazione parziale del bordo
Il bordo della tabella e la cornice intorno alle celle possono essere visualizzati parzialmente.
attributo tag frame specifica dove disegnare il bordo della tabella. L'attributo rules specifica come visualizzare i bordi delle celle.
Cornice "500px"="hsides" rules="cols" >
Installato |
orizzontale |
bordi del tavolo |
E |
vengono visualizzati i bordi |
tra le colonne |
Imbottitura all'interno e all'esterno delle celle
Quando si formattano le tabelle in HTML, per una presentazione visiva di alcune informazioni e la loro comoda percezione, può essere utile utilizzare i rientri all'interno e all'esterno delle celle.
Padding: dai bordi delle celle al loro contenuto, impostato dall'attributo cellpadding del tag
.
Padding esterno: la distanza tra i bordi delle celle vicine e la distanza tra i bordi delle celle e il bordo della tabella, sono impostate dall'attributo cellspacing del tag
.
I valori degli attributi sono numeri interi positivi che specificano la distanza in pixel.
Distanza dal contenuto della cella |
ai loro bordi è di 10 pixel |
Distanza tra le celle e dalle celle |
al bordo della tabella è 25px |
Unire le celle
Quando si progettano e si formattano tabelle in HTML, è spesso necessario unire celle adiacenti. E se si presentasse una tale necessità, dovresti usare gli attributi colspan e rowspan del tag
.
L'attributo colspan specifica il numero di celle da unire orizzontalmente e l'attributo rowspan imposta il numero di celle da unire verticalmente.
Entrambi gli attributi hanno senso se la tabella ha più righe.
Sfondo della tabella. Sfondo di celle di tabella
In HTML, è possibile impostare uno sfondo generale per l'intera tabella, nonché uno sfondo per una singola cella selezionata.
L'attributo background del tag specifica un'immagine che sarà l'immagine di sfondo della tabella. Il valore dell'attributo specifica l'indirizzo del file con l'immagine: un percorso assoluto o relativo al file ().
Attributo del tag bgcolor imposta il colore di sfondo della tabella. Il colore può essere impostato in due modi ()
Utilizzando gli stessi attributi, puoi impostare l'immagine di sfondo e il colore di sfondo per qualsiasi cella della tabella ( etichetta
).
|
Il rosa scuro è il colore di sfondo del tavolo. |
L'immagine di sfondo di una singola cellula è il cielo! |
|
Ricordiamo anche l'esistenza dell'attributo cols del tag , che indica al browser il numero di colonne nella tabella.
L'utilizzo dell'attributo cols consente al browser di rendere più veloce il contenuto della tabella.
Modifica tabella
In questa sezione considereremo i tag utilizzati durante la modifica di più elementi della tabella contemporaneamente. Questi tag possono essere divisi in due gruppi.
Il primo gruppo include tag e . Sono quasi identici e servono per impostare alcune proprietà e modificare le caratteristiche di una o più colonne della tabella.
Uno di questi tag viene posizionato immediatamente dopo il tag . Diciamo questo tag
.
Utilizzo dell'attributo span del tag specificare il numero di colonne a cui verranno applicati gli attributi align, valign o width ( allineare il contenuto delle celle delle colonne orizzontalmente, verticalmente o impostare la larghezza delle colonne).
Se l'attributo span nel tag mancante, quindi le caratteristiche di uno: la prima colonna della tabella verrà modificata. La seconda volta che usi il tag le proprietà sono impostate per quanto segue ( next - se l'attributo span è assente) colonne della tabella, ecc.
Larghezza "2"="70px" >
1
|
2
|
3
|
4
|
5
|
Il secondo gruppo di tag include anche tag quasi identici
, e
.
Ognuno di essi può essere utilizzato per modificare alcune proprietà di una o più righe della tabella: questo è ancora l'allineamento del contenuto delle celle nelle righe orizzontalmente e verticalmente, utilizzando rispettivamente gli attributi align e valign; e impostando il colore di sfondo delle celle usando l'attributo bgcolor.
Quando usi questi tag, dovresti essere consapevole di alcune sfumature che determinano solo le differenze tra di loro.
tag e deve essere posizionato prima del tag , subito dopo il tag di apertura della tabella . Righe inserite in un tag sono presentati nella parte superiore della tabella e le righe racchiuse nel tag si troverà in fondo alla tabella. Entrambi i tag possono essere applicati solo una volta all'interno della stessa tabella.
Etichetta può essere utilizzato più volte all'interno di un tag
.
|
1
|
2
|
|
3
|
4
|
|
5
|
6
|
|
7
|
8
|
"destra" bgcolor= "#00FF33" >
|
9
|
10
|
Articoli correlati in alto
| | | |
Come configurare smartphone e PC. Portale informativo
