Livre HTML Tutorial






english Espanol Francais 中文 Deutsch 日本 nederlands
   
 

Livre Scripts
Introdução
Como...?
Lista de Etiquetas
html cabeça, corpo
Manipulação de texto
IMAGENS
Efeitos Especiais
Usando Tabelas
Formulários
Outros tópicos

 

Gabarito nesta página



Nome:
Mail
Comentário:
  

 

Tamanho da Tabela HTML - código


Tutoriais »html »

Tópico

Como criar uma tabela com tamanho diferente?
Como dividir o tamanho das colunas da tabela?



Explicação

Tamanho da Tabela
Podemos definir o tamanho da tabela baseado em pixels ou percentagem. Primeiro vamos ver como se define o tamanho com base em pixels. Os atributos width e height serão utilizados.

Código de Exemplo:
<table border=1 bgcolor="green" width=300 height=100>
<tr height=30>
<td>
Esta é a linha 1 coluna 1
</td>
<td>
Esta é a linha 1 coluna 2
</td>
</tr>
<tr height=70>
<td>
Esta é a linha 2 coluna 1
</td>
<td background="./test.jpg">
Esta é a linha 2 coluna 2 <br><br> Bom fundo
</td>
</tr>
</table>


Agora temos que definir a largura total da tabela a 300 e altura de 100 e dividi-las em 30 a primeira linha e 70 a segunda linha.

Resultado:
Esta é a linha 1 coluna 1 Esta é a linha 1 coluna 2
Esta é a linha 2 coluna 1 Esta é a linha 2 coluna 2

Bom fundo


Tamanho da Tabela em percentagem
O tamanho e altura da tabela podem ser definidos usando a percentagem.
por exemplo: width=60%.
Isto significa que a tabela será desenhada com 60% de largura do componente actual.
isto é, se estamos a desenhar uma tabela dentro de uma etiqueta do corpo e com largura de 100%, então a largura da tabela será igual à largura do navegador.
A tabela pode ser desenhada dentro de tabelas. Iremos abordar isso mais tarde.

Código de Exemplo:
<table border=1 bgcolor="green" width=80% height=20%>
<tr height=30%>
<td>
Esta é a linha 1 coluna 1
</td>
<td>
Esta é a linha 1 coluna 2
</td>
</tr>
<tr height=70%>
<td>
Esta é a linha 2 coluna 1
</td>
<td background="./test.jpg">
Esta é a linha 2 coluna 2 <br><br> Bom fundo
</td>
</tr>
</table>


Agora temos que definir a largura total da tabela com 80% e altura de 30% e dividir a altura de 30% para a primeira linha e 70% na segunda linha
Para explicar com mais detalhe, digamos que temos o tamanho do componente como width=500,height=500 sendo que 80% de 500 (400) será a sua largura total e 30% de 500 (150) a sua altura total. Então irá dividir essa altura, em 150 a 30% para a primeira linha e 70% para a segunda linha.

Resultado:

Esta é a linha 1 coluna 1 Esta é a linha 1 coluna 2
Esta é a linha 2 coluna 1 Esta é a linha 2 coluna 2

Bom fundo
--



Outros Links

web hosting