Introduo ao

html - tabelas
ANA PAULA ALVES DE LIMA

INSTITUTO FEDERAL DE
EDUCAO, CINCIA E TECNOLOGIA
TOCANTINS
Campus Araguana

O conceito tradicional do uso de tabelas

assim que foi e assim que continua

sendo o projeto da maioria dos sites, tanto
existentes quanto os que esto sendo
construdos.

INSTITUTO FEDERAL DE
EDUCAO, CINCIA E TECNOLOGIA
TOCANTINS
Campus Araguana

Aplicativos Web e Webdesign

Mdio Integrado

Tabelas em html

Tabelas so usadas para

apresentar "dados
tabulares" , isto , informao
que deva ser apresentada em
linhas e colunas, de forma
lgica.

Para layout de pginas

recomenda-se o uso de <div>

INSTITUTO FEDERAL DE
EDUCAO, CINCIA E TECNOLOGIA
TOCANTINS
Campus Araguana

Aplicativos Web e Webdesign

Mdio Integrado

Como feita a criao de

tabelas em html

H 3 tags principais:

<table>

<tr>

<td>

A tag<table> usada para criao da estrutura da

tabela

A tag <tr> usada para criao de linhas na tabela.

Significa "table row" - linha de tabela -comea e
termina e uma linha horizontal da tabela

A tag< td> usada para criao de colunas na tabela.

Significa "table data" - dados da tabela. comea e
termina cada clula contida nas linhas da tabela.

INSTITUTO FEDERAL DE
EDUCAO, CINCIA E TECNOLOGIA
TOCANTINS
Campus Araguana

Aplicativos Web e Webdesign

Mdio Integrado

Exemplo de cdigo html

para tabelas
<table border='1'>
<tr>
<td>coluna 1</td>
<td>coluna 2</td>
</tr>
</table>
INSTITUTO FEDERAL DE
EDUCAO, CINCIA E TECNOLOGIA
TOCANTINS
Campus Araguana

Aplicativos Web e Webdesign

Mdio Integrado

Atributos da Tag <table>

border

Descrio: Define se a tabela ter borda ou no

Valores: 1 ou 0

Descrio: identificadores para a tabela

id
width

Descrio: largura da tabela

height: Define a altura da tabela em pixels ou

porcentagem.

INSTITUTO FEDERAL DE
EDUCAO, CINCIA E TECNOLOGIA
TOCANTINS
Campus Araguana

Aplicativos Web e Webdesign

Mdio Integrado

Atributos da Tag <td>

align

Descrio: Define o
alinhamento do contedo
dentro da coluna
Valores: left, right, center,
justify
cellpadding: Define o espao
entre as bordas da clula e o
contedo da mesma. (em pixels)

INSTITUTO FEDERAL DE
EDUCAO, CINCIA E TECNOLOGIA
TOCANTINS
Campus Araguana

Aplicativos Web e Webdesign

Mdio Integrado

Cellpadding e Cellspacing

cellpadding

INSTITUTO FEDERAL DE
FACEBOOK.COM/RANGELJAVIER
EDUCAO,
CINCIA E TECNOLOGIA
TOCANTINS
Campus Araguana

cellspacing

Aplicativos Web e Webdesign

Mdio Integrado

O que mais existe?

Os dois atributos colspan e

rowspan so usados para criar
tabelas singulares.

Colspan a abreviao para

"column span". Colspan usada
na tag <td> para indicar
quantas colunas estaro
contidas em uma clula.

INSTITUTO FEDERAL DE
EDUCAO, CINCIA E TECNOLOGIA
TOCANTINS
Campus Araguana

Aplicativos Web e Webdesign

Mdio Integrado

Exemplo Colspan
<table border="1">
<tr>
<td colspan="3">Clula 1</td>
</tr>
<tr>
<td>Clula 2</td>
<td>Clula 3</td>
<td>Clula 4</td>
</tr>
</table>
INSTITUTO FEDERAL DE
EDUCAO, CINCIA E TECNOLOGIA
TOCANTINS
Campus Araguana

Aplicativos Web e Webdesign

Mdio Integrado

Que tal rowspan?

Como voc j deve ter concluido,

rowspan especifica quantas linhas
estaro contidas em uma clula:

INSTITUTO FEDERAL DE
EDUCAO, CINCIA E TECNOLOGIA
TOCANTINS
Campus Araguana

Aplicativos Web e Webdesign

Mdio Integrado

Exemplo Rowspan
<table border="1">
<tr>
<td rowspan="3">Clula 1</td>
<td>Clula 2</td>
</tr>
<tr>
<td>Clula 3</td>
</tr>
<tr>
<td>Clula 4</td>
</tr>
</table>
INSTITUTO FEDERAL DE
EDUCAO, CINCIA E TECNOLOGIA
TOCANTINS
Campus Araguana

Aplicativos Web e Webdesign

Mdio Integrado

Tag <th>

Em geral tabelas possuem cabealhos

utilizados para organizar as informaes

Utiliza-se esta tag para definir os

cabealhos em tabelas

Utilizada juntamente com a tag <tr> e ao

invs da tag <td>

INSTITUTO FEDERAL DE
EDUCAO, CINCIA E TECNOLOGIA
TOCANTINS
Campus Araguana

Aplicativos Web e Webdesign

Mdio Integrado

Exemplo de cdigo html

para cabealho de tabela
<table border='1'>
<tr>
<th>cabealho 1</th>
<th>cabealho 2</th>
<tr>
<td>coluna 1</td>
<td>coluna 2</td>
</tr>
</table>

INSTITUTO FEDERAL DE
EDUCAO, CINCIA E TECNOLOGIA
TOCANTINS
Campus Araguana

Aplicativos Web e Webdesign

Mdio Integrado

Diviso da Tabela

As tabelas podem ser divididas

organizadamente em
cabealho, corpo e rodap.

Existem tags da tabela para

auxiliarmos esta diviso.

INSTITUTO FEDERAL DE
FACEBOOK.COM/RANGELJAVIER
EDUCAO,
CINCIA E TECNOLOGIA
TOCANTINS
Campus Araguana

Aplicativos Web e Webdesign

Mdio Integrado

Exemplo
CURSO

DISCIPLINA

PROFESSOR

CABEALHO DA TABELA

Enfermagem

Anatomia I

Ana Cleide

Servio Social

Teoria do Servio
Social

Mariana Cruz

Programao V

Rangel Xavier

Cincias da
Computao

CORPO DA TABELA

INSTITUTO FEDERAL DE
FACEBOOK.COM/RANGELJAVIER
EDUCAO,
CINCIA E TECNOLOGIA
TOCANTINS
Campus Araguana

Aplicativos Web e Webdesign

Mdio Integrado

Diviso da Tabela

<thead> cria o cabealho

Para funcionamento corretamente, utiliza-se ainda

uma tag <th>Disciplina</th> para cada item de
cabealho.

<tbody> cria o corpo

<tfoot> para criar rodaps da tabelas (quando for

necessrio)

INSTITUTO FEDERAL DE
FACEBOOK.COM/RANGELJAVIER
EDUCAO,
CINCIA E TECNOLOGIA
TOCANTINS
Campus Araguana

Aplicativos Web e Webdesign

Mdio Integrado

Exerccios para praticar

INSTITUTO FEDERAL DE
EDUCAO, CINCIA E TECNOLOGIA
TOCANTINS
Campus Araguana

Aplicativos Web e Webdesign

Mdio Integrado

Prtica 01
Lista Ordenada

Lista Desordenada

1. Rangel
2. Maria
3. Francisco
4. Bartolomeu
5. Jos
6. Joo
7. George
8. Lennon
9. Paul
10. Ringo

INSTITUTO FEDERAL DE
EDUCAO, CINCIA E TECNOLOGIA
TOCANTINS
Campus Araguana

Carlos
Carol
Mariana
John
McCartney
Star
Harisson
Michael
Jackson
Five

Aplicativos Web e Webdesign

Mdio Integrado

Prtica 02
Esta imagem est dentro de duas
linhas mescladas?

Cabealho
Este texto apenas para
complicar mais ainda as coisas.

INSTITUTO FEDERAL DE
EDUCAO, CINCIA E TECNOLOGIA
TOCANTINS
Campus Araguana

Aplicativos Web e Webdesign

Mdio Integrado