Crollo del bordo CSS

Dr. Ursula Marini
Crollo del bordo CSS
Un bordo è qualcosa che viene visualizzato attorno al tavolo o alle celle. Viene anche usato per separare due celle o elementi e intorno all'intero tavolo o scatola. Il collasso del bordo significa che il bordo della tabella o della cella viene visualizzato come una singola linea. Usiamo questa proprietà-collasso del bordo in CSS quando vogliamo visualizzare un singolo bordo attorno al tavolo o alle celle del tavolo.

In questo tutorial, utilizzeremo questa proprietà-collapse sul bordo sul tavolo in modo da imparerai come questa proprietà viene utilizzata in CSS per collassare il bordo della tabella e per separare il bordo della tabella e delle celle. Iniziamo a esplorare gli esempi forniti in questo tutorial per imparare questo concetto di collasso di confine.

Sintassi:

  • Collapse di confine: collasso;
  • Collapse di confine: separato;

Esempio 1
Apri il file nel codice Visual Studio e seleziona la lingua per questo, che è la lingua HTML mentre creiamo una tabella in HTML. Successivamente, colleghiamo il file HTML al file CSS per l'ulteriore styling della tabella. Puoi eseguire questi esempi sul diverso software di tua scelta, ma il codice per questo è lo stesso. Qui, utilizziamo il codice Visual Studio. Questo file HTML viene salvato. Noi usiamo il ".HTML ”Estensione del file per questo file.

Il codice precedente è il codice HTML in cui creiamo una tabella con quattro righe e due colonne. Innanzitutto, scriviamo un'intestazione e poi usiamo il "

"Tag per creare la tabella. IL ""È qui per rappresentare le" righe "della tabella. Inseriamo i dati nelle celle della tabella usando "
"È definire l'intestazione del tavolo. IL "
". IL ""È definire la" cellula "del tavolo. Dopo aver creato la tabella e messo i dati in questa tabella, ci spostiamo sul file CSS per dare stile a questa tabella. Usiamo la proprietà Collapse Border nel codice CSS.

Codice CSS:
Applichiamo alcune proprietà sull'intestazione per rendere la nostra intestazione più attraente. Cambiamo la sua "famiglia di carattere" e lo impostiamo su "Arial". Lo stile di questo testo di intestazione è "corsivo" e il colore di questa intestazione è "blu". Ora procediamo al tavolo e impostiamo il bordo della tabella come "1px" in larghezza, "solido" in tipo e "nero" di colore. Il concetto principale è usato qui che è "collasso di frontiera". Usiamo questa proprietà e impostiamo questo "collasso di confine" per "crollare".

Produzione:
Diamo un'occhiata alla seguente immagine in cui viene mostrata l'output. Puoi vedere che il bordo del tavolo è single.

Esempio n. 2
In questo caso, modifichiamo un po 'la tabella precedente. Qui, aggiungiamo altre due colonne alla tabella precedente e usiamo nuovamente la proprietà "Collapse a confine" in questa nuova tabella.

Codice CSS:
Nel codice CSS, utilizziamo un'altra proprietà che è la proprietà "spaziatura delle frontiere". Vedrai se influisce sul bordo del tavolo o meno quando usiamo la proprietà "Collapse a confine" insieme a questa proprietà.

Modifichiamo la "famiglia del carattere" dell'intestazione. Questa volta, usiamo "Calibri" come "Font-Family" dell'intestazione. Il "colore" che usiamo qui per l'intestazione è "rosso". Ora, applica di nuovo la proprietà "bordo" per la tabella, la cella e l'intestazione del tavolo. Il bordo di tutte queste proprietà è impostato su "2px", con un tipo "solido" e colore "verde". La proprietà "Collapse a confine" è impostata su "crollo". Quindi usiamo la "spaziatura del bordo" per dare spazio tra il bordo della tabella e le celle della tabella. Lo impostiamo su "20px".

Produzione:

Qui, l'output non mostra alcuna differenza nel bordo delle tabelle e delle celle. Appare lo stesso dell'illustrazione precedente. Ciò significa che la proprietà "spaziatura del confine" non cambia lo spazio del bordo del tavolo perché abbiamo usato la proprietà "Collapse a confine" in questa tabella insieme alla proprietà "spaziatura del confine".

