Tamanho (width), espaçamento (cellspacing e cellpadding) e alinhamento (align) em tabelas de um site

Dando continuidade a nossa seção sobre tabelas em nosso curso de HTML online e gratuito, vamos ensinar neste artigo como definir algumas características das tabelas, como seu tamanho, espaçamento de células e outros detalhes que nos ajudarão a manter nossas tabelas bem organizadas.
Obtenha seu certificado de HTML para entrar no Mercado de Trabalho

Tamanho de uma tabela

Se olhamos as tabelas que usamos como exemplos em nossos tutoriais de HTML, como o artigo passado quando falamos sobre como expandir as células de uma tabela, notaremos uma coisa: todas nossas tabelas tinham tamanhos fixos.

Esses tamanhos eram definidos pelo seu navegador, que escolhia uma espécia de tamanho padrão.
O que vamos aprender aqui é definir e manipular o tamanho das tabelas da maneira que mais nos convier, pois, afinal, nós que devemos definir o layout e organização de nossos sites.

Algumas tabelas que criamos ficaram pequenas, como a seguinte, apresentada no tutorial de HTML passado (note como há duas linhas de texto na primeira coluna):

Linguagens de programação
Tipos de linguagem
by HTML Progressivo
Linguagens para
desenvolvimento Web
HTML
JavaScript
PHP
Linguagens
para desenvolvimento Desktop
C
C++
Java


Ficou pequena, um pouco fina, já que algumas células continham várias linhas de texto.
Com certeza ela ficaria mais legível se fosse da seguinte maneira (fixamos a largura da tabela em 330 pixels):

Linguagens de programação
Tipos de linguagem
by HTML Progressivo
Linguagens para desenvolvimento Web HTML
JavaScript
PHP
Linguagens para desenvolvimento Desktop C
C++
Java


O seu navegador, ao interpretar o código HTML que você escreveu, vai automaticamente tentar definir um tamanho padrão de tabela, é como se ele tentasse 'adivinhar' que tamanho seria o melhor.
Obviamente nem sempre ele vai acertar, pois não tem como saber aquilo que você, webmaster, realmente deseja.

Por isso é importante que saibamos definir o tamanho de nossas tabelas, fazê-las se comportar, alinhar e as espaçar da maneira que quisermos, como vamos ensinar neste tutorial de nosso curso de HTML.

Tamanho de uma tabela em pixels

Vamos ensinar como definir a largura de uma tabela em unidades de medidas de pixels (px).
Para isso, faremos uso do atributo width, que é largura em inglês.

Este atributo será definido no momento que formos abrir a tag table. Ou seja, para definirmos uma tabela com 100 pixels de largura, fazemos:

<table width="100px" border="1">
   <caption>Tamanho da tabela: 100px</caption>
   <td>Primeira coluna</td> <td>Segunda coluna</td>
</table>

Lembre-se: colocamos o atributo border para aparecer as bordas da tabela.
O resultado é o seguinte:

Tamanho da tabela: 100px
Primeira coluna Segunda coluna

Como viram, ficou curta. Vamos alargar, aumentar os pixels de 100 para 250:

Tamanho da tabela: 250px
Primeira coluna Segunda coluna

Ficou bem melhor, não ? :)

Tamanho de uma tabela em porcentagem

Se você estiver atento nas aulas de nosso curso de HTML, verá que várias técnicas e efeitos usados em algumas tags e atributos, podem ser igualmente usadas em outras tags e atributos.

Por exemplo, quando aprendemos sobre como usar imagens em sites, definimos o tamanho da imagem usando pixels e porcentagem da tela do browser.
E é exatamente o que vamos fazer aqui, para definir o tamanho de uma tabela.

Assim, se quisermos que nossa tabela ocupe 10% da largura visível de seu navegador de sites, faça:

<table width="10%" border="1">
   <caption>Tamanho da tabela: 10%</caption>
   <td>Primeira coluna</td> <td>Segunda coluna</td>
</table>

O efeito é:

Tamanho da tabela: 10%
Primeira coluna Segunda coluna

Agora, vamos fazer com que ocupe 35%, o efeito será:

Tamanho da tabela: 35%
Primeira coluna Segunda coluna

Experimente maximizar e alterar o tamanho da janela do browser.
Vai ver que seu navegador vai mudar, automaticamente, o tamanho das tabelas de seus sites para 10% ou 35% da parte visível do browser.

Interessante, não?



Atributo cellspacing - Espaçamento entre as células

