Aula 1

Construo de Pginas
Web I
AULA 4
Criao de Tabelas
Tag table
A tag table utilizada para a criao de tabelas, propriamente dita,
podendo conter links, imagens ou textos em suas clulas,
Utilizando a tag table para a criao de uma tabela com 2 linhas e 3
colunas:
<table>
<tr>
Criao da Tabela
Indicativo de Linha (1
Linha)
<td> 1 Clula </td>
Indicativo de
<td> 2 Clula </td>
Indicativo de
<td> 3 Clula </td>
Indicativo de
Clula (1 Coluna)
Clula (2 Coluna)
Clula (3 Coluna)
</tr>
<tr>
Fim da Linha (1 Linha)
Indicativo de Linha (2
Linha)
<td> 4 Clula </td>
Indicativo de
<td> 5 Clula </td>
Indicativo de
<td> 6 Clula </td>
Indicativo de
Clula (1 coluna)
Clula (2 coluna)
Clula (3 coluna)
</tr>
</table>
Fim da Linha (2 Linha)
Fim da Tabela
Atributos da tag table
Prof. Jeany Laranjeira
Pgina 1 de 4
Construo de Pginas
Web I
Width = Largura da tabela
Bgcolor = cor da tabela
Border = espessura da borda
Bordercolor = cor da borda
Align = alinhamento da tabela em relao a pgina (center,
left, right)
Atributos da tag tr (linha da tabela) / td (linha da tabela)
Align = Alinhamento do texto em relao a clula (alinhando

todas as clulas da linha) (left, right, center, justify).
Valign = alinhamento vertical do texto e relao a clula
(alinhando todas as clulas da linha) (bottom, middle,
top).
Bgcolor = cor de todas as clulas da linha.
Atributo da tag td (clula/coluna da tabela)
Align = Alinhamento do texto em relao a clula (apenas a
clula atual) (left, right, center, justify).
Valign = alinhamento vertical do texto e relao a clula
(apenas a clula atual) (bottom, middle, top).
Bgcolor = cor da clula atual.
Height = Altura da Clula.
Width = Largura da Clula.
Rowspan = agrupa duas linhas ou mais.
<table >
<tr align="center" >
<td rowspan="2"> 1 Celula
</td>
<td> 2 Celula </td>
<td> 3 Celula </td>
</tr>
<tr align="center">
<td> 4 Celula </td>
<td> 5 Celula </td>
<table</tr>
>
</table>
<tdduas
colspan="3">
Celula
Colspan = agrupa
colunas ou1mais.
</td>
</tr>
<td> 2 Celula </td>
<td> 3 Celula </td>
<td> 4 Celula </td>
</tr>
</table>
Pgina 2 de 4
Construo de Pginas
Web I
Algumas pginas utilizam as tabelas para a diviso de espaos na

pgina, gerando o layout de acordo com o estilo desejado.
Exemplo de um layout simulando os espaos criados por
frames, que vimos na aula anterior:
<body>
<table width="100%" align="center">
<tr align="center">
<td colspan="2" height="100"> Ttulo de
Site </td>
</tr>
<tr align="left" valign="top">
<td height="500" width="100"> Menu
</td>
<td> Contedo </td>
</tr>
</table>
</body>
Pgina 3 de 4
Construo de Pginas
Web I
Pgina 4 de 4

Aula 1

Enviado por

Dados do documento

Direitos autorais

Formatos disponíveis

Compartilhar este documento

Compartilhar ou incorporar documento

Opções de compartilhamento

Você considera este documento útil?

Este conteúdo é inapropriado?

Direitos autorais:

Formatos disponíveis

Aula 1

Enviado por

Direitos autorais:

Formatos disponíveis

Construo de Pginas

<td> 2 Clula </td>

<td> 3 Clula </td>

Fim da Linha (1 Linha)

<td> 5 Clula </td>

<td> 6 Clula </td>

Fim da Linha (2 Linha)

Atributos da tag table

Prof. Jeany Laranjeira

Atributos da tag tr (linha da tabela) / td (linha da tabela)

Align = Alinhamento do texto em relao a clula (alinhando

Algumas pginas utilizam as tabelas para a diviso de espaos na

Prof. Jeany Laranjeira

Prof. Jeany Laranjeira

Você também pode gostar