Celle di tabella con diversi rientri css. Come aumentare la spaziatura tra i bordi delle celle

Ciascuno 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 compito colore di sfondo celle utilizzando l'attributo bgcolor.

Quando usi questi tag, dovresti essere consapevole di alcune sfumature che determinano solo le differenze tra loro.

tag

Etichetta

I bordi delle tabelle HTML sono facili da modificare con gli strumenti css. L'impostazione della loro visualizzazione viene eseguita a causa delle proprietà: compressione e spaziatura.

Per modificare l'aspetto di una tabella, utilizza il gruppo di proprietà border. Consente di personalizzare la larghezza, il colore, la presenza/assenza dei bordi, il loro stile e altre funzionalità di visualizzazione.

Nozioni di base

Una tabella senza stili sembrerà testo strutturato senza bordi. La tabella in html è costruita grazie ai tag:

• tr per archi;
• th per le intestazioni;
• td per le colonne.

La dimensione e il font del testo, lo sfondo, il padding dal bordo della finestra del browser sono impostati in css nel body container.

Corpo ( famiglia di caratteri: Helvetica, Sans-serif; dimensione del carattere: 5vw; colore: nero; colore di sfondo: rgba(228, 228, 245); padding: 20vh; )

Con l'aiuto degli stili, distinguono l'aspetto della matrice. La proprietà border permette di impostare il valore dello spessore, tipo e colore del bordo della tabella html.

( larghezza del bordo: 2vw; stile del bordo: punteggiato; colore del bordo: azzurro; )

Abbreviato come bordo: larghezza stile colore.

