HOME PAGE JAVASCRIPT
Botões Cálculos Datas Essenciais Janelas Flutuantes Menus
HTML CSS FLASH PHP ASP GERADORES CORES MISCELANEA Contato  






HTML - Tabelas - Dimensionamento

Os parâmetros WIDTH e HEIGHT, largura e a altura de uma tabela, determinam as dimensões da tabela na página. Esses parâmetros permitem controlar o espaço que a tabela ocupará na página. Na maioria das vezes, você não precisa definir uma altura porque o conteúdo da tabela fará com que ela tenha a altura necessária.
Os valores de width e height podem ser expressos em "pixels" ou em percentual.

Quando a largura da tabela for especificada em pixels e a janela do navegador for redimensionada para um tamanho menor que a largura da tabela, uma parte da tabela ficará oculta e uma barra de rolagem horizontal surgirá na parte inferior a fim de que as pessoas possam rolar e visualizar o restante da tabela.

Quando a largura da tabela for especificada em percentagem a tabela aumenta ou diminui para caber na janela do navegador, independentemente da resolução da tela ou dimensão da janela.

Sintaxe: <table width="X" height="Y">
onde X e Y assumem valores em pixels ou porcentagem.

Exemplos: em pixels
<table border="1" width ="400"><tr><td>kithomepage</td></tr>
Resultado:

Kithomepage

Exemplo: com percentagem
<table border="1" width ="60%"><tr><td>kithomepage</td></tr>
Resultado:

Kithomepage

Quando não se especifica a altura e largura da tabela, ela é dimensionada conforme o conteúdo, isto é, a altura e largura se expandem automaticamente para que todo o conteúdo caiba dentro dela.

Exemplo: mesma estrutura do exemplo acima, porém sem especificar as dimensões.
<table border="1"><tr><td>kithomepage</td></tr>
Resultado:

Kithomepage


Observações:
- Todas as células de uma mesma coluna  apresentam a mesma largura e todas as células de uma mesma linha apresentam a mesma altura. Se forem especificadas com valores diferentes o navegador se baseia na de maior valor.
Exemplo:
<table border="1">
<tr><td width="200">linha 1 coluna1</td><td>coluna2</td><td>coluna3</td></tr>
<tr><td width="600">linha 2 coluna1</td><td>coluna2</td><td>coluna3</td></tr>
<tr><td width="300">linha 3 coluna1</td><td>coluna2</td><td>coluna3</td></tr>
</table>
Resultado: as células da coluna 1 foram todas dimensionadas com a de maior valor de largura  (600 pixels)

linha 1 coluna1coluna2coluna3
linha 2 coluna1coluna2coluna3
linha 3 coluna1coluna2coluna3
 

- o parâmetro WIDTH dentro da tag Table tem preferência, desde que o conteúdo de uma linha não ultrapasse esse valor.
Exemplo:
<table width="200" border="1">
<tr><td width="400">coluna1</td><td>coluna2</td><td>coluna3</td></tr>
<tr><td width="600">coluna1</td><td>coluna2</td><td>coluna3</td></tr>
<tr><td width="800">coluna1</td><td>coluna2</td><td>coluna3</td></tr>
</table>
Resultado:

coluna1coluna2coluna3
coluna1coluna2coluna3
coluna1coluna2coluna3

 - quando o conteúdo ultrapassa a dimensão definida para a tabela, pode ocorrer uma das hipóteses a seguir:
a) se o conteúdo puder ser quebrado o navegador expande a altura
<table width="200" border="1">
<tr><td>linha 1 coluna1</td><td>linha 1 coluna2</td><td>linha 1 coluna3</td></tr>
<tr><td>coluna1</td><td>coluna2</td><td>coluna3</td></tr>
<tr><td>coluna1</td><td>coluna2</td><td>coluna3</td></tr>
</table>
Resultado:

linha 1 coluna1linha 1 coluna2linha 1 coluna3
coluna1coluna2coluna3
coluna1coluna2coluna3

b) se o conteúdo não puder ser quebrado o navegador expande a largura
<table border="1" width="200">
<tr><td ><img border="0" src="/kit/tutorial/html/images/kithomepage.gif"></td>
<td>coluna2</td><td>coluna3</td></tr>
<tr><td >coluna1</td><td>coluna2</td><td>coluna3</td></tr>
<tr><td >coluna1</td><td>coluna2</td><td>coluna3</td></tr>
</table>
Resultado:

coluna2coluna3
coluna1coluna2coluna3
coluna1coluna2coluna3

 As dimensões não devem ser contraditórias, conforme exemplos acima, pois a visualização do layout dependerá do navegador utilizado e poderá ser diverso do que se esperava.
Se você especificar uma largura para a tabela e desejar que a tabela mantenha uma consistência independentemente do navegador utilizado, a soma das larguras das colunas deverá ser igual a largura da tabela .
Para não incorrer em erros de visualização, quando se especificam a altura e largura de uma célula é uma boa prática observar se o conteúdo de cada célula não excede o espaço disponível.

Gif Espaçadora Transparente.
Para manter a largura de uma coluna com tamanho fixo utilize uma gif espaçadora. Uma gif espaçadora é uma imagem transparente que permite manter uma coluna com tamanho fixo porque diferentemente de um texto ela não pode variar de um computador a outro e não permite quebra de linha ao redimensionar a janela do navegador. Click aqui para ver um exemplo.

Para obter uma gif transparente (1x1 pixel) click com o direito do mouse no link a seguir gif_transparent, e no menu de contexto apresentado Clique com o direito do mouse e selecione Salvar como.... Você poderá dimensioná-la inserindo os parâmetros WIDTH e HEIGHT com os valores desejados na tag de imagem IMG. Caso você queira ter uma idéia do tamanho alcançado após configurar os parâmetros WIDTH e HEIGHT insira uma borda na tag de imagem IMG.

Na tela, cada elemento é constituído por um determinado número de pontos.
Cada ponto é denominado de "PIXEL" e o nome deriva dos termos em inglês PICture e ELement e é definido como unidade de medida usada pelo monitor para exibir imagens na tela.

A Resolução gráfica da tela determina a quantidade de informações que são apresentadas na tela do vídeo.

A resolução gráfica de uma tela é indicada pela largura e altura da tela do monitor, medidas em pixels.

A resolução empregada determina a quantidade de pixels que o computador deverá gerenciar para poder apresentar os elementos na tela.

Quando se é empregada a resolução de 800x600 o número total de pixels é de 480000, o que daria, por exemplo, comportar 4 imagens de 120000 pixels (400x300), ao passo que para uma resolução de 1024x768 é possível visualizar mais de 4 imagens (aproximadamente 6,5 imagens de 400x300), sendo porém, que nesta última os itens se apresentam menores.

Em suma:
1 - Uma resolução alta exibe uma área maior e consequentemente maior é o número de informações visíveis, embora os itens se apresentam menores.

2 - Quanto maior a resolução melhor a definição.

Imagine uma foto de 1024x768 pixels exibida numa área equivalente ao tamanho de um retrato de uma carteira de identidade. O resultado será uma imagem rica em detalhes e de alta definição.
Imagine a mesma imagem exibida em um outdoor, o tamanho dos pixels imediatamente aumentarão de área para preencher uma área muito maior. O resultado é um amontoado de blocos sem imagem definida.

Conclusão: um número maior de pixels significa detalhes mais precisos e as vantagens são mais conteúdo na tela e a possibilidade de obter mais detalhes.