Tabelas em HTML

1. HTML
HYPER TEXT MARKUP
LANGUAGE
UFCD 0792 - HTML

2. TABELAS

3. Tabelas
 Tabelas são utilizadas em HTML para estruturar a
informação
 Uma tabela é feita de linhas
 Uma linha é feita de células (colunas)
 Tag
<table> … </table>
 Dentro da tag fica toda a estrutura da tabela.

4. Tabelas
 Definição de linhas e células:
<TR>..</TR> - Cria uma linha da tabela
<TH>..</TH> - Cria uma célula de cabeçalho numa tabela
(coloca o texto a negrito)
<TD>..</TD> - Cria uma célula numa linha da tabela
 Para cada linha tem de haver obrigatoriamente um
<TR>…</TR>

5. Tabelas
 Exemplo:
<TABLE BORDER=2>
<TR>
<TH> Personagem </TH>
<TH> Idade </TH>
</TR>
<TR>
<TD> Mickey </TD>
<TD> 5 </TD>
</TR>
<TR> <TD> Peter Pan</TD>
<TD> 15 </TD>
</TR>
</TABLE>

6. Tabelas - Exemplo
1ª linha e 1ª Coluna 1ª linha e 2ª Coluna
2ª linha e 1ª Coluna 2ª linha e 2ª Coluna

7. Tabelas - Exemplo

8. BORDER = n Espessura da borda da tabela
WIDTH = n|n% Largura da tabela em relação à tela
HEIGHT= n|n% Comprimento da tabela em relação à tela
ALIGN = “tipo” Alinhamento horizontal da tabela.
VALIGN = “tipo” Alinhamento vertical da tabela.
BGCOLOR=cor Cor de fundo
COLSPAN=n Une horizontalmente células
ROWSPAN=n Une verticalmente células
CELLSPACING=n Espaço entre as células da tabela
CELLPADDING=n Espaço entre os dados e a borda da célula
Tabelas
 Atributos para as tabelas:

9. Tabelas
 Juntar colunas  Juntar linhas
COLSPAN ROWSPAN

10. Tabelas - COLSPAN
e ROWSPAN
 COLSPAN e ROWSPAN
 São atributos das células da tabela, <th>e <td>
 COLSPAN - permite juntar colunas de uma linha da tabela
<td colspan=n> conteúdo da célula </td>
 ROWSPAN - permite juntar linhas de uma tabela
<td rowspan=n> conteúdo da célula </td>
 O valor n especifica o número de colunas ou linhas que a são unidas.

11. Tabelas - COLSPAN
e ROWSPAN
 ROWSPAN
<td rowspan=2> conteúdo </td>
 COLSPAN
<td colspan=2> conteúdo </td>

12. Tabelas
 Usando COLSPAN
<table>
<tr>
<th COLSPAN=2>Valor</th>
</tr>
<tr>
<th> Homens </th>
<th> Mulheres </th>
</tr>
<tr>
<td> 82 </td>
<td> 85 </td>
</tr>
</table>
Valor
Homens Mulheres
82 85

13. Tabelas
 Usando Rowspan
<table>
<tr>
<td ROWSPAN=2>Favorito</td>
<td> Color</td>
<td> Azul</td>
</tr>
<tr>
<td> Sabor</td>
<td> Banana</td>
</tr>
</table>
Favorito
Cor Azul
Sabor Banana

14. primeira linha
segunda linha
Tabelas
Exemplo:
<table border=1>
<tr>
<td bgcolor=red> primeira </td>
<td> linha </td>
</tr>
<tr bgcolor=yellow >
<td COLSPAN=2 > segunda linha </td>
</tr>
</table>

15. Tabelas
 Exercício:
 Fazer uma tabela com 3 linhas e 2 colunas, com
o seguinte aspeto:

16. TAREFA
 INICIO DA FICHA
FICHA – 6 - HTML – TABELAS
Respeitar os nomes das pastas e ficheiros
que estão na ficha