( bordo: 1px solido #4c6ea1; )

Per un certo lato, è impostato secondo il modello border-top(/right/bottom/left)-style(/color/width/radius).

( bordo superiore colore: blu scuro; )

Padding imposta il padding all'interno della cella dal testo alla cornice, text-align imposta l'allineamento.

Gli stili vengono utilizzati per definire lo stile della tabella. La proprietà border consente di impostare la larghezza, lo stile e il colore del bordo. Padding imposta il padding dal testo, text-align imposta l'allineamento.

Th, td ( border: 1vw solid #4c6ea1; padding: 1vw; text-align: left; )

nessuna cornice

Non è necessario usare border o scrivere border-color, -width e -style separatamente, poiché puoi creare una tabella html senza bordi con un design completo. Ad esempio, il codice seguente imposta lo sfondo, la spaziatura interna e gli angoli arrotondati (l'ultima matrice senza linee interne ed esterne).

Table ( text-align: left; background-color: rgba(228, 228, 245); border-top-left-radius: 15em 1em; border-bottom-right-radius: 15em 1em; ) td, th ( padding: 1.5vw;)

Con la possibilità di impostare uno sfondo per ogni cella, una tabella senza bordi può sembrare che abbia dei bordi.

Tabella ( text-align: left; background-color: rgba(228, 228, 245); width: 70vw; border-spacing: 2vh 2vh; ) td, th ( padding: 1.5vh; ) td ( background-color: rgba (247, 247, 255); )

Puoi rimuovere i bordi della tabella html, lasciando quelli interni. Per fare ciò, ad esempio, impostano la proprietà border per le celle (tr), impostano frame comuni sui lati adiacenti (collapse) e proibiscono di tracciare linee attorno alla matrice (hidden). Ultima azione nasconderà le linee delle celle che, quando il collasso è abilitato, si trovano nello stesso punto dei bordi esterni della tabella.

Tabella ( text-align: center; border-collapse: collasso; background-color: rgba(228, 228, 245); border-radius: 50%; width: 29vh; height: 10vh; border-style: hidden; ) ( imbottitura: 1.5vh; bordo: 0.5vh nero pieno; )

crollare e separarsi

Una delle proprietà principali della tabella in html - border-collapse - determina come verranno visualizzati i bordi delle celle. La proprietà può avere uno dei tre valori seguenti: collassa, separa, eredita.

tabella ( border-collapse: collasso; )

L'impostazione predefinita è separata, quindi ogni cella avrà il proprio bordo. Grazie alla compressione, puoi unire le linee di celle in modo che i loro contenuti siano separati da una cornice. L'immagine mostra i tre stati di confine sopra descritti: nessuno stile; con border-collapse per impostazione predefinita; con un valore border-collapse che lascia una linea comune tra le celle.

doppie cornici

La proprietà di collasso consente di rendere i bordi delle celle in una tabella html indipendenti l'uno dall'altro e comuni. Viene spesso utilizzato con la proprietà border-spacing, che controlla la spaziatura tra i bordi delle celle. È possibile specificare sia la spaziatura orizzontale che quella verticale.

Tabella ( spaziatura bordo: 0.5vw 1vw; )

Il primo valore specifica la distanza orizzontale tra le celle, il secondo valore specifica la distanza verticale. Se la cornice è impostata per la tabella stessa, anche la distanza da essa alle celle è formata dalla proprietà spasing, ma può anche essere influenzata dal riempimento della matrice. Nei casi in cui la matrice ha uno sfondo, lo spazio liberato tra le celle verrà riempito con esso.

Tabella ( spaziatura bordo: 0.5vw 1vw; bordo: 1vw solido #4c6ea1; padding: 1vw; colore di sfondo: nero; ) td, th ( bordo: 1vw solido #4c6ea1; padding: 0.3vw; text-align: left; colore di sfondo: bianco; )

Celle vuote

Se una tabella non è impostata per unire i bordi delle celle, la proprietà celle vuote consente di visualizzarne le linee e gli sfondi, che sono considerati vuoti (contrassegnati come visibili o privi di caratteri). Se vuoi mostrare i bordi e lo sfondo di ogni cella, imposta la proprietà su mostra.

table ( celle vuote: mostra; )

Il valore nascondi nasconde i bordi e gli sfondi delle caselle vuote. Se tutte le celle della riga sono vuote, la riga ha altezza zero e solo una linea verticale.

Tabella ( spaziatura bordo: 0.5vw 1vw; bordo: 0.1vw solido #4c6ea1; riempimento: 0.5vw; colore di sfondo: rgba(33, 31, 171, 0.12); celle vuote: nascondi; ) td, th ( bordo : 0.3vw solid #4c6ea1; padding: 0.5vw; text-align: left; background-color: white; )

Attributo

C'è un attributo rules per definire i bordi per gruppi di elementi (celle, colonne, righe, gruppi di righe o colonne). Il suo valore è scritto direttamente in html nel tag table.

Ti permette di disegnare selettivamente i bordi degli elementi. È sufficiente specificare un attributo in html, questo creerà linee interne tra le celle. Il bordo della tabella html dovrà essere specificato manualmente in css.

Quindi, la prima immagine mostra il puro funzionamento dell'attributo senza ulteriori inquadrature attraverso la tabella. Nella seconda immagine, la riga superiore è completata, che viene impostata tramite le istruzioni.

Tabella ( bordo superiore: 1vw doted #486743; )

Un attributo può avere più valori. Tutto crea bordi tra le celle con una larghezza del bordo di 1px. Cols crea linee tra colonne, righe crea linee tra righe, nessuno cancella i bordi. L'immagine mostra esempi di una tabella con valori all e rows.

È possibile modificare il colore e la larghezza del bordo della cella quando si utilizza l'attributo rules utilizzando border e bordercolor.

Conflitti di stile

Celle, righe, colonne e gruppi di elementi possono avere i propri valori di bordo. Allo stesso tempo, possono differire in tre parametri: stile, spessore e colore.

In modalità di compressione, ci sono conflitti di progettazione. A causa del fatto che la regola di due celle diverse può essere applicata a un bordo, c'è il problema di scegliere uno stile che sarà una priorità. Come scrive E. Malchuk, vince il più "orecchiabile" (tranne nascosto).

1. Se uno degli elementi ha la proprietà border-style del bordo contestato impostata su hidden, quello stile vince. Nascosto ha la massima priorità.
2. Il peso più piccolo è impostato su nessuno. Impone inoltre che la riga non venga visualizzata, ma affinché l'istruzione venga eseguita, tutti gli elementi per questa riga devono avere questa regola (nessuna).
3. Tra bordi sottili e spessi, i bordi spessi hanno la precedenza.
4. Con le stesse cornici, ma stili diversi, vince sempre il doppio solido (doppio), seguito da solido, punteggiato (tratteggiato), punteggiato.
5. Se le differenze sono solo nei colori, la vista del componente più piccolo è sempre più alta (la decorazione delle celle ha la precedenza sulle righe e le righe sono più alte delle tabelle).

Illustrazione del conflitto

È facile illustrare il conflitto di stili sulla tabella già considerata. È sufficiente aggiungere un paio di classi alle celle e prescrivere loro il design. html assume la forma:

Il suo corrispondente css.

Corpo ( font-family: Helvetica, Sans-serif; font-size: 5vw; colore: black; margin: 0; width: 80vw; background-color: white; padding: 3vw; ) table ( background-color: rgba(33 , 31, 171, 0.12); padding: 0.5vw; border-collapse: collasso; border-spacing: 0.5vw 1vw; border-style: hidden; ) th ( padding: 1vw; text-align: left; border: 0.1vw solido #4c6ea1; ) td ( padding: 1vw; bordo: 0.2vw tratteggiato #4c6ea1; ) .second_cell ( bordo: 0.01vw solido #4c6ea1; ) . third_cell ( bordo: 0.01vw doppio rosso; )

Stili di cornice

La decorazione del bordo può essere impostata separatamente per ciascun lato della cella. Per fare ciò, è sufficiente indicare nello stile del bordo non un valore, ma elencarne quattro, rispettivamente, ai lati della cella.

Th, td ( padding: 1vw; text-align: left; border-width: 0.5vw; border-color: darkred; border-style: dotted; ) .seven ( border-top-color: skyblue; border-top-style : solido; larghezza del bordo destro: 2vw; stile del bordo inferiore: tratteggiato; stile del bordo sinistro: nascosto; )

È possibile specificare i dati in una riga specificando da uno a quattro valori diversi. Ciascuno diventa tradizionalmente un'istruzione per una delle parti.

• Se inserisci due valori, il primo sarà responsabile dei bordi inferiore e superiore, il secondo dei bordi sinistro e destro.
• Dei tre, il primo è responsabile della parte superiore, il secondo della sinistra e della destra e il terzo della parte inferiore.
• Quattro valori identificano in modo univoco ciascuna delle linee, partendo dall'alto in senso orario verso sinistra.

È inoltre possibile specificare l'aspetto dei bordi delle celle attraverso una semplice definizione dei dati per ciascun lato, come mostrato sopra.

Ci sono dieci stili di cornice in totale. Tutti loro cambiano la riga o la rimuovono:

• nessuno - nessun confine;
• nascosto - più rigoroso nessuno, blocca l'aspetto della linea (in una situazione di conflitto);
• punteggiato: da punti;
• tratteggiato - punteggiato;
• solido - solido;
• doppio - doppio solido;
• scanalatura: la cornice sembra essere premuta sulla superficie;
• cresta - linea convessa;
• inserto - infatti, per un lato dell'elemento si comporta come una cresta, se applicato all'intero elemento, quindi in alto ea sinistra sono ombreggiati, e in basso ea destra sono evidenziati;
• inizio - si comporta come una scanalatura quando applicato su un lato di un elemento, ombreggiando la parte inferiore e destra, rendendo più chiara la parte superiore e sinistra.

A ciascuna delle celle (lato superiore e sinistro) è applicato uno degli stili. Affinché non competano tra loro, ai "più deboli" vengono assegnati i valori più alti.

Table ( background-color: rgba(33, 31, 171, 0.12); padding: 0.5vw; border-collapse: collasso; border: 0.3vw nero pieno; ) th, td ( padding: 1vw; text-align: left; ) .one ( border-top: hidden; border-left: hidden; ) .two ( border-top: 0.4vw double #4c6ea1; border-left: 0.4vw double #4c6ea1; ) .three ( border-top: 0.5vw pieno #4c6ea1; bordo sinistro: 0.5vw pieno #4c6ea1; ) .four ( bordo alto: 0.7vw tratteggiato #4c6ea1; bordo sinistro: 0.7vw tratteggiato #4c6ea1; ) .five ( bordo alto: 0.8vw tratteggiato # 4c6ea1; bordo sinistro: 0.8vw punteggiato #4c6ea1; ) .six ( bordo superiore: 0.9vw cresta #4c6ea1; bordo sinistro: 0.9vw cresta #4c6ea1; ) .seven ( bordo superiore: 1vw iniziale #4c6ea1; bordo -left: 1vw outset #4c6ea1; ) .eight ( border-top: 1.1vw groove #4c6ea1; border-left: 1.1vw groove #4c6ea1; ) .nine ( border-top: 1.2vw inserto #4c6ea1; border-left: 1.2vw inserto #4c6ea1;)

Strutturazione materiale

La natura dei dati presentati nella matrice richiede spesso la modifica dei confini della tabella stessa, dei frame delle sue celle, righe o colonne. Per questo puoi usare:

• linee di azzeramento (per border-width specificare un valore di 0px);
• nascosto.

Il vantaggio di nascosto è la forza della sua priorità. Se il bordo è influenzato dalla regola di due elementi contemporaneamente e uno di essi ha lo stile del bordo impostato su nascosto, la linea non verrà visualizzata. Cioè, puoi tranquillamente creare l'intera tabella e quindi rimuovere selettivamente i frame non necessari.

L'utilizzo di hidden on cells rende impossibile ripristinare il bordo con altri metodi (diversi dal peso massimo !important). Pertanto, se è necessario rimuovere alcuni lati delle celle, è meglio non utilizzarne nessuno.

Diciamo che abbiamo un tavolo. L'obiettivo è rimuovere i bordi verticali all'interno della prima riga. È contrassegnato da un tag separato (titolo), quindi non è richiesta alcuna classe aggiuntiva. Se applichi hidden all'intero tag, impostandolo su border-left, insieme ai bordi interni, verrà rimossa una parte della cornice laterale della tabella, che non era richiesta dalla condizione. Se usi nessuno e una linea della matrice, allora ci saranno due regole non in conflitto per le caratteristiche interne, e nessuna sul bordo esterno sarà in conflitto con la regola che gli è stata data nella tabella, e il lato rimarrà al suo posto.

La rimozione di singole linee di celle viene eseguita utilizzando le classi assegnate agli elementi corrispondenti, come mostrato per i singoli stili, larghezza e colore.

Considerando che è più facile rimuovere il bordo laterale nella tabella html facendo riferimento ai bordi esterni della matrice, che indicano in table. È sufficiente scrivere un'indicazione di una riga specifica in css.

Tabella ( stile bordo sinistro: nascosto; )

La rimozione dei bordi dalle righe è facile da implementare con la proprietà border impostata su hidden in tr. Scomparire non solo linee orizzontali tavolini, ma anche laterali. La matrice degenera in colonne verticali.

Tr ( stile bordo: nascosto; )

In casi estremi, diventano importanti. Se lo aggiungi dopo l'istruzione, riceverà una priorità aggiuntiva.

I bordi della tabella html sono flessibili e facili da personalizzare. Il gruppo di proprietà del bordo ti consente di nascondere elementi, cambiare colore, larghezza o stile. Lo svantaggio delle tabelle è che il risultato di una combinazione di regole applicate a un singolo elemento non è sempre prevedibile in modo univoco. In considerazione di ciò, si consiglia di ridurre il numero di stili possibili per i bordi o di applicarli in modo puntuale.

I margini e la spaziatura interna sono stili molto importanti quando si crea una pagina HTML. Consentono di posizionare più accuratamente gli elementi, creare una cornice con gli spazi necessari, ecc. Entrambi gli stili sono molto simili e svolgono funzioni simili. Ma ci sono ancora differenze.

Gli elementi possono essere annidati, possono essere adiacenti l'uno all'altro. Diamo un'occhiata al seguente esempio:

Abbiamo due tavoli, limone e blu, posti uno sotto l'altro. Le tabelle sono costituite da una cella. C'è un blocco rosso nella cella della prima tabella. In questo esempio, diamo un'occhiata a come funzionano i margini e il padding.

I campi sono impostati per stile imbottitura. Questo stile si applica solo agli elementi contenitore che possono contenere altri elementi. Stile consente di impostare il valore dei margini tra i bordi dell'elemento e il suo contenuto. Stile margine ti permette di impostare il riempimento da un elemento ai bordi più vicini di un altro elemento. I bordi di un altro elemento possono essere i bordi del contenitore padre, così come i bordi della pagina stessa.

Esistono diversi modi per impostare questi stili. Ad esempio, specifica direttamente la dimensione di tutti i margini o rientri con un argomento in un'unità di misura (px, ex, em, pt, cm e così via):

In questo caso, margini e padding saranno gli stessi su tutti e quattro i lati. Quando si specificano due argomenti separati da uno spazio:

il primo determinerà la quantità di margini/padding in alto e in basso, il secondo a sinistra ea destra. Quando vengono forniti tre argomenti:

il primo è il margine/rientro superiore, il secondo è sinistro e destro allo stesso tempo, il terzo è inferiore. Con quattro argomenti:

il primo è il margine superiore/padding, il secondo è il destro, il terzo è il basso, il quarto è il sinistro. È facile da ricordare: il primo è in alto, poi in senso orario. Inoltre, puoi impostare i margini e la spaziatura interna per un particolare bordo separatamente, utilizzando gli stili appropriati: parte superiore imbottita, imbottitura a destra, fondo imbottito, padding-sinistra, margine superiore, margine destro, margine inferiore, margine sinistro. Il valore di questi stili può essere solo un argomento, che specifica la quantità di margine/padding per un dato lato.

Nella figura, il blocco rosso si trova all'interno della cella della tabella e confina con i suoi bordi, ovvero la cella non ha margini. Impostiamo i margini della cella usando lo stile:

Di conseguenza, la pagina cambierà come segue:

Ora diamo un'occhiata agli offset. Due tabelle sono adiacenti l'una all'altra, se vogliamo allontanarle un po', possiamo applicare dei rientri. Ci sono due opzioni qui: impostare il rientro inferiore della prima tabella o il rientro superiore della seconda tabella. Usiamo il secondo:

Si noti che impostiamo il rientro sulla tabella e non sulla cella della tabella, come nel caso dei campi. Ecco il risultato:

A proposito, nel primo caso (lo spazio tra il blocco rosso ei bordi della cella madre), lo stesso effetto potrebbe essere ottenuto impostando i rientri del blocco. In generale, se qualcosa non è chiaro, annulla l'iscrizione nei commenti.

Codice HTML della pagina sperimentale:

Materiali tematici:

Come lavorare con la lista nera?

Internet illimitato da mts

Che tipo di connessione specificare durante la configurazione del router?

Come funziona l'app Yandex Taxi per i passeggeri

Tutti i modi per contattare l'operatore Tele2

Disabilita i servizi Megafon a pagamento tramite un operatore

Descrizione della tariffa "Tablet MTS

Qual è l'internet più veloce

• casa
• A proposito del diario
• Contatti
• Pubblicità

Copyright © 2023 sukachoff.com - Finestre. Virus. I Quaderni. Internet. ufficio. Utilità. Autisti