Aula 10,11 e 12

• Criação de Tabelas
em HTML5

O Professor : Lucas Pazito

 Tabelas em HTML5
As tabelas são definidas com a tag <table>. Uma
tabela é dividida em linhas (com a tag <tr>), e
cada linha é dividida em células de dados (com a tag
<td>).
As letras td significam "table data," que é o
conteúdo de uma célula de dados.
As letras tr significam "table row,"
Uma célula de dados pode conter texto, imagens,
listas, parágrafos, formulários, tabelas, etc.
 Tabelas e o atributo border
Se não especificarmos um atributo border a tabela será
exibida sem qualquer borda. Às vezes isto pode ser útil, mas
geralmente, você irá querer que as bordas sejam mostradas.
<table border="1">
<tr>
<td>linha 1, célula 1</td>
<td>linha 1, célula 2</td>
</tr>
</table>
 Tabelas com Células de Título
Podemos informar ao Navegador que uma determinada Célula, ou
conjunto de células são células de Título. Para isto usamos a tag
<th> que significa Table Header <table border=“1”>
<tr>
<th> nomes </th>
<th> Idades </th>
Nomes Idades </tr>
Keyla 5 <tr>
<td> Keyla </td>
<td> 5 </td>
</tr>
</table>
Tabelas com Cabeçalho, Corpo e Rodapé
 Código Apenas do Cabeçalho

<thead>
<tr>
<th colspan="4"> Tabela de preços </th>
</tr>
</thead>
 Código Apenas do Corpo
<tbody>
<tr>
<td rowspan="2"> Seminovos</td>
<td>Trompete</td>
<td>Trombone</td>
<td>Trompa</td>
</tr>
<tr>
<td>$500</td>
<td>$640</td>
<td>$650</td>
</tr>
</tbody>
 Código Apenas do Rodapé

<tfoot>

<tr>
<td colspan="4"> Visite nossa loja </td>
</tr>

</tfoot>
 Principais Tags de Tabelas em HTML

Tag Descrição
<table> Define uma tabela
<th> Define um cabeçalho de tabela
<tr> Define uma linha de tabela
<td> Define uma célula de tabela
<caption> Define um título de tabela
<colgroup> Define um grupo de colunas de tabela
Define os valores de atributo para uma ou mais
<col>
colunas em uma tabela
<thead> Define um cabeçalho de tabela
<tbody> Define o corpo de uma tabela
<tfoot> Defines o rodapé (footer) de uma tabela
 Atributos ColsPan e RowsPan
Há tabelas que uma linha (geralmente o cabeçalho e o rodapé)
ocupam o espaço de todas as colunas.

E podemos definir isso, o tanto de colunas que uma célula vai

ocupar, através do atributo colspan da tag <td>.
O "col" vem de column (coluna) e span quer dizer expandir,
abranger.

<colspan> é para expandirmos células para que fiquem do tamanho

de quantas colunas quisermos. <rowspan> é para expandirmos
células para que fiquem do tamanho de quantas linhas quisermos.
Exercícios 1 e 2
Exercícios 3 e 4
Exercício 5