Esempio n. 3
Qui, creiamo due tabelle diverse allo stesso modo discusso in precedenza nel nostro primo esempio. Creiamo due tabelle in modo da poter imparare come questa proprietà "colletti da bordo" funziona in modo diverso rispetto alla proprietà di frontiera "separata".

Codice CSS:
La "famiglia di font" della voce è "Times New Roman" con un colore "blu". Il "bordo" di entrambe le tabelle è impostato sul colore "arancione" e "2px" di tipo "solido". Usiamo la proprietà "Collapse a confine" nella Tabella 1. Usiamo anche l'altro "collasso di confine" nella Tabella 2, ma questa volta, impostiamo questa proprietà come "separata".

Produzione:
Qui, abbiamo due tabelle nell'output. Il primo bordo della tabella è lo stesso dei nostri esempi precedenti. Ma il secondo bordo della tabella è diverso perché abbiamo usato il "separato" con il "collasso di confine". Il bordo della tabella è separato dal bordo delle celle in una tabella.

Esempio #4
Qui, abbiamo di nuovo due tavoli che abbiamo progettato nell'esempio 3. Ora cambiamo alcuni stili di queste tabelle, utilizziamo la proprietà "spaziatura del bordo" su entrambe le tabelle e controlli la differenza in entrambe le tabelle.

Questa volta, la "famiglia del carattere" della voce è "algerina" e il colore è "marrone". Il bordo del tavolo è di colore "magenta". La tabella uno utilizza il "crollo" con il "collasso del bordo" con una "spaziatura del bordo" di "10px". Per la tabella due, utilizziamo un bordo "separato" e la "spaziatura del bordo" è anche "10px". L'output mostrerà la differenza.

Produzione:
Nell'output, puoi facilmente vedere la differenza tra la tabella uno e la tabella due. Ciò dimostra che quando usiamo il "Collapse del confine: bordo", allora il "spaziatura del bordo" non influisce sulla tabella. Ma quando usiamo il "Collapse a confine: separato", allora possiamo impostare la spaziatura del bordo tra le cellule e il bordo del tavolo secondo la nostra scelta.

Esempio #5
Qui, applichiamo le tre proprietà del bordo del tavolo. Innanzitutto, utilizziamo la proprietà "Collapse a confine" nella Tabella 1 che è impostata come "crollo". Nella seconda proprietà, cambiamo il colore del bordo a "verde marino medio". Nella terza proprietà, utilizziamo il "spaziatura del bordo: 10px". Successivamente, utilizziamo le stesse proprietà nella Tabella 2, ma utilizziamo la proprietà "separata" anziché "crollo" nella proprietà "collasso di confine". Inoltre, abbiamo impostato il colore del bordo per "viola" e usiamo lo stesso "spaziatura del bordo". Ora, guarda come funziona.

Non ci sono cambiamenti nella Tabella 1. Non c'è spaziatura tra il bordo del tavolo e le cellule. Il colore del tavolo è lo stesso. La proprietà "bordo-colore" non influisce sulla tabella in quanto utilizziamo il bordo "crollo" nella tabella 1. Ma nella Tabella 2, puoi vedere che il colore del bordo del tavolo e il bordo della cella sono diversi. Inoltre, c'è una spaziatura di "10px" tra il bordo della cella e il bordo del tavolo.

Conclusione

In questo tutorial, abbiamo usato la proprietà "Collapse a confine" e abbiamo imparato la differenza quando usiamo "separati" e "crollo" con la proprietà "colletti di confine". Ci viene anche mostrato l'output in cui sono visibili la differenza sia in "separato" che in "crollo". Puoi facilmente ottenere questo concetto su come entrambe le proprietà sono diverse l'una dall'altra. Hai imparato cosa succede quando usiamo la proprietà "separata" e "crollo" con la proprietà "Collapse a confine" in CSS.

Powershell
Come usare il cmdlet di Object in PowerShell
Il cmdlet ordin-object è responsabile dell'ordinamento degli oggetti in base alle loro proprietà. Pu...
Dr. Ursula Marini
c affilato
Come usare la parola chiave di lancio in c#
La parola chiave Throw è come una dichiarazione di salto in C# che può aumentare un'eccezione. Le ec...
Dr. Ursula Marini
PHP
Come utilizzare la funzione Array_merge in PHP?
La funzione Array_merge () in PHP consente di combinare più array in uno. Segui questo articolo per ...
Osea Martini