Respostas:
Fundamentos
Para controlar "cellpadding" em CSS, você pode simplesmente usar padding
nas células da tabela. Por exemplo, para 10 px de "cellpadding":
td {
padding: 10px;
}
Para "cellpacing", você pode aplicar a border-spacing
propriedade CSS à sua tabela. Por exemplo, para 10 px de "espaçamento entre células":
table {
border-spacing: 10px;
border-collapse: separate;
}
Essa propriedade permitirá até espaçamento horizontal e vertical separado, algo que você não poderia fazer com o "espaçamento de células" da velha escola.
Problemas no IE <= 7
Isso funcionará em quase todos os navegadores populares, exceto no Internet Explorer, até o Internet Explorer 7, onde você está quase sem sorte. Eu digo "quase" porque esses navegadores ainda oferecem suporte à border-collapse
propriedade, que mescla as bordas das células da tabela adjacentes. Se você estiver tentando eliminar o espaçamento entre células (ou seja cellspacing="0"
), border-collapse:collapse
deverá ter o mesmo efeito: sem espaço entre as células da tabela. Porém, esse suporte é incorreto, pois não substitui um cellspacing
atributo HTML existente no elemento da tabela.
Em resumo: para navegadores que não sejam o Internet Explorer 5-7, border-spacing
lida com você. Para o Internet Explorer, se sua situação estiver correta (você deseja 0 espaçamento entre células e sua tabela ainda não a define), você pode usá-lo border-collapse:collapse
.
table {
border-spacing: 0;
border-collapse: collapse;
}
Nota: Para obter uma excelente visão geral das propriedades CSS que podem ser aplicadas a tabelas e para quais navegadores, consulte esta fantástica página Quirksmode .
O comportamento padrão do navegador é equivalente a:
table {border-collapse: collapse;}
td {padding: 0px;}
Define a quantidade de espaço entre o conteúdo da célula e a parede celular
table {border-collapse: collapse;}
td {padding: 6px;}
Controla o espaço entre as células da tabela
table {border-spacing: 2px;}
td {padding: 0px;}
table {border-spacing: 2px;}
td {padding: 6px;}
table {border-spacing: 8px 2px;}
td {padding: 6px;}
Nota: Se houver
border-spacing
, indica que aborder-collapse
propriedade da tabela éseparate
.
Aqui você pode encontrar a antiga maneira HTML de conseguir isso.
table
{
border-collapse: collapse; /* 'cellspacing' equivalent */
}
table td, table th
{
padding: 0; /* 'cellpadding' equivalent */
}
cellspacing=0
equivalente. O equivalente para cellspacing=1
é completamente diferente. Veja a resposta aceita.
table td
e table th
apenas deveria ser td
e, th
respectivamente? Funciona de qualquer maneira, mas um seletor menor significa uma correspondência um pouco mais rápida
table > tr > td
e table > tr > th
. Isso é quase tão rápido como tr
e th
, e é garantido para o trabalho se você tiver uma tabela aninhada. Apenas a minha 2c
table
seletor é necessário? IIRC, a <td>
é inválido, a menos que esteja dentro de <tr>
.
Definir margens nas células da tabela realmente não tem nenhum efeito, até onde eu sei. O verdadeiro equivalente CSS para cellspacing
é border-spacing
- mas não funciona no Internet Explorer.
Você pode usar border-collapse: collapse
para definir com segurança o espaçamento das células como 0, como mencionado, mas para qualquer outro valor, acho que a única maneira entre navegadores é continuar usando o cellspacing
atributo.
border-collapse
só funciona no IE 5-7 se a tabela ainda não tiver um cellspacing
atributo definido. Escrevi uma resposta abrangente que mescla todas as partes corretas das outras respostas nesta página, caso isso seja útil.
Esse hack funciona para o Internet Explorer 6 e posterior, Google Chrome , Firefox e Opera :
table {
border-collapse: separate;
border-spacing: 10px; /* cellspacing */
*border-collapse: expression('separate', cellSpacing = '10px');
}
table td, table th {
padding: 10px; /* cellpadding */
}
o *
declaração é para o Internet Explorer 6 e 7 e outros navegadores a ignoram adequadamente.
expression('separate', cellSpacing = '10px')
retorna 'separate'
, mas ambas as instruções são executadas, pois no JavaScript você pode passar mais argumentos do que o esperado e todos eles serão avaliados.
Para aqueles que desejam um valor de espaçamento entre células diferente de zero, o seguinte CSS funcionou para mim, mas só posso testá-lo no Firefox.
Consulte o link Quirksmode publicado em outro lugar para obter detalhes de compatibilidade. Parece que pode não funcionar com versões mais antigas do Internet Explorer.
table {
border-collapse: separate;
border-spacing: 2px;
}
A solução simples para esse problema é:
table
{
border: 1px solid #000000;
border-collapse: collapse;
border-spacing: 0px;
}
table td
{
padding: 8px 8px;
}
Quebra o conteúdo da célula com uma div e você pode fazer o que quiser, mas é necessário quebrar todas as células da coluna para obter um efeito uniforme. Por exemplo, para obter margens esquerda e direita mais amplas:
Então o CSS será,
div.cellwidener {
margin: 0px 15px 0px 15px;
}
td.tight {
padding: 0px;
}
<table border="0">
<tr>
<td class="tight">
<div class="cellwidener">My content</div>
</td>
</tr>
</table>
Sim, é um aborrecimento. Sim, funciona com o Internet Explorer. Na verdade, eu só testei isso com o Internet Explorer, porque é tudo o que podemos usar no trabalho.
Esse estilo é para redefinição completa de tabelas - preenchimento de célula , espaçamento de célula e bordas .
Eu tinha esse estilo no meu arquivo reset.css:
table{
border:0; /* Replace border */
border-spacing: 0px; /* Replace cellspacing */
border-collapse: collapse; /* Patch for Internet Explorer 6 and Internet Explorer 7 */
}
table td{
padding: 0px; /* Replace cellpadding */
}
table th,td {
padding: 8px 2px;
}
table {
border-collapse: separate;
border-spacing: 2px;
}
Basta usar regras de preenchimento CSS com dados da tabela:
td {
padding: 20px;
}
E para espaçamento de borda:
table {
border-spacing: 1px;
border-collapse: collapse;
}
No entanto, ele pode criar problemas na versão mais antiga de navegadores como o Internet Explorer, devido à implementação diferencial do modelo de caixa.
Pelo que entendi das classificações do W3C, é que <table>
s servem para exibir 'apenas' os dados.
Com base nisso, achei muito mais fácil criar um <div>
com os planos de fundo e tudo mais e ter uma tabela com dados flutuando sobre ele usando position: absolute;
ebackground: transparent;
...
Ele funciona no Chrome, Internet Explorer (6 e posterior) e Mozilla Firefox (2 e posterior).
As margens são usados (ou de qualquer maneira significava) para criar um espaçador entre os elementos do recipiente, como <table>
, <div>
e <form>
, não <tr>
, <td>
, <span>
or <input>
. Usá-lo para qualquer coisa que não seja elementos de contêiner manterá você ocupado ajustando seu site para futuras atualizações do navegador.
CSS:
selector{
padding:0 0 10px 0; // Top left bottom right
}
Você pode definir facilmente o preenchimento dentro das células da tabela usando a propriedade CSS padding. É uma maneira válida de produzir o mesmo efeito que o atributo cellpadding da tabela.
table,
th,
td {
border: 1px solid #666;
}
table th,
table td {
padding: 10px;
/* Apply cell padding */
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Set Cellpadding in CSS</title>
</head>
<body>
<table>
<thead>
<tr>
<th>Row</th>
<th>First Name</th>
<th>Last Name</th>
<th>Email</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Clark</td>
<td>Kent</td>
<td>clarkkent@mail.com</td>
</tr>
<tr>
<td>2</td>
<td>Peter</td>
<td>Parker</td>
<td>peterparker@mail.com</td>
</tr>
<tr>
<td>3</td>
<td>John</td>
<td>Rambo</td>
<td>johnrambo@mail.com</td>
</tr>
</tbody>
</table>
</body>
</html>
Da mesma forma, você pode usar a propriedade CSS border-espaçamento para aplicar o espaçamento entre as bordas adjacentes das células da tabela, como o atributo cellpacing. No entanto, para trabalhar com espaçamento entre bordas, o valor da propriedade colapsar entre bordas deve ser separado, o que é o padrão.
table {
border-collapse: separate;
border-spacing: 10px;
/* Apply cell spacing */
}
table,
th,
td {
border: 1px solid #666;
}
table th,
table td {
padding: 5px;
/* Apply cell padding */
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Set Cellspacing in CSS</title>
</head>
<body>
<table>
<thead>
<tr>
<th>Row</th>
<th>First Name</th>
<th>Last Name</th>
<th>Email</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Clark</td>
<td>Kent</td>
<td>clarkkent@mail.com</td>
</tr>
<tr>
<td>2</td>
<td>Peter</td>
<td>Parker</td>
<td>peterparker@mail.com</td>
</tr>
<tr>
<td>3</td>
<td>John</td>
<td>Rambo</td>
<td>johnrambo@mail.com</td>
</tr>
</tbody>
</table>
</body>
</html>
Tente o seguinte:
table {
border-collapse: separate;
border-spacing: 10px;
}
table td, table th {
padding: 10px;
}
Ou tente o seguinte:
table {
border-collapse: collapse;
}
table td, table th {
padding: 10px;
}
Eu usei !important
após o colapso da fronteira como
border-collapse: collapse !important;
e funciona para mim no IE7. Parece substituir o atributo cellpacing.
!important
seria necessário apenas para substituir outras configurações de CSS em uma situação complexa (e mesmo assim principalmente na abordagem errada).
!important
, que poderia ter sido incluída como um comentário em vez de outra resposta.
<table>
<tr>
<th>Col 1</th>
<th>Col 2</th>
<th>Col 3</th>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
</table>
cell-padding
pode ser fornecido padding
em CSS enquanto cell-spacing
pode ser definido pela configuração border-spacing
de tabela.
table {
border-spacing: 10px;
}
td {
padding: 10px;
}
Violino .
td {
padding: npx; /* For cellpadding */
margin: npx; /* For cellspacing */
border-collapse: collapse; /* For showing borders in a better shape. */
}
Se margin
não funcionar, tente conjunto display
de tr
para block
e, em seguida, a margem vai funcionar.
Para tabelas, espaçamento e preenchimento de célula são obsoletos no HTML 5.
Agora, para espaçamento entre células, é necessário usar espaçamento entre bordas. E para o cellpadding você precisa usar o colapso de borda.
E não use isso no seu código HTML5. Sempre tente usar esses valores em um arquivo CSS 3.
table {
border-spacing: 4px;
color: #000;
background: #ccc;
}
td {
padding-left: 4px;
}
Em uma tabela HTML, o cellpadding
ecellspacing
pode ser definido assim:
Para preenchimento de células :
Basta ligar para o td/th
celular simples padding
.
Exemplo:
table {
border-collapse: collapse;
}
td {
border: 1px solid red;
padding: 10px;
}
Para espaçamento de células
Basta ligar para simples table
border-spacing
Exemplo:
/********* Cell-Spacing ********/
table {
border-spacing: 10px;
border-collapse: separate;
}
td {
border: 1px solid red;
}
Mais estilo de tabela por link de origem CSS aqui você obtém mais estilo de tabela por CSS .
Você pode simplesmente fazer algo assim no seu CSS, usando border-spacing
e padding
:
table {
border-collapse: collapse;
}
td, th {
padding: 1em;
border: 1px solid blue;
}
<table>
<tr>
<th>head_1</th>
<th>head_2</th>
<th>head_3</th>
<th>head_4</th>
</tr>
<tr>
<td>txt_1</td>
<td>txt_2</td>
<td>txt_3</td>
<td>txt_4</td>
</tr>
</table>
Que tal adicionar o estilo diretamente à própria tabela? Isso é em vez de usar table
no seu CSS, que é uma abordagem MAU se você tiver várias tabelas na sua página:
<table style="border-collapse: separate;border-spacing: 2px;">
<tr>
<td style="padding: 4px 4px;">Some Text</td>
</tr>
</table>
td { padding: ... }
ou table { border-spacing: ... }
, em vez de aplicá-la diretamente na tabela. Isso não acrescenta nada. Como eu disse, quando você tem várias tabelas na sua página e não deseja afetá-las, não deseja! Não precisamos de uma página inteira de respostas dizendo "Use a folha de estilo!", Quando talvez essa seja a última coisa que você deseja, porque deseja formatar apenas uma célula ou tabela. É quando aplicá-lo table
ou td
é indesejável e criar uma nova classe, pois é um exagero.
table#someId
).
Eu sugiro isso e todas as células da tabela específica são afetadas.
table.tbl_classname td, th {
padding: 5px 5px 5px 4px ;
}
Você pode verificar o código abaixo, basta criar um index.html
e executá-lo.
<!DOCTYPE html>
<html>
<head>
<style>
table{
border-spacing:10px;
}
td{
padding:10px;
}
</style>
</head>
<body>
<table cellspacing="0" cellpadding="0">
<th>Col 1</th>
<th>Col 2</th>
<th>Col 3</th>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
</table>
</body>
</html>
RESULTADO :
width:auto
,border-collapse
pode não funcionar como esperado.