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):
| 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):
| 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
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:
| Primeira coluna | Segunda coluna |
Como viram, ficou curta. Vamos alargar, aumentar os pixels de 100 para 250:
| 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 é:
| Primeira coluna | Segunda coluna |
Agora, vamos fazer com que ocupe 35%, o efeito será:
| 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 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 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 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 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?
2 comentários:
Boa tarde administradores do site!
Faz um tempo que preciso consultar de vez em quando o site html progressivo. Não seria nenhum exagero se eu dizer anos. Por se tratar de um site antigo, não sei se os administradores ainda leêm comentários. Digo que carece na internet uma ferramenta que possa expressar a gratidão de um usuário. Não é força de expressão! Eu realmente acho que a tradicional caixa de comentários e likes de facebook não indicam o suficiente determinado site. Tenho planos de desenvolver uma ferramenta de indicação de sites baseadas em modelo de gratidão. Se tiverem interesse no projeto, mandei um email para paulosergioduffpro@gmail.com
Foi muito útil, obrigado 🙂
Postar um comentário