Agora, volte em todos os exemplos que demos de tabelas em nosso sites e veja o espaço entre as células.
Veja que cada célula tem sua borda: uma linha acima, abaixo e nas laterais.
Elas estão dentro de uma espécie de célula maior, que são as bordas da tabela.

A distância entre essas bordas, ou seja, a distância entre essas células, é sempre a mesma.
Porém, somos webmasters! Estudamos e criamos sites em HTML, então podemos fazer o que quisermos, e do jeito que quisermos.

Se queremos mudar esse espaçamento, é claro que poderemos.
Vamos fazer isso através do atributo cellspacing, da tag table.
Este atributo recebe um valor, que é o número de pixels de espaçamento entre as células de sua tabela, onde o tamanho desse espaço vale metade, em cada lado da célula.

Por exemplo, se você fizer: cellspacing = 2
Vai existir um espaço de 1px de um lado da célula, e 1px do outro.

Vamos criar uma tabela simples, com duas linhas e duas colunas, que mostra o conteúdo de nossa apostila:

Curso HTML Progressivo
Curso de HTML Curso de CSS
Curso de HTML 5 Curso de Webmaster

O código dessa tabela é:
<table width="40%" border="1">
   <caption>Curso HTML Progressivo</caption>
   <tr>
      <td>Curso de HTML</td> <td>Curso de CSS</td>
   </tr>
   <tr>
      <td>Curso de HTML 5</td> <td>Curso de Webmaster</td>
   </tr>
</table>


O espaçamento é o padrão do HTML.
Vamos substituir a linha: <table width="40%" border="1">
Por:                              <table width="40%" border="1" cellspacing="10">

Ou seja, vamos colocar 10px de espaçamento entre as células.
Assim, teremos 5px de cada lado das células.
O resultado é:

Curso HTML Progressivo
Curso de HTML Curso de CSS
Curso de HTML 5 Curso de Webmaster


Atributo cellpadding - Espaçamento interno das células

Veja a última tabela, a que está logo acima deste título.
É possível ver o espaçamento entre as células, ou seja, a distância de uma célula para outra e a distância entre as células e a borda da tabela.

Porém, ainda existe uma borda em cada célula.
Aliás, borda esta bem próxima do texto, não acha?
É uma borda que forma uma 'caixa' bem apertada. Seria interessante dar uma espaçada ali.

E para isso que serve o atributo cellpadding (padding é uma espécie de acolchoamento, dar uma espaçada, uma folga), com ele vamos definir esse espaço interno, dentro de cada célula.

Vamos pegar o exemplo da tabela passada, quando falamos do atributo cellspacing.
Trocando a lina: <table width="40%" border="1" cellspacing="10">
Por:                   <table width="40%" border="1" cellspacing="10" cellpadding="4">

Faremos com que o espaçamento interno das células (distância até as bordas) aumente em 2 pixel de cada lado, pois estamos aumentando o espaçamento em 4 pixels (cellpadding="4").

O resultado é:

Curso HTML Progressivo
Curso de HTML Curso de CSS
Curso de HTML 5 Curso de Webmaster


Atributo align - Alinhando elementos das células de uma tabela

Agora que já sabemos como definir o tamanho de uma tabela em nosso site, bem como o espaçamento entre as células e o tamanho do espaçamento interno de cada célula, vamos aprender mais uma coisa que nos fará ter total domínio sobre a organização: alinhar elementos dentro da célula.

Podemos usar o atributo align em diversos trechos de nossas tabela, como na tag table ou mesmo dentro das células.
Por exemplo, se fizermos:
<table align="right">

Nossa tabela ficará alinha na direita da tela do navegador.
Os valores que o atributo align pode receber são: center, left, right, justify  ou char, dependendo de como você queira alinhar sua tabela ou seus elementos.

Por exemplo, se quisermos fazer com que a tabela que estamos trabalhando possua os textos dentro da célula alinhado ao centro da própria célula, usamos o código HTML:

<table width="40%" border="1" cellspacing="10" cellpadding="4">
   <caption>Curso HTML Progressivo</caption>
   <tr align="center">
      <td>Curso de HTML</td> <td>Curso de CSS</td>
   </tr>
   <tr align="center">
      <td>Curso de HTML 5</td> <td>Curso de Webmaster</td>
   </tr>
</table>


E o resultado será:

Curso HTML Progressivo
Curso de HTML Curso de CSS
Curso de HTML 5 Curso de Webmaster

Fala a verdade, nossas tabelas estão cada vez mais linda, organizadas e profissionais, não estão?

Nenhum comentário: