Como eliminar estes espaços em branco de uma tabela HTMl?

[Lucas Marini Falbo 0]

E ai pessoal!

 

Bom, eu estou desenvolvendo um site e estou com dificuldades para desenvolver uma tabela. Eu até to conseguindo me virar, mas não sou muito experiente com tabelas HTML e esses espaços brancos idiotas estão me causando uma puta dor de cabeça.

 

Página: [http://www.editorpanda.com/p/planos.html]

 

Como vocês podem ver, as células com os nomes dos planos e preço possuem espaços, mas as com as quantitades não. O que eu posso fazer? Já tentei de tudo.

 

Código HTML:

 

 

<div align="center">

<table cellspacing="0" cellpading="0">

<tbody id="0">

<tr>

<td class="tabela-vazia" height="80px;" width="150px"></td>

<td class="tabela-basico" height="80px;" width="150px"><b>Básico 1</b></td>

<td class="tabela-basico" height="80px;" width="150px"><b>Básico 2</b></td>

<td class="tabela-profissional" height="80px;" width="150px"><b>Profissional 1</b></td>

<td class="tabela-profissional" height="80px;" width="150px"><b>Profissional 2</b></td>

<td class="tabela-ultra" height="80px;" width="150px"><b>Profissional 3</b></td>

</tr>

</tbody>

<tbody id="5">

<tr>

<td class="tabela-vazia" height="50px;" width="150px"><b>Assine</b></td>

<td class="tabela-preçoA" height="70px;" width="150px"><b>R$40</b></td>

<td class="tabela-preçoA" height="70px;" width="150px"><b>R$80,00</b></td>

<td class="tabela-preçoB" height="70px;" width="150px"><b>R$160,00</b></td>

<td class="tabela-preçoB" height="70px;" width="150px"><b>R$800,00</b></td>

<td class="tabela-preçoC" height="70px;" width="150px"><b>R$1.600</b></td>

</tr>

</tbody>

<tbody id="1">

<tr>

<td class="tabela-serviço" height="25px;" width="150px"><b>Conteúdo básico</b></td>

<td class="tabela-quantidade-A" height="25px;" width="150px"><b>4 conteúdos mensais</b></td>

<td class="tabela-quantidade-A" height="25px;" width="150px"><b>--</b></td>

<td class="tabela-quantidade-B" height="25px;" width="150px"><b>--</b></td>

<td class="tabela-quantidade-B" height="25px;" width="150px"><b>40 conteúdos mensais</b></td>

<td class="tabela-quantidade-C" height="25px;" width="150px"><b>60 conteúdos mensais</b></td>

</tr>

</tbody>

<tbody id="2">

<tr>

<td class="tabela-serviço" height="25px;" width="150px"><b>Conteúdo avançado</b></td>

<td class="tabela-quantidade-bas1" height="25px;" width="150px"><b>--</b></td>

<td class="tabela-quantidade-bas" height="25px;" width="150px"><b>4 conteúdos mensais</b></td>

<td class="tabela-quantidade-pro" height="25px;" width="150px"><b>8 conteúdos mensais</b></td>

<td class="tabela-quantidade-pro" height="25px;" width="150px"><b>20 conteúdos mensais</b></td>

<td class="tabela-quantidade-ultra" height="25px;" width="150px"><b>40 conteúdos mensais</b></td>

</tr>

</tbody>

<tbody id="2">

<tr>

<td class="tabela-serviço" height="25px;" width="150px"><b>Idealizador</b></td>

<td class="tabela-indisponivel1" height="25px;" width="150px"><b>--</b></td>

<td class="tabela-indisponivel" height="25px;" width="150px"><b>Não incluido</b></td>

<td class="tabela-indisponivel" height="25px;" width="150px"><b>Não incluido</b></td>

<td class="tabela-indisponivel" height="25px;" width="150px"><b>Não incluido</b></td>

<td class="tabela-disponivel" height="25px;" width="150px"><b>Incluido</b></td>

</tr>

</tbody>

</table>

</div>

 

Código CSS:

 

 

 

 

.tabela-assine{

border-top: 1px dashed #666;

border-right: 1px dashed #666;

color: #000;

text-align: center;

font-family: 'PT Sans', sans-serif;

font-height: bold;

font-size: 18px;

border-collapse: collapse;

margin: 0;

}

.tabela-vazia{border-collapse: collapse;border-collapse: collapse;

margin: 0;

}

.tabela-quantidade-A{

background-color: #039BCC;

text-align: center;

color: #FFF;

text-shadow: 1px 1px 2px #000;

border-collapse: collapse;

border-collapse: collapse;

border-collapse: collapse;

margin: 0;

}

.tabela-quantidade-B{

background-color: #FE9900;

text-align: center;

color: #FFF;

text-shadow: 1px 1px 2px #000;

border-collapse: collapse;

border-collapse: collapse;

border-collapse: collapse;

margin: 0;

}

.tabela-quantidade-C{

background-color: #990003;

text-align: center;

color: #FFF;

text-shadow: 1px 1px 2px #000;

border-collapse: collapse;

border-collapse: collapse;

border-collapse: collapse;

margin: 0;

}

.tabela-espaço{

border-top: 1px dashed #CCC;

background: #FFF;

border-collapse: collapse;

border-collapse: collapse;

margin: 0;

}

.tabela-preçoA{

background: url(http://3.bp.blogspot.com/-N7ZnS0rlUc8/UUASrCBAFcI/AAAAAAAACSw/JpNiJVme0FI/s1600/Pre%C3%A7o+b%C3%A1sico.jpg) no-repeat;

color: #FFF;

text-shadow: 1px 1px 2px #000;

text-align: center;

font-size: 22px;

font-family: 'PT Sans', sans-serif;

font-height: bold;

border-collapse: collapse;

border-collapse: collapse;

margin: 0;

}

.tabela-preçoB{

background: url(http://2.bp.blogspot.com/-EJ7HXrV6So0/UUAScergVkI/AAAAAAAACSo/rD7rOCvnwC4/s1600/Pre%C3%A7o+profissional+1-2.jpg) no-repeat;

color: #FFF;

text-shadow: 1px 1px 2px #000;

text-align: center;

font-size: 22px;

font-family: 'PT Sans', sans-serif;

font-height: bold;

border-collapse: collapse;

border-collapse: collapse;

margin: 0;

}

.tabela-preçoC{

background: url(http://3.bp.blogspot.com/-TfukanZvdWo/UUASGGwudpI/AAAAAAAACSY/WjjG6ipxutc/s1600/Pre%C3%A7o+profissional+3.jpg) no-repeat;

color: #FFF;

text-shadow: 1px 1px 2px #000;

text-align: center;

font-size: 22px;

font-family: 'PT Sans', sans-serif;

font-height: bold;

border-collapse: collapse;

border-collapse: collapse;

margin: 0;

}

.tabela-serviço{

color: #000;

text-align: right;

font-family: 'PT Sans', sans-serif;

font-height: bold;

border-collapse: collapse;

border-collapse: collapse;

margin: 0;

}

.tabela-basico{

background: url(http://1.bp.blogspot.com/-O2StxcbiIOk/UT-eGnfcweI/AAAAAAAACRU/hWQ5V0scGiA/s1600/BG+b%C3%A1sico.jpg) no-repeat;

color: #FFF;

text-shadow: 1px 1px 2px #000;

text-align: center;

font-family: 'PT Sans', sans-serif;

font-height: bold;

font-size: 20px;

border-collapse: collapse;

border-collapse: collapse;

margin: 0;

}

.tabela-profissional{

background: url(http://2.bp.blogspot.com/-Q6Ec9CjZOS8/UT-eGoxgvwI/AAAAAAAACRQ/AIyT8PKcmi4/s1600/BG+profissional+1-2.jpg) no-repeat;

color: #FFF;

text-shadow: 1px 1px 2px #000;

text-align: center;

font-family: 'PT Sans', sans-serif;

font-height: bold;

font-size: 20px;

border-collapse: collapse;

border-collapse: collapse;

margin: 0;

}

.tabela-ultra{

background: url(http://4.bp.blogspot.com/-2BFlkxtGnKI/UT-f2lIUFtI/AAAAAAAACRo/rMTMtcEM2Po/s1600/BG+profissional+3.jpg) no-repeat;

color: #FFF;

text-shadow: 1px 1px 2px #000;

text-align: center;

font-family: 'PT Sans', sans-serif;

font-height: bold;

font-size: 20px;

border-collapse: collapse;

border-collapse: collapse;

margin: 0;

}

.tabela-disponivel{

background-color: #ccc;

text-align: center;

color: #006600;

border-top: 1px dashed #CCC;

border-bottom: 1px dashed #CCC;

border-collapse: collapse;

margin: 0;

}

.tabela-indisponivel{

background-color: #ccc;

text-align: center;

color: #990000;

border-top: 1px dashed #CCC;

border-bottom: 1px dashed #CCC;

border-collapse: collapse;

}

.tabela-disponivel1{

background-color: #ccc;

text-align: center;

color: #006600;

border-top: 1px dashed #CCC;

border-left: 1px dashed #CCC;

border-bottom: 1px dashed #CCC;

border-collapse: collapse;

margin: 0;

}

.tabela-indisponivel1{

background-color: #ccc;

text-align: center;

color: #990000;

border-top: 1px dashed #CCC;

border-left: 1px dashed #CCC;

border-bottom: 1px dashed #CCC;

border-collapse: collapse;

margin: 0;

}

 

 

Obrigado desde já.

Desculpem o link está errado, aqui o link correto da página: http://www.editorpanda.com/p/planos.html

[Gerciley 14]

Bom não entendo porque ta usando tabela pra isso mas de qualquer forma insira esse bloco no css que vai funcionar:

table tr td{
                margin: 0px;
                padding: 0px;
                border: none;
                display: block;
                float: left;
            }