Por que CellSpacing e não cellpadding estilos CSS
-
19-08-2019 - |
Pergunta
Eu não sei por que isso me incomoda muito, mas quando eu criar sites, eu sempre tento fazer todo o meu estilo com CSS. No entanto uma coisa que eu sempre tenho que lembrar de fazer quando eu estou trabalhando com tabelas é add cellspacing = "0" e cellpadding = "0"
Por que não há uma propriedade CSS para substituir 4 atributos estes HTML antiquada?
Solução
table { border-collapse: collapse; }
Como para cellpadding , você pode fazer
table tr td, table tr th { padding: 0; }
Outras dicas
mat já respondeu, mas apenas para ser completo:
-
padding
?cellpadding
-
border-spacing
?cellspacing
-
border-collapse
? não HTML equivalente
Também vale a pena lembrar que você pode definir os valores horizontais e verticais separadas para os CSS por exemplo border-spacing: 0 1px
.
estilo de reset de Eric Myer contém o seguinte estilo 'reinicialização' para a tabela:
/* tables still need 'cellspacing="0"' in the markup */
table {
border-collapse: collapse;
border-spacing: 0;
}
Em TD disso, TR são repostas:
thead, tr, th, td {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-size: 100%;
vertical-align: baseline;
background: transparent;
}
A razão de eu mencionar isto é que ele tem um comentário 'mesas ainda precisam cellpadding = 0'. Presumo que ele colocar isso aqui por uma razão - provavelmente necessário por alguns navegadores antigos. A julgar pelo fato de que este é um dos poucos comentários que ele incluídos eu estou supondo que é importante e que há uma boa razão para isso.
Com base neste comentário - e este comentário sozinho! - Eu estou continuando a usar cellspacing = "0" na marcação a menos que alguém me diz definitivamente (abaixo) por que eu não preciso. É no entanto provável que poderia ser desnecessária em qualquer navegador moderno pena apoiar estes dias.
table { border-collapse:collapse; }
Eu acho que alguém considerado célula espaçamento uma “má prática”. Como eu entendo que é equivalente incluído no padrão CSS2, mas o IE não suporta esta propriedade. border-collapse permite definir o espaçamento para 0 valor. preenchimento da célula pode ser conseguido definindo a propriedade padding para elementos TD de uma tabela.