O documento introduz o conceito de tabelas em HTML, descrevendo sua estrutura básica com as tags <table>, <tr> e <td>, e seus atributos principais como align, valign e bgcolor para organizar e estilizar o conteúdo.

1. Concepção de Websites - Introdução às Tabelas - Hélder Oliveira
Concepção de Websites
Introdução às Tabelas

2. Concepção de Websites - Introdução às Tabelas - Hélder Oliveira
Utilidade das Tabelas na Web
• Apresentação de conteúdos
organizados em linhas e colunas.

3. Concepção de Websites - Introdução às Tabelas - Hélder Oliveira
Utilidade das Tabelas na Web
• Organização da aparência visual da página
(layout)

4. Concepção de Websites - Introdução às Tabelas - Hélder Oliveira
Estrutura básica
<table>
</table>
<tr>
</tr>
<tr>
</tr>
<td>1</td>
<td>2</td>
11 2
3 4
<td>3</td>
<td>4</td>

5. Concepção de Websites - Introdução às Tabelas - Hélder Oliveira
Estrutura básica
• Cabeçalhos
– Tag “th”
<table>
<tr>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
</tr>
</table>
<table>
<th>
<td></td>
<td></td>
</th>
<tr>
<td></td>
<td></td>
</tr>
</table>

6. Concepção de Websites - Introdução às Tabelas - Hélder Oliveira
Atributos da Tabela
• Tag <table/>
– align
– valign
– bgcolor
– border
– width
<table align=“left”></table><table align=“right”></table><table align=“center”></table><table valign=“top” align=“center”></table><table valign=“bottom” align=“center”></table><table valign=“middle” align=“center”></table><table bgcolor=“gold” valign=“middle” align=“center”></table><table bgcolor=“#FFD700” valign=“middle” align=“center”></table><table bgcolor=“rgb(255,215,0)” valign=“middle” align=“center”></table><table border=3 bgcolor=“rgb(255,215,0)” valign=“middle” align=“center”></table><table width=“200px” valign=“middle” align=“center”></table><table width=“100%” valign=“middle” align=“center”></table>
Código HTML:

7. Concepção de Websites - Introdução às Tabelas - Hélder Oliveira
Atributos da tabela
• Tag <table/>
– cellspacing
– cellpadding Aplicações
Informáticas A
<table cellspacing=“10”></table><table cellpadding=“10”></table>

8. Concepção de Websites - Introdução às Tabelas - Hélder Oliveira
Atributos de uma célula
• Tag <td>
– width
– height
– bgcolor
– align
– valign
API API API
<td width=“120”></td><td height=“50”></td><td align=“left”>API</td><td align=“center”>API</td><td align=“right”>API</td>
API
API
API
<td valign=“top”>API</td><td valign=“middle”>API</td><td valign=“bottom”>API</td>
Exemplo:

9. Concepção de Websites - Introdução às Tabelas - Hélder Oliveira
Resumindo…
• Estrutura principal da tabela: tag <table/>
• Representação de linhas: tag <tr/>
• Representação de células: tag <td/>
• Posicionamento: atributos align e valign
• Cor de fundo: atributo bgcolor;
• Dimensões: atributos width e height;

10. Concepção de Websites - Introdução às Tabelas - Hélder Oliveira
Questões?

11. Concepção de Websites - Introdução às Tabelas - Hélder Oliveira
FIM