html - w3schools - tr padding




Definir cellpadding e cellpacing em CSS? (18)

Padrão

O comportamento padrão do navegador é equivalente a:

table {border-collapse: collapse;}
td    {padding: 0px;}

Cellpadding

Define a quantidade de espaço entre o conteúdo da célula e a parede celular

table {border-collapse: collapse;}
td    {padding: 6px;}

Células

Controla o espaço entre as células da tabela

table {border-spacing: 2px;}
td    {padding: 0px;}

Ambos

table {border-spacing: 2px;}
td    {padding: 6px;}

Ambos (especial)

table {border-spacing: 8px 2px;}
td    {padding: 6px;}

Nota: Se houver border-spacing conjunto de border-spacing , ele indicará que border-collapse propriedade border-collapse da tabela será separate .

Tente você mesmo!

Here você pode encontrar o antigo jeito html de conseguir isso.

Em uma tabela HTML, o cellpadding e o cellspacing podem ser definidos assim:

<table cellspacing="1" cellpadding="1">

Como o mesmo pode ser feito usando CSS?


A solução simples para este problema é:

table
{
    border: 1px solid #000000;
    border-collapse: collapse;
    border-spacing: 0px;
}
table td
{
    padding: 8px 8px;
}

Apenas usando o border-collapse: collapse para a sua tabela e padding para th ou td


CSS:

selector{
    padding:0 0 10px 0; // Top left bottom right 
}

Em uma tabela HTML, o cellpadding e o cellspacing podem ser definidos assim:

Para preenchimento de células : basta chamar o padding células simples td/th

EX:

/******Call-Padding**********/

table { 
    border-collapse: collapse;
}

td { 
  border: 1px solid red;
  padding: 10px;
}
<table>
		<tr>
			<th>Head1 </th>
			<th>Head2 </th>
			<th>Head3 </th>
			<th>Head4 </th>
		</tr>
		<tr>
			<td>11</td>
			<td>12</td>
			<td>13</td>
			<td>14</td>
		</tr>
		<tr>
			<td>21</td>
			<td>22</td>
			<td>23</td>
			<td>24</td>
		</tr>
		<tr> 
			<td>31</td>
			<td>32</td>
			<td>33</td>
			<td>34</td>
		</tr>
		<tr>
			<td>41</td>
			<td>42</td>
			<td>43</td>
			<td>44</td>
		</tr>
	</table>

table { 
    border-collapse: collapse;
}

td { 
  border: 1px solid red;
  padding: 10px;
}

Para espaçamento de células

Basta chamar o border-spacing simples da border-spacing table

EX:

/********* Cell-Spacing   ********/
table { 
    border-spacing: 10px;
    border-collapse: separate;
}

td { 
  border: 1px solid red;
}
<table>
		<tr>
			<th>Head1</th>
			<th>Head2</th>
			<th>Head3</th>
			<th>Head4</th>
		</tr>
		<tr>
			<td>11</td>
			<td>12</td>
			<td>13</td>
			<td>14</td>
		</tr>
		<tr>
			<td>21</td>
			<td>22</td>
			<td>23</td>
			<td>24</td>
		</tr>
		<tr> 
			<td>31</td>
			<td>32</td>
			<td>33</td>
			<td>34</td>
		</tr>
		<tr>
			<td>41</td>
			<td>42</td>
			<td>43</td>
			<td>44</td>
		</tr>
	</table>

/********* Cell-Spacing   ********/
table { 
    border-spacing: 10px;
    border-collapse: separate;
}

td { 
  border: 1px solid red;
}

Mais estilo de tabela por link fonte CSS aqui você obter mais estilo de tabela por css


Enrole o conteúdo da célula com um div e você pode fazer o que quiser, mas precisa envolver cada célula de uma coluna para obter um efeito uniforme. Por exemplo, para obter margens esquerda e direita mais largas:

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 IE. Na verdade, eu só testei isso com o IE, porque é tudo o que podemos usar no trabalho.


Este truque 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 */
}

A declaração * é para o Internet Explorer 6 e 7, e outros navegadores a ignoram corretamente.

expression('separate', cellSpacing = '10px') retorna 'separate' , mas ambas as instruções são executadas, como no JavaScript você pode passar mais argumentos do que o esperado e todos eles serão avaliados.


Eu usei !important depois do colapso fronteiriço

border-collapse: collapse !important;

e funciona para mim no IE7. Parece substituir o atributo cellpacing.


Para table cellpacing e cellpadding são obsoletos em HTML 5. Agora para cellpacing você tem que usar o espaçamento de borda E para cellpadding você tem que usar o border-collapse.

E certifique-se de não usar isso em seu código HTML5. Sempre tente usar esses valores no arquivo CSS-3.


Pelo que eu entendo das classificações do W3C é que <table> s é destinado a exibir dados 'apenas'.

Com base nisso, achei muito mais fácil criar um <div> com os planos de fundo e tudo isso e ter uma tabela com dados flutuando sobre ele usando position: absolute; e background: transparent; ...

Ele funciona no Chrome, IE (6 e posterior) e Mozilla (2 e posterior).

Margens são usadas (ou significadas de qualquer maneira) para criar um espaçador entre elementos de container, como <table> , <div> e <form> , não <tr> , <td> , <span> ou <input> . Usá-lo para algo diferente de elementos de contêiner irá mantê-lo ocupado ajustando seu site para futuras atualizações do navegador.


TBH Para todos os fannying ao redor com CSS você pode muito bem usar apenas cellpadding="0" cellspacing="0" pois eles não são obsoletos ...

Qualquer outra pessoa sugerindo margens no <td> obviamente não tentou isso.


Tente isto:

table {
    border-collapse: separate;
    border-spacing: 10px;
}
table td, table th {
    padding: 10px;
}

Ou tente isto:

table {
    border-collapse: collapse;
}
table td, table th {
    padding: 10px;
}

Você pode simplesmente fazer algo assim em 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>


Basta usar as regras de preenchimento de CSS com os dados da tabela:

td { 
    padding: 20px;
}

E para espaçamento de borda:

table { 
    border-spacing: 1px;
    border-collapse: collapse;
}

No entanto, pode criar problemas em versões mais antigas de navegadores, como o Internet Explorer, devido à implementação de diferenças do modelo de caixa.


table
{
    border-collapse: collapse; /* 'cellspacing' equivalent */
}

table td, table th
{
    padding: 0; /* 'cellpadding' equivalent */
}

<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 -se o CSS, enquanto cell-spacing pode ser definido pela configuração border-spacing para a tabela.

table {
    border-spacing: 10px;
}
td {
    padding: 10px;
}

Fiddle .


table{border-spacing:4px; color: #000; background:#ccc; }
td{padding-left:4px;}

td {
    padding: npx; //for cellpadding
    margin: npx; //for cellspacing
    border-collapse: collapse; //for showing borders in a better shape.
}

Se a margin não funcionar, tente definir a display de tr para block e, em seguida, a margem funcionará.





alignment