2010-01-16 7 views
19

Eric meyer reset css suggerisce "le tabelle hanno ancora bisogno di 'cellspacing =" 0 "' nel markup". È necessario? e qual è il vantaggio di border-collapse: collapse; e border-spacing: 0;?È necessario aggiungere cellspacing = "0" cellpadding = "0" in ?

e suggerisce solo l'uso di cellspacing, mentre table ha un'altra proprietà chiamata cellpadding?

/* tables still need 'cellspacing="0"' in the markup */ 
table { 
     border-collapse: collapse; 
     border-spacing: 0; 
} 

risposta

11

cellpadding non è suggerito perché la proprietà padding css sostituisce sufficientemente le proprietà di default per l'attributo cellpadding tavolo. Come dice l'altra risposta, non esiste una proprietà CSS compatibile per cellspacing nei browser più vecchi, lasciando un attributo HTML come l'unico modo per "resettare" completamente questa impostazione su 0. border-spacing: 0; si prende cura di questo per i browser che lo supportano.

Quanto border-collapse — predefinita, celle hanno ciascuno il proprio bordo e collapse fonderà i confini tra celle adiacenti insieme, dando l'apparenza di un (solitamente singolo pixel) griglia, che non è realizzabile qualsiasi altra modo quando cellspacing="0". Prima che lo standard border-collapse fosse comunemente supportato, questo è il motivo per cui si vedrebbero le tabelle con cellspacing="1" e un colore di sfondo sulla tabella e sfondi bianchi sulle celle della tabella.

border-collapse:collapse; si trova in reset.css semplicemente perché è il risultato desiderato più comune. Se non vuoi questa modalità, staresti bene rimuovendo questo da reset.css.

6

Internet Explorer 6 e 7, e probabilmente altri primi browser, non riconoscono l'attributo border-spacing e come tale, egli suggerisce ancora fornire i valori nel codice HTML pure.

Check out the compatibility table on SitePoint

1

Esistono due tipi di bordi in una tabella, la tabella stessa può avere bordi (bordi esterni e confini tra le cellule), e ciascuna cella può avere bordi che li circonda.

L'utilizzo di border-collapse: collapse; significa che due celle con le stesse impostazioni del bordo una accanto all'altra otterranno solo un singolo insieme di bordi anziché un doppio, ad es. il bordo destro di una cella crollerà con il bordo sinistro della cella successiva nella riga.

Non esiste uno stile CSS per il bordo della tabella tra le celle fino al CSS 2, quindi deve essere disabilitato utilizzando l'attributo HTML cellspacing="0" sulla tabella per supportare i browser meno recenti come IE 7 *. Se tra le celle ci sono dei bordi del tavolo, il collasso del bordo non funzionerà naturalmente poiché i bordi non sono uno accanto all'altro.

* Ho veramente apprezzato la sensazione di chiamare IE 7 "un vecchio browser";)

+0

e che dire del cellpadding? –