Tamanho da Tabela HTML - código

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

Other Links