Un web designer utilizza Cascading Style Sheet (CSS) le regole per determinare il layout del suo sito web sugli schermi dei visitatori del suo sito. Alcune di queste regole sono progettati per controllare l'aspetto delle tabelle. Un designer utilizza le tabelle per visualizzare i dati tabulari in un formato organizzato. Una di queste regole CSS determina l'aspetto del bordo del tavolo. In particolare, la regola border-collapse CSS crolla due bordi in un l'altro per formare un unico confine.

La tavola

Una tabella fornisce un web designer con uno strumento per visualizzare insiemi di dati. I singoli componenti dei dati sono separati in celle della tabella. Le cellule vengono visualizzati in righe e le intestazioni indicano le righe. Le intestazioni vengono visualizzate nella parte superiore di ogni riga e raccontano l'utente circa i dati in ogni riga.

Il confine

Un bordo separa le righe e le celle della tabella. regole CSS permettono al progettista Web per stabilire le proprietà del confine. Per esempio, il seguente esempio potrebbe creato un bordo nero di due pixel tra le celle della tabella:

td {border: 2px solid # 000; }

Border-collapse Proprietà

La proprietà CSS crollo confine crolla il bordo della cella di tabella nel bordo della sua cella vicina. Così, utilizzando l'esempio precedente: se il progettista crolla il confine, invece di due confini di due pixel ciascuno (quindi, sembrerebbe come una spessa bordo di 4 pixel in quel punto), ciascuna cella della tabella avrebbe condiviso una comune 2 pixel confine.

I valori di border-collapse

La proprietà border-collapse CSS accetta tre valori. Il valore ereditano permette al tavolo di accettare lo stesso attributo come posseduto da un elemento padre. Il valore crollo crolla il confine e la proprietà separata mantiene il confine separato dal suo confine vicina. È importante notare che il valore distinto è il valore predefinito e verrà attuato se è stato inserito alcun altro valore. L'esempio seguente utilizza CSS per crollare bordi della tabella:

table {border-collapse: crollo; }

Questo esempio mantiene i bordi si separano:

table {border-collapse: separata; }