casaAliexpressRiempimento all'interno delle celle della tabella CSS
Riempimento all'interno delle celle della tabella CSS
Una tabella è uno degli strumenti principali per la creazione di pagine web.
Senza l'uso dei CSS, solo con l'aiuto delle tabelle, puoi creare pagine con disegni complessi. Se hai seguito una serie di lezioni Realizzare un sito web - i primi passi, allora capisci di cosa si tratta.
Qualsiasi tabella è un insieme di righe e colonne, all'intersezione delle quali ci sono celle. Per esempio:
Considera la nostra tabella in termini di HTML:
la tabella stessa è definita tramite tag
,
la tabella ha un nome - tag
,
la tabella è composta da righe - tag
,
ogni riga è composta da colonne - tag
,
le colonne hanno nomi che si trovano nella prima riga - tag
.
Creiamo una tabella in cui specifichiamo l'intersezione dei numeri di riga e di colonna come contenuto:
Risultato:
Come puoi vedere, si è rivelato non molto bello, lo decoreremo.
parametri della tabella html: riempimento, larghezza, colore di sfondo, cornice
Per questo, il tag
ci sono una serie di opzioni:
larghezza- imposta la larghezza della tabella (in pixel o % della larghezza dello schermo),
bgcolor- imposta il colore di sfondo delle celle della tabella,
sfondo- riempie lo sfondo del tavolo con un motivo,
confine- imposta una cornice della larghezza specificata (in pixel) attorno all'intera tabella,
imbottitura cellulare- imposta il riempimento in pixel tra il bordo della cella e il suo contenuto.
Applica queste impostazioni:
Risultato:
Già meglio, ma la nostra tabella è premuta sul bordo sinistro della finestra, così come il testo in essa contenuto. Risolviamolo aggiungendo altri tre parametri:
allineare- imposta l'allineamento della tavola: sinistra (destra), destra (sinistra), centro (centro),
spaziatura cellulare- imposta la distanza tra le celle della tabella (in pixel),
imbottitura cellulare- imposta la distanza tra il testo e il bordo interno della cella della tabella (in pixel).
Applica queste impostazioni:
Risultato:
Si prega di notare che i bordi della tabella sono doppi. Se specifichi spaziatura celle="0", quindi i confini assumeranno la solita forma:
Risultato:
In generale, due parametri sono responsabili dei confini:
telaio- imposta la cornice attorno al tavolo e può assumere i seguenti valori:
vuoto- nessuna cornice
sopra- solo telaio superiore
sotto- solo il telaio inferiore,
hside- solo i frame superiore e inferiore,
vs- solo frame sinistro e destro,
ss- solo il frame sinistro,
dx- solo cornice destra
scatola- tutte e quattro le parti del telaio.
regole- imposta il tipo di bordi interni della tabella e può assumere i seguenti valori:
nessuno- non ci sono confini tra le celle,
gruppi- bordi solo tra gruppi di righe e gruppi di colonne (da considerare poco dopo),
righe- bordi solo tra le righe,
coll- bordi solo tra le colonne,
tutto- Visualizza tutti i bordi.
Con queste opzioni, puoi impostare i bordi nel modo desiderato. Qui diamo solo un esempio, sperimentali tutti tu stesso.
Risultato:
Va notato che i bordi nei diversi browser vengono visualizzati in modo leggermente diverso.
Tag HTML tr e td
Le tabelle sono formate riga per riga. Pertanto, i parametri specificati nella riga (tr) si applicano a tutte le celle (td) della riga. Le stringhe possono avere tre parametri:
allineare- allinea il testo nelle celle orizzontalmente, può assumere valori: sinistra (destra), destra (sinistra), centro (centro),
valign- allinea il testo nelle celle verticalmente, può assumere valori: su (in alto), in basso (in basso), al centro (al centro),
bgcolor- imposta il colore della linea.
Diamo un'occhiata a un esempio:
larghezza- imposta la larghezza della colonna (in pixel o in percentuale, dove 100% è la larghezza della tabella),
altezza- imposta l'altezza della cella e tutte le celle nella stessa riga diventeranno questa altezza.
Ad esempio, aggiungiamo al nostro codice, ai tag
queste opzioni
1
2
3
Risultato:
Va notato che se non si impostano la larghezza e l'altezza, la tabella verrà formata in base al contenuto (come negli esempi precedenti).
Questa lezione è finita, esercitati a creare e formattare tabelle, avrai bisogno di queste abilità nella prossima lezione, dove creeremo tabelle di strutture complesse.
Dati tabulari- informazioni visualizzabili sotto forma di tabella e suddivise logicamente in colonne e righe. Il tag HTML viene utilizzato per visualizzare i dati tabellari sulle pagine Web.
, che è un contenitore con il contenuto della tabella. Il contenuto della tabella HTML è descritto riga per riga, ogni riga inizia con un tag di apertura
e termina con un tag di chiusura
.
All'interno dell'etichetta
si trovano le celle della tabella rappresentate dai tag
o
. Sono le celle che contengono tutto il contenuto della tabella visualizzata nella pagina web.
cornice del tavolo
Per impostazione predefinita, una tabella HTML su una pagina Web viene visualizzata senza bordo, per aggiungere un bordo alla tabella, così come a tutti gli altri elementi, utilizzare la proprietà CSS del bordo. Ma dovresti prestare attenzione al fatto che se aggiungi un bordo solo all'elemento
, quindi verrà visualizzato attorno all'intero tavolo. Affinché anche le celle della tabella abbiano una cornice, sarà necessario impostare la proprietà del bordo per gli elementi
Ora sia la tabella che le celle hanno bordi e ogni cella e tabella ha i propri bordi. Di conseguenza, è apparso uno spazio vuoto tra i frame, la proprietà border-spacing, impostata per l'intera tabella, consente di controllare la dimensione di questo spazio. In altre parole, non è possibile controllare singolarmente la spaziatura tra celle diverse.
Anche se rimuovi la spaziatura tra le celle con la proprietà di spaziatura del bordo impostata su 0, i bordi delle celle si toccheranno, raddoppiando. La proprietà border-collapse viene utilizzata per unire i bordi delle celle. Può assumere due valori:
separato: è il valore predefinito. Le celle vengono visualizzate a una piccola distanza l'una dall'altra, ogni cella ha il proprio bordo.
riduci: unisce i frame adiacenti in uno, tutti gli spazi tra le celle, così come tra le celle e il frame della tabella, vengono ignorati.
Nome del documento
Nome
Cognome
Omero
Simpson
Marge
Simpson
Nome
Cognome
Omero
Simpson
Marge
Simpson
Provare "
Dimensioni della tavola
Dopo aver aggiunto i bordi alle celle della tabella, è diventato evidente che il contenuto delle celle era troppo vicino ai bordi. Puoi utilizzare la proprietà di riempimento per aggiungere uno spazio bianco tra i bordi delle celle e il loro contenuto:
Th, td (padding: 7px; ) Prova »
La dimensione di un tavolo dipende dal suo contenuto, ma ci sono spesso situazioni in cui il tavolo è troppo stretto e diventa necessario allungarlo. La larghezza e l'altezza della tabella possono essere modificate utilizzando le proprietà di larghezza e altezza, impostando le dimensioni desiderate sia per la tabella stessa che per le celle:
Per impostazione predefinita, il testo nelle celle di intestazione della tabella è centrato e nelle celle normali il testo è allineato a sinistra, utilizzando la proprietà text-align è possibile controllare l'allineamento orizzontale del testo.
La proprietà CSS vertical-align consente di controllare l'allineamento verticale del contenuto del testo. Per impostazione predefinita, il testo è allineato verticalmente al centro delle celle. L'allineamento verticale può essere ignorato utilizzando uno dei valori della proprietà di allineamento verticale:
in alto: il testo è allineato alla parte superiore della cella
medio: allinea il testo al centro (predefinito)
bottom: il testo è allineato al bordo inferiore della cella
Nome del documento
Nome
Cognome
Omero
Simpson
Marge
Simpson
Provare "
Alternanza del colore di sfondo della riga della tabella
Quando si visualizzano tabelle di grandi dimensioni contenenti molte righe con molte informazioni, può essere difficile tenere traccia dei dati relativi a una determinata riga. Per aiutare gli utenti a navigare, puoi utilizzare alternativamente due diversi colori di sfondo. Per creare l'effetto descritto, puoi utilizzare il selettore di classe, aggiungendolo a ogni seconda riga della tabella:
Nome del documento
Nome
Cognome
Posizione
Omero
Simpson
padre
Marge
Simpson
madre
Bart
Simpson
figlio
Lisa
Simpson
figlia
Provare "
L'aggiunta di un attributo di classe a ogni seconda riga è un compito piuttosto noioso. La pseudo-classe :nth-child è stata aggiunta a CSS3 per risolvere questo problema in un modo alternativo. Ora l'effetto dello striping può essere ottenuto esclusivamente tramite CSS, senza ricorrere alla modifica del markup HTML del documento. Usando la pseudo-classe :nth-child, puoi selezionare tutte le righe pari o dispari di una tabella usando una delle parole chiave: pari (pari) o dispari (dispari):
Cambia lo sfondo della riga al passaggio del mouse
Un altro modo per migliorare la leggibilità dei dati tabulari consiste nel cambiare il colore di sfondo di una riga passandoci sopra con il mouse. Ciò contribuirà a evidenziare il contenuto desiderato della tabella e ad aumentare la percezione visiva dei dati.
L'implementazione di un tale effetto è molto semplice, tutto ciò che devi fare è aggiungere la pseudo-classe :hover al selettore di riga della tabella e impostare il colore di sfondo desiderato:
Tr:hover ( colore di sfondo: #E0E0FF; ) Prova »
Tabella di allineamento centrale
L'allineamento di una tabella HTML al centro è possibile solo se la larghezza della tabella è inferiore alla larghezza del suo elemento padre. Per allineare la tabella al centro, è necessario utilizzare la proprietà margin, impostandola su almeno due valori: il primo valore sarà responsabile del margine esterno della tabella dall'alto e dal basso e il secondo - per l'allineamento automatico del centro :
Tabella ( margine: 10px auto; ) Prova »
Se hai bisogno di margini diversi nella parte superiore e inferiore della tabella, puoi impostare la proprietà margin su tre valori: il primo sarà responsabile per il margine superiore, il secondo per l'allineamento orizzontale e il terzo per il margine inferiore:
Tabella (margine: 10px auto 30px; )
Abbiamo considerato molti metodi per definire lo stile di tali elementi sulla pagina come informazioni di testo, collegamenti, immagini, intestazioni, ma tutto ciò non è ancora sufficiente. Nei miei articoli, utilizzo spesso elementi HTML come le tabelle, perché nella maggior parte dei casi lo sono aiutano a organizzare le informazioni importanti e facilitano la presentazione.
In questo articolo, ti guiderò attraverso i dettagli dello stile delle tabelle HTML e imparerai nuove proprietà CSS progettate per raggiungere questi obiettivi.
Il linguaggio di markup dell'ipertesto HTML ci ha dato molte possibilità per associare stili CSS a dieci tag unici progettati per funzionare con le tabelle, propongo di ripeterli prima di ulteriori studi:
Etichetta
Descrizione
Definisce il contenuto della tabella.
Specifica il nome della tabella.
Definisce la cella di intestazione di una tabella.
Definisce una riga della tabella.
Definisce una cella di dati di una tabella.
Utilizzato per contenere un'intestazione di gruppo in una tabella (intestazione di tabella).
Utilizzato per contenere il "corpo" della tabella.
Utilizzato per contenere il "piè di pagina" della tabella (piè di pagina).
Definisce le proprietà della colonna specificate per ciascuna colonna all'interno del tag
.
Definisce un gruppo di colonne in una tabella.
Lavorare con i rientri in una tabella
Utilizzo del riempimento in una tabella
Rientri delle tabelle
1
2
3
4
2
3
4
In questo esempio noi:
Abbiamo posizionato il tavolo al centro utilizzando la tecnica della centratura orizzontale con margini esterni (margine: 0 auto).
Per il nome della tabella (tag
) impostiamo il riempimento inferiore su 19 pixel. Spero che tu non sia confuso dai numeri dispari :)
Il risultato del nostro esempio:
Spaziatura tra le celle
Dopo l'esempio sopra, potresti aver notato che abbiamo ancora uno spazio tra tutte le celle nella tabella. Diamo un'occhiata a come rimuovere lo spazio tra le celle della tabella o aumentarlo.
Per impostare la distanza tra i bordi delle celle adiacenti, devi utilizzare la proprietà CSS - border-spacing .
Modifica della spaziatura tra le tabelle
spaziatura bordo: 30px 10px;
1
2
3
2
3
spaziatura del confine: 0;
1
2
3
2
3
spaziatura del confine: 0,2 em;
1
2
3
2
3
In questo esempio noi:
galleggiante: sinistra). Se ti sei perso l'argomento degli elementi mobili, puoi sempre tornarci in questo tutorial - "".
Inoltre, impostiamo il margine destro delle tabelle a 30px e impostiamo l'allineamento verticale delle tabelle (la parte superiore dell'elemento è allineata con la parte superiore dell'elemento più alto). Torneremo su una discussione dettagliata di questa proprietà in questo articolo.
) è in grassetto.
Per le celle della tabella (intestazione e celle di dati), impostiamo un bordo solido di 1 px con colore esadecimale # F50 e impostiamo il riempimento su 19 px su tutti i lati.
Per il primo tavolo con la classe .primo impostiamo la spaziatura tra le celle della tabella (proprietà border-spacing) a 30px 10px , per la seconda tabella con la classe .secondo uguale a zero, per la terza tabella con la classe .Terzo pari a 0,2 em.
Attiro la vostra attenzione sul fatto che se nella proprietà border-spacing viene specificato un solo valore di lunghezza, allora specifica gli intervalli, sia orizzontalmente che verticalmente, e se vengono specificati due valori di lunghezza, il primo determina la distanza orizzontale , e la seconda verticale. La distanza tra i bordi delle celle adiacenti può essere specificata in unità CSS (px, cm, em, ecc.). Non sono ammessi valori negativi.
Il risultato del nostro esempio:
Mostra i bordi attorno alle celle della tabella
Si può dire: - quindi, abbiamo rimosso il divario tra le celle usando la proprietà di spaziatura del bordo con un valore di 0 , ma perché ora abbiamo i bordi delle celle che si intersecano?
I doppi bordi si formano a causa del fatto che il bordo inferiore di una cella viene aggiunto al bordo superiore della cella sottostante, una situazione simile si verifica sui lati delle celle e questo è logico in termini di visualizzazione della tabella, ma fortunatamente lì è un modo per dire al browser che non vogliamo vedere un comportamento così sfacciato dei bordi delle celle.
Per fare ciò, è necessario utilizzare la proprietà CSS border-collapse. Stranamente, l'utilizzo della proprietà border-collapse con il valore di compressione è il modo migliore per rimuovere lo spazio tra le celle senza ottenere doppi bordi tra di loro.
Considerare di confrontare il comportamento dei bordi quando si utilizza la proprietà border-spacing con un valore di 0 e la proprietà border-collapse con un valore di collasso :
Esempio di visualizzazione dei bordi attorno alle celle della tabella
spaziatura del confine: 0;
1
2
3
2
3
confine-collasso: collasso;
1
2
3
2
3
In questo esempio noi:
Abbiamo reso le nostre tabelle fluttuanti e spostate a sinistra (float : left ), impostando il loro margine esterno destro su 30px .
Impostare per il nome della tabella (tag
) è in grassetto.
Per le celle della tabella (intestazione e celle di dati) impostiamo un bordo solido di 5 px con colore esadecimale # F50 e impostiamo una larghezza fissa di 50 px e un'altezza di 75 px.
Per il primo tavolo con la classe .primo impostiamo la spaziatura tra le celle della tabella su zero (spaziatura bordo: 0 ;) e per la seconda tabella con la classe .secondo imposta la proprietà border-collapse su compression , che unisce i bordi delle celle in uno solo quando possibile.
Il risultato del nostro esempio:
Comportamento delle celle vuote
Con CSS, puoi impostare se visualizzare i bordi e lo sfondo delle celle vuote nella tabella o meno. La proprietà empty-cells è responsabile di questo comportamento che, come avrai notato dagli esempi precedenti, visualizza le celle vuote per impostazione predefinita.
Passiamo a un esempio:
Esempio di visualizzazione di celle di tabella vuote
celle vuote: mostra;
1
2
3
2
☺
3
☺
celle vuote: nascondi;
1
2
3
2
☺
3
☺
È molto facile capire come funziona la proprietà delle celle vuote di questo esempio, se è impostata su hide , le celle vuote e lo sfondo in esse saranno nascosti, se impostato su show (impostazione predefinita), verranno mostrati .
Posizione dell'intestazione della tabella
Diamo un'occhiata a un'altra semplice proprietà per lo stile della tabella - caption-side , che imposta la posizione della didascalia della tabella (sopra o sotto la tabella). Per impostazione predefinita, la proprietà caption-side è impostata su top , che posiziona la didascalia sopra la tabella. Per inserire un'intestazione sotto la tabella, è necessario utilizzare la proprietà con il valore bottom .
Diamo un'occhiata a un esempio di utilizzo di questa proprietà:
Un esempio di utilizzo della proprietà lato didascalia
Titolo sopra la tabella
Nome
Prezzo
Pesce
350 rubli
La carne
250 rubli
Titolo sotto il tavolo
Nome
Prezzo
Pesce
350 rubli
La carne
250 rubli
In questo esempio, abbiamo creato due classi, che controllano la posizione dell'intestazione della tabella. Primo grado ( .topCaption) mette l'intestazione della tabella sopra di essa, l'abbiamo applicata alla prima tabella e alla seconda classe ( .bottomCaption) inserisce l'intestazione della tabella sotto di essa, l'abbiamo applicata alla seconda tabella. Classe .topCaptionè impostato sulla proprietà lato didascalia per impostazione predefinita ed è stato creato a scopo dimostrativo.
Il risultato del nostro esempio:
Allineamento orizzontale e verticale
Nella maggior parte dei casi, quando si lavora con le tabelle, sarà necessario regolare l'allineamento del contenuto all'interno delle celle di intestazione e dati. La proprietà text-align viene utilizzata per l'allineamento orizzontale, in modo simile a qualsiasi informazione di testo. Abbiamo considerato l'uso di questa proprietà per il testo in precedenza nell'articolo "".
Per impostare l'allineamento del contenuto nelle celle, è necessario utilizzare parole chiave speciali con la proprietà text-align. Considera l'uso delle parole chiave di questa proprietà nell'esempio seguente.
Esempio di allineamento orizzontale in una tabella
Significato
Descrizione
sinistra
Allinea il testo della cella a sinistra. Questo è il valore predefinito (se la direzione del testo è da sinistra a destra).
Giusto
Allinea il testo della cella a destra. Questo è il valore predefinito (se la direzione del testo è da destra a sinistra).
centro
Allinea il testo della cella al centro.
giustificare
Allunga le linee in modo che ogni linea abbia la stessa larghezza (allunga il testo della cella per adattarlo alla larghezza).
In questo esempio, abbiamo creato quattro classi, che impostava diversi allineamenti orizzontali nelle celle e li applicava in ordine alle righe della tabella. Il valore nella cella corrisponde al valore della proprietà text-align
Il risultato del nostro esempio:
Oltre all'allineamento orizzontale, puoi anche definire l'allineamento verticale nelle celle della tabella utilizzando la proprietà vertical-align.
Si noti che quando si lavora con le celle della tabella, si applicano solo i seguenti * valori di questa proprietà:
*
- I valori sub , super , text-top , text-bottom , length e % applicati a una cella della tabella si comporteranno come se utilizzassero un valore di base.
Consideriamo un esempio di utilizzo:
Un esempio di allineamento verticale in una tabella
Significato
Descrizione
linea di base
Allinea la linea di base della cella con la linea di base del genitore. Questo è il valore predefinito.
superiore
Allinea il contenuto della cella verticalmente verso l'alto.
mezzo
Allinea il contenuto della cella verticalmente al centro.
parte inferiore
Allinea il contenuto della cella verticalmente verso il basso.
In questo esempio, abbiamo creato quattro classi, che impostava diversi allineamenti verticali nelle celle e li applicava alle righe della tabella. Il valore nella cella corrisponde al valore della proprietà vertical-align applicata a quella riga.
Algoritmo per posizionare il layout della tabella dal browser
Per impostazione predefinita, CSS utilizza l'algoritmo di layout automatico delle tabelle del browser. In questo caso la larghezza della colonna è impostata dal contenuto unificatore più ampio della cella. Questo algoritmo può essere lento in alcuni casi perché il browser deve leggere tutto il contenuto della tabella prima di determinarne il layout finale.
Per modificare il tipo di layout del layout della tabella dal browser con automatico sul fisso, devi utilizzare la proprietà CSS table-layout con un valore fixed .
In questo caso, il posizionamento orizzontale dipende solo sulla larghezza della tabella e la larghezza delle colonne, non sul contenuto delle celle. Il browser avvia il rendering della tabella non appena viene ricevuta la prima riga. Di conseguenza, l'algoritmo fisso consente di creare il layout di tale tabella più velocemente rispetto all'utilizzo dell'opzione automatica. Quando si lavora con tabelle di grandi dimensioni, è possibile utilizzare un algoritmo fisso per aumentare le prestazioni.
Diamo un'occhiata all'uso di questa proprietà con il seguente esempio:
Un esempio di utilizzo della proprietà table-layout
disposizione della tabella: automatica;
Nome
2009
2010
2011
2012
2013
2014
2015
2016
Grano
125
215
2540
33287
695878
1222222
125840000
125
disposizione del tavolo: fissa;
Nome
2009
2010
2011
2012
2013
2014
2015
2016
Grano
125
215
2540
33287
695878
1222222
125840000
125
In questo esempio noi:
Stile di righe e colonne della tabella
Tu ed io abbiamo già parzialmente toccato i metodi per lo styling di righe e colonne di una tabella nell'articolo "". In questo articolo, abbiamo esaminato l'utilizzo di una pseudo-classe di gruppo che consente di intercalare gli stili di riga nelle tabelle utilizzando i valori anche (onesto) e strano (strano), o per elementare formula matematica.
Rivisitiamo le tecniche che abbiamo trattato finora ed esploriamo nuovi modi per applicare uno stile a righe e colonne nelle tabelle. Passiamo agli esempi.
Un esempio di utilizzo della pseudo-classe :nth-child con le tabelle
1
2
3
4
5
6
7
8
9
10
11
12
13
14
2
3
4
In questo esempio noi:
Il risultato del nostro esempio:
Passiamo al prossimo esempio, in cui considereremo le opzioni per lo stile delle righe della tabella.
Un esempio di stile delle righe nelle tabelle
Servizio
Prezzo
Somma
15 000
1
1 000
2
2 000
3
3 000
4
4 000
5
5 000
In questo esempio noi:
Impostiamo la larghezza della tabella al 100% della larghezza dell'elemento genitore, per l'intestazione e le celle di dati impostiamo un bordo solido largo 1px.
Impostare per elemento (piè di pagina della tabella) colore di sfondo – corallo, per elemento ("intestazione" della tabella) imposta il colore di sfondo D'argento.
Per gli elementi
, che si trovano all'interno dell'elemento
(corpo della tabella) imposta il colore di sfondo da modificare al passaggio del mouse (pseudo-classe: passaggio del mouse) c bianca per colore cachi(l'intera riga è evidenziata).
Il risultato del nostro esempio:
Riso. 153 Esempio di stile di riga nelle tabelle
L'esempio seguente esamina l'applicazione dell'arrotondamento degli angoli alle celle della tabella (proprietà).
Esempio di arrotondamento degli angoli delle celle
1
2
3
4
5
In questo esempio noi:
Centrato la tabella con i margini esterni, imposta la larghezza e l'altezza delle celle di intestazione su 50px , specificato trasparente bordo 5 pixel.
Ho scoperto che quando passi il mouse (pseudo-class :hover) sulla cella di intestazione, ottiene uno sfondo blu colori, Arancia colore del testo, bordo arancia colori 5 pixel e raggio di arrotondamento 100% .
bordo trasparenteè necessario per riservare un posto al confine, che verrà visualizzato al passaggio del mouse, se ciò non avviene il tavolo “salta”.
Il risultato del nostro esempio:
L'esempio seguente tocca l'uso di elementi HTML
e
e il loro stile.
Esempio di evidenziazione della colonna della tabella
Applicazione numero.
Servizio
prezzo, strofinare.
Totale
1
Cantando
6 000
6 000
2
il bucato
2 000
2 000
3
Pulizia
1 000
1 000
4
Fastidioso
1 500
1 500
5
Lettura
3 000
3 000
In questo esempio noi:
Il risultato del nostro esempio:
E l'ultimo esempio, che è abbastanza difficile da capire e richiede una conoscenza avanzata dei CSS, in quanto tocca argomenti futuri previsti per un approfondimento all'interno di questo corso.
Nell'esempio precedente, ci siamo resi conto che l'elemento HTML
puoi applicare solo una proprietà CSS: il colore di sfondo (background-color), ma non puoi impostare il colore di sfondo quando passi il mouse (pseudo-class :hover) direttamente su questo elemento. In questo esempio, vedremo come evidenziare una colonna di una tabella usando solo CSS.
Un esempio di evidenziazione di colonne e righe di una tabella al passaggio del mouse
Applicazione numero.
Servizio
prezzo, strofinare.
Totale
1
Cantando
6 000
6 000
2
il bucato
2 000
2 000
3
Pulizia
1 000
1 000
4
Fastidioso
1 500
1 500
5
Lettura
3 000
3 000
In questo esempio noi:
Impostiamo che la nostra tabella occupi il 100% dell'elemento padre, le celle della tabella occupino il 25% dell'elemento padre e abbiano un bordo pieno di 1 pixel verde, l'altezza dell'intestazione e delle celle di dati sia 45px . Abbiamo rimosso il divario tra le celle utilizzando la proprietà border-collapse con il valore
.
E così, usando lo pseudo-elemento ::after, aggiungiamo contenuto dopo ogni elemento
in bilico. Lo pseudo-elemento ::after deve essere utilizzato insieme alla proprietà content, grazie alla quale inseriamo un elemento a livello di blocco che ha un colore di sfondo verde foresta e ha posizionamento assoluto.
Il posizionamento assoluto qui è necessario per sfalsare l'elemento rispetto al bordo specificato del suo predecessore, mentre l'antenato deve avere un valore di posizione diverso da quello predefinito - statico, altrimenti il conteggio sarà relativo al bordo specificato della finestra del browser, per questo motivo per cui abbiamo apparecchiato per la tavola posizionamento relativo(parente ).
Impostiamo la proprietà top per il nostro blocco generato, che specifica la direzione di offset dell'elemento posizionato dal bordo superiore, e la proprietà bottom, che specifica la direzione di offset dell'elemento posizionato dal bordo inferiore. Entrambe le proprietà sono state impostate a 0 , quindi il blocco occuperà completamente l'elemento dal basso e dall'alto della tabella, la larghezza di questo blocco è stata impostata al 25%, questo valore corrisponde al valore della larghezza della cella stessa.
E la proprietà finale che impostiamo per questo blocco: z-index con valore "-1" determina l'ordine degli elementi posizionati in Asse Z. Questa proprietà è necessaria affinché il testo sia davanti a questo blocco e non dietro di esso, se non si imposta un valore inferiore a zero, il blocco chiuderà il testo.
Il risultato del nostro esempio:
Se in questa fase dello studio il processo di posizionamento degli elementi non ti è chiaro, non scoraggiarti, questo è un argomento difficile da capire, che non abbiamo nemmeno considerato, ma lo considereremo sicuramente nel prossimo articolo di il libro di testo "Posizionamento degli elementi nei CSS".
Domande e compiti sull'argomento
Prima di passare all'argomento successivo, completa il compito pratico:
Se hai difficoltà a completare un esercizio pratico, puoi sempre aprire l'esempio in una finestra separata e ispezionare la pagina per vedere quale CSS è stato utilizzato.
2016-2020 Denis Bolshakov, puoi inviare commenti e suggerimenti sul sito a [email protected]
Le tabelle stesse sembrano piuttosto "scarse", inoltre i browser mostrano alcune caratteristiche delle tabelle a modo loro, in particolare i frame. Tuttavia, queste carenze sono facili da correggere usando il potere degli stili. Allo stesso tempo, gli strumenti per la progettazione delle tabelle vengono notevolmente ampliati, il che consente di adattare correttamente le tabelle alla progettazione del sito e presentare i dati tabellari in modo più chiaro.
Colore di sfondo della cella
Il colore di sfondo di tutte le celle della tabella contemporaneamente viene impostato tramite la proprietà di sfondo, che viene applicata al selettore TABLE. Allo stesso tempo, dovresti ricordare le regole per l'utilizzo degli stili, in particolare l'ereditarietà delle proprietà degli elementi. Sebbene la proprietà background non sia ereditata, il valore di background predefinito per le celle è transparent , ovvero trasparenza, quindi l'effetto di riempimento dello sfondo si ottiene anche per le celle. Se si specifica un colore per il selettore TD o TH contemporaneamente a TABLE, questo colore verrà impostato come sfondo della cella (esempio 2.3).
Esempio 2.3. Colore di sfondo
tavoli
Titolo 1
Titolo 2
Cella 3
Cella 4
In questo esempio, otteniamo un colore di sfondo blu per le celle (tag
) e rosso al titolo (tag
). Questo perché lo stile per il selettore TH non è definito, quindi lo sfondo del genitore, in questo caso il selettore TABLE, è "mostrato attraverso". E il colore per il selettore TD è specificato in modo esplicito, quindi le celle vengono "riempite" di blu.
Il risultato di questo esempio è mostrato in Fig. 2.4.
Riso. 2.4. Modifica del colore di sfondo
Margini all'interno delle celle
Il margine è la distanza tra il bordo del contenuto della cella e il suo bordo. Di solito, a questo scopo viene utilizzato l'attributo cellpadding del tag.
. Definisce il valore del margine in pixel su tutti i lati della cella. È possibile utilizzare la proprietà dello stile di riempimento aggiungendola al selettore TD, come mostrato nell'Esempio 2.4.
Esempio 2.4. Campi nelle tabelle
XHTML 1.0 CSS 2.1 IE Cr Op Sa Fx
tavoli
Titolo 1
Titolo 2
Cella 3
Cella 4
In questo esempio, raggruppando i selettori, i campi vengono impostati contemporaneamente per il selettore TD e TH . Il risultato dell'esempio è mostrato in Fig. 2.5.
Riso. 2.5. Campi nelle celle
Se la proprietà dello stile di riempimento viene applicata alle celle della tabella, l'effetto dell'attributo cellpadding del tag
ignorato.
Distanza tra le celle
Per modificare la spaziatura tra le celle, utilizzare l'attributo cellspacing del tag
. L'effetto di questo attributo è chiaramente visibile quando si utilizzano i bordi attorno alle celle o quando si riempiono le celle con un colore che risalta sullo sfondo della pagina. Spaziatura celle viene sostituita dalla proprietà di stile spaziatura bordo, che imposta la distanza tra i bordi delle celle. Un valore imposta la distanza verticale e orizzontale tra i bordi della cella. Se questa proprietà ha due valori, il primo definisce la distanza orizzontale (cioè a sinistra ea destra della cella) e il secondo determina la verticale (in alto e in basso).
La proprietà di spaziatura del bordo ha effetto solo se il selettore TABLE non ha il collasso del bordo impostato per la compressione (Esempio 2-5).
Esempio 2.5. Distanza tra i bordi delle celle
XHTML 1.0 CSS 2.1 IE 7 IE 8+ Cr Op Sa Fx
Sostituzione della spaziatura cellulare
Leonardo
5
8
Raffaello
4
11
Michelangelo
24
9
Donatello
2
13
Il risultato di questo esempio è mostrato in Fig. 2.6.
Riso. 2.6. Aspetto della tabella quando si utilizza la spaziatura del bordo
Internet Explorer fino alla versione 7 inclusa non supporta la proprietà di spaziatura bordo, quindi il browser utilizzerà il valore di spaziatura celle predefinito per le tabelle (in genere 2px).
Quando si aggiunge una proprietà di compressione del bordo con un valore di compressione al selettore TABLE, l'attributo di spaziatura delle celle viene ignorato e il valore di spaziatura del bordo viene impostato su zero.
Bordi e cornici
Per impostazione predefinita, inizialmente non è presente alcun bordo nella tabella e viene aggiunto utilizzando l'attributo border del tag
. I browser visualizzano tale bordo in modo diverso, quindi è meglio non specificare affatto questo attributo e assegnare il disegno del bordo agli stili. Diamo un'occhiata a due metodi direttamente correlati agli stili.
Utilizzo dell'attributo spaziatura celle
È noto che l'attributo cellspace del tag
imposta la distanza tra le celle della tabella. Se utilizzi un colore di sfondo diverso per la tabella e le celle, tra le celle verrà visualizzata una griglia di linee, il cui colore corrisponde al colore della tabella e lo spessore è uguale al valore dell'attributo spaziatura celle in pixel. L'esempio 2.3 sopra mostra questo effetto, quindi non lo ripeterò.
Nota che questo non è un modo molto conveniente per creare bordi, poiché ha una portata limitata. In questo modo puoi ottenere solo una griglia a un colore e non linee verticali o orizzontali nei punti giusti.
Applicazione della proprietà di confine
La proprietà dello stile del bordo imposta contemporaneamente il colore del bordo, il suo stile e la larghezza intorno all'elemento. Quando vuoi creare linee separate su lati diversi, è meglio usare le derivate - border-left , border-right , border-top e border-bottom , queste proprietà determinano rispettivamente il bordo sinistro, destro, superiore e inferiore.
Applicando la proprietà del bordo al selettore TABLE, aggiungiamo un bordo attorno alla tabella nel suo insieme, e al selettore TD o TH, aggiungiamo un bordo attorno alle celle (Esempio 2-6).
Esempio 2.6. Aggiunta di un doppio bordo
XHTML 1.0 CSS 2.1 IE Cr Op Sa Fx
tavoli
Titolo 1
Titolo 2
Cella 3
Cella 4
Questo esempio utilizza un doppio bordo nero attorno alla tabella stessa e un bordo bianco pieno attorno a ciascuna cella. Il risultato dell'esempio è mostrato in Fig. 2.7.
Riso. 2.7. Bordo intorno alla tabella e alle celle
Nota che le doppie linee si formano dove le celle si uniscono. Si ottengono nuovamente grazie all'azione dell'attributo cellspacing del tag
. Sebbene questo attributo non venga visualizzato in nessuna parte del codice di esempio, il browser lo utilizza per impostazione predefinita. Se imposti
, quindi otteniamo non doppie, ma linee singole, ma di spessore raddoppiato. Per modificare questa funzionalità, applica la proprietà di stile border-collapse con il valore compression , che viene aggiunto al selettore TABLE (Esempio 2.7).
Esempio 2.7. Creazione di una cornice singola
XHTML 1.0 CSS 2.1 IE Cr Op Sa Fx
tavoli
Titolo 1
Titolo 2
Cella 3
Cella 4
Questo esempio crea una linea verde continua tra le celle e una linea nera attorno alla tabella. Tutti i bordi all'interno di una tabella hanno lo stesso spessore. Il risultato dell'esempio è mostrato in Fig. 2.8.
Riso. 2.8. Bordo intorno al tavolo
Allineamento del contenuto delle celle
Per impostazione predefinita, il testo in una cella di tabella è allineato a sinistra. L'eccezione a questa regola è il tag
, definisce un'intestazione allineata al centro. Per modificare il metodo di allineamento, viene utilizzata la proprietà di stile text-align (esempio 2.8).
Esempio 2.8. Allinea il contenuto della cella orizzontalmente
XHTML 1.0 CSS 2.1 IE Cr Op Sa Fx
tavoli
Titolo 1
Cella 1
Cella 2
Titolo 2
Cella 3
Cella 4
In questo esempio, il contenuto del tag
è allineato a sinistra e il contenuto del tag
- al centro. Il risultato dell'esempio è mostrato di seguito (Figura 2.9).
Riso. 2.9. Allineare il testo nelle celle
L'allineamento verticale in una cella è sempre centrato se non diversamente specificato. Questo non è sempre conveniente, soprattutto per le tabelle il cui contenuto delle celle varia in altezza. In questo caso, l'allineamento viene impostato sul bordo superiore della cella utilizzando la proprietà vertical-align, come mostrato nell'Esempio 2-9.
Esempio 2.9. Allinea il contenuto della cella verticalmente
XHTML 1.0 CSS 2.1 IE Cr Op Sa Fx
tavoli
Titolo 1
Titolo 2
Cella 1
Cella 2
Questo esempio imposta l'altezza dell'intestazione
come 40 pixel e l'allineamento del testo è in basso. Il risultato dell'esempio è mostrato in Fig. 2.10.
Riso. 2.10. Allineare il testo nelle celle
Celle vuote
I browser visualizzano in modo diverso una cella che non contiene nulla. "Niente" in questo caso significa che né un'immagine né un testo sono stati aggiunti all'interno della cella e lo spazio non viene preso in considerazione. Naturalmente, l'aspetto delle celle differisce solo se attorno ad esse è impostato un bordo. Quando si utilizza un bordo invisibile, l'aspetto delle celle, indipendentemente dal fatto che contengano o meno qualcosa, è lo stesso.
I browser meno recenti non mostravano il colore di sfondo delle celle di visualizzazione vuote
, quindi nel caso in cui fosse necessario lasciare la cella senza contenuto, ma visualizzare il colore di sfondo, è stato aggiunto uno spazio non separato () all'interno della cella. Uno spazio non è sempre appropriato, soprattutto quando è necessario impostare l'altezza della cella su 1-2 pixel, motivo per cui il disegno trasparente a un pixel si è diffuso. In effetti, tale immagine può essere ridimensionata a tua discrezione, ma non viene visualizzata sulla pagina web.
Fortunatamente, l'era dei disegni a pixel singolo e di tutti i tipi di distanziatori basati su di essi è passata. I browser funzionano abbastanza correttamente con le tabelle senza la presenza del contenuto delle celle.
Per controllare l'aspetto delle celle vuote, viene utilizzata la proprietà celle vuote; quando è impostata su Nascondi, il bordo e lo sfondo nelle celle vuote non vengono visualizzati. Se tutte le celle di una riga sono vuote, l'intera riga è nascosta. Una cella è considerata vuota nei seguenti casi:
non ci sono affatto simboli;
la cella contiene solo una nuova riga, un carattere di tabulazione o uno spazio;
il valore di visibilità è impostato su nascosto.
L'aggiunta di uno spazio unificatore viene considerata come contenuto visibile, ad es. la cella non sarà più vuota (esempio 2.10).
Esempio 2.10. Celle vuote
XHTML 1.0 CSS 2.1 IE Cr Op Sa Fx
Utilizzo di celle vuote
Leonardo
5
8
Raffaello
11
Michelangelo
24
Donatello
13
La vista della tabella nel browser Safari è mostrata in fig. 2.11a. La stessa tabella in IE7 è mostrata in Fig. 2.11b.
un. Nel browser Safari, Firefox, Opera, IE8, IE9
b. Nel browser IE7
Riso. 2.11. Vista tabella con celle vuote
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 a sinistra, a destra, al centro e alla 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 mancante).
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.
1
2
3
4
1
2
3
4
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 manca l'attributo span) colonne della tabella, ecc.
Larghezza "2"="70px" >
1
2
3
4
5
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
Va notato che i bordi nei diversi browser vengono visualizzati in modo leggermente diverso.
