Prof.

Daniel Cosme Mendonça Maia

Bacharel em Sistemas de Informação (Unimontes)
Especialista em Tecnologias para Desenvolvimento Web (Unopar)
Mestre em Informática (UnB)
Desenvolvedor Web (HTML/CSS/PHP)
 As tabelas auxiliam na visualização de dados
ou na divisão da página em setores.

 As tabelas são referenciadas pelo elemento

table, e são dividas em linhas e células.

118
  Dentro do bloco “table”, os principais elementos que utilizaremos
serão o tr (table row) e o td (table data).
...
<table border=“1”> Célula / Coluna
<tr>
<td>Primeira</td>
Linha <td>Segunda</td>
</tr>
<tr>
<td>Terceira</td>
<td>Quarta</td>
</tr>
</table>
...
119
 Dentro de um bloco “td” é possível colocar códigos em HTML e inclusive
criar outras tabelas dentro de células.
...
<table border=“1”>
<tr>
<td>Primeira</td>
<td>Segunda</td>
</tr>
<tr>
<td>Terceira</td>
<td>
<table>
<tr>
<td>Quarta</td>
<td>Quinta</td>
</tr>
</table>
</td>
</tr>
</table>
...
120
 Podemos controlar o espaçamento entre células,
utilizando o atributo cellspacing.
...
<table cellspacing=“20” border=“1”>
<tr>
<td>Primeira</td>
<td>Segunda</td>
</tr>
<tr>
<td>Terceira</td>
<td>Quarta</td>
</tr>
</table>
...

121
 Podemos também controlar o espaçamento entre o conteúdo da
célula e extremidade da célula, utilizando o atributo cellpadding.
...
<table cellpadding=“30” cellspacing=“20”
border=“1”>
<tr>
<td>Primeira</td>
<td>Segunda</td>
</tr>
<tr>
<td>Terceira</td>
<td>Quarta</td>
</tr>
</table>
...

122
 O atributo bgcolor pode ser utilizado na tabela para o
preenchimento de células.
...
<table bgcolor="#ff0000" cellspacing="20"
cellpadding="30" border="1">
<tr bgcolor="#ffff00">
<td>Primeira</td>
<td>Segunda</td>
</tr>
<tr>
<td bgcolor="#ffffff">Terceira</td>
<td>Quarta</td>
</tr>
</table>
...

123
 Para definir a largura das células e tabela é possível utilizar o
atributo width, o mesmo utilizado na definição da largura de
imagens.
...
<table bgcolor="#ff0000" cellspacing="20"
cellpadding="30" border="1“ width=“50%”>
<tr bgcolor="#ffff00">
<td width=“400”>Primeira</td>
<td>Segunda</td>
</tr>
<tr>
<td bgcolor="#ffffff">Terceira</td>
<td>Quarta</td>
</tr>
</table>
...

124