apresentacao aula4
TRANSCRIPT
Concepção de Websites - Introdução às Tabelas - Hélder Oliveira
Concepção de Websites
Introdução às Tabelas
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.
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)
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>
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>
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><tablewidth=“100%” valign=“middle” align=“center”></table>
Código HTML:
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>
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
<tdwidth=“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:
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;
Concepção de Websites - Introdução às Tabelas - Hélder Oliveira
Questões?
Concepção de Websites - Introdução às Tabelas - Hélder OliveiraFIM