HTML 5 Aula 05 Tags Criação de Tabelas

Prévia do material em texto

HTML 5
CRIAÇÃO DE TABELAS
Prof. Rosemary Melo
RESUMO - TAGS PARA CRIAÇÃO DE TABELAS
DESCRIÇÃO TAGS
Criação da tabela <table></table>
Título da tabela <caption></caption>
Cabeçalho da tabela <thead></thead>
Rodapé da tabela <tfoot></tfoot>
Corpo da tabela <tbody></tbody>
Linha da tabela <tr></tr>
Coluna da tabela como 
título
<th></th>
Coluna da tabela <td></td>
TAGS PARA CRIAÇÃO DE TABELAS
Criação de tabelas 
São elementos que representam dados de uma ou mais dimensões.
Podem ser utilizado na exibição de tabelas de preços de um site.
Tabelas
Possuem três seções distintas – cabeçalho, corpo e rodapé.
Sintaxe:
<table>
<caption>título da tabela </caption>
<thead> 
<tr><th>título do cabeçalho </th></tr>
</thead>
<tfoot>
<tr><th>título do rodapé</th></tr>
</tfoot>
<tbody>
<tr><td>nome coluna</td></tr>
</tbody>
</table>
TAGS PARA CRIAÇÃO DE TABELAS
Tipos de tags utilizadas na tabela:
• inclui linha: <tr>nome da linha</tr>
Rowspan = “número de linhas que você quer
mesclar”
• inclui coluna como título: 
<th> nome da coluna </th>
• inclui coluna: 
<td> nome da coluna </td>
Colspan = “número de colunas que você quer
mesclar”
 Sintaxe:
<tr><th>título cabeçalho </th></tr>
<tr><td>texto</td></tr>
TAGS PARA CRIAÇÃO DE TABELAS
Exemplo:
<table border="1" width="220“ height="120" cellspacing="5">
<thead><tr>
<th>Fruta </th>
<th>Preço</th>
<th>Preço c/ desconto</th>
</tr></thead>
<tfoot><tr>
<td colspan="2">Total</td>
<td>R$2,00</td>
</tr></tfoot>
<tbody><tr>
<td>Laranja</td>
<td>R$5,00</td>
<td>R$3,00</td>
</tr></tbody>
</table>
TAGS PARA CRIAÇÃO DE TABELAS
Exemplo:
<table border="1" width="220” height="120" cellspacing="5">
<caption>Lista de preços</caption> 
<thead>
<tr><th>Serviço</th> 
<th>Tempo</th> 
<th>Valor</th></tr> 
</thead> 
<tbody>
<tr> <th>Corte de Cabelo</th> 
<td>10 Min</td> 
<td>R$ 5,00</td></tr> 
<tr> <th>Manicure</th> 
<td>30 Min</td> 
<td>R$ 20,00</td></tr> 
<tr> <th>Pedicure</th> 
<td>30 Min</td> 
<td>R$ 10,00</td></tr> 
</tbody> 
</table> 
HTML
Exercícios:
1) Faça as seguintes tabelas:
HTML
Exercícios:
2) Faça as seguintes tabelas:
HTML
Exercícios:
3) Faça as seguintes tabelas: