HTML

HYPER TEXT MARKUP LANGUAGE

UFCD 0792 - HTML

TABELAS

1
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.

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>

2
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>

Tabelas - Exemplo

1ª linha e 1ª Coluna 1ª linha e 2ª Coluna

2ª linha e 1ª Coluna 2ª linha e 2ª Coluna

3
Tabelas - Exemplo

Tabelas
 Atributos para as tabelas:
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

4
Tabelas
COLSPAN ROWSPAN
 Juntar colunas  Juntar linhas

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.

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

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

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

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

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

TAREFA

 INICIO DA FICHA
FICHA – 6 - HTML – TABELAS

Respeitar os nomes das pastas e ficheiros que

estão na ficha