Introdução ao html
- tabelas
ANA PAULA ALVES DE LIMA
INSTITUTO FEDERAL DE
EDUCAÇÃO, CIÊNCIA E TECNOLOGIA
TOCANTINS
Campus Araguaína
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 estão sendo construídos.
INSTITUTO FEDERAL DE
EDUCAÇÃO, CIÊNCIA E TECNOLOGIA
TOCANTINS
Campus Araguaína
Aplicativos Web e Webdesign –
Médio Integrado
Tabelas em html
•
Tabelas são usadas para apresentar
"dados tabulares" , isto é,
informação que deva ser apresentada
em linhas e colunas, de forma lógica.
•
Para layout de páginas recomenda-se
o uso de <div>
INSTITUTO FEDERAL DE
EDUCAÇÃO, CIÊNCIA E TECNOLOGIA
TOCANTINS
Campus Araguaína
Aplicativos Web e Webdesign –
Médio Integrado
Como é feita a criação de tabelas
em html
•
Há 3 tags principais:
•
•
•
<table>
<tr>
<td>
•
A tag<table> é usada para criação da estrutura da tabela
•
A tag <tr> É usada para criação de linhas na tabela.
Significa "table row" - linha de tabela -começa e
termina e uma linha horizontal da tabela
•
A tag< td> é usada para criação de colunas na tabela.
Significa "table data" - dados da tabela. começa e
termina cada célula contida nas linhas da tabela.
INSTITUTO FEDERAL DE
EDUCAÇÃO, CIÊNCIA E TECNOLOGIA
TOCANTINS
Campus Araguaína
Aplicativos Web e Webdesign –
Médio Integrado
Exemplo de código html para
tabelas
<table border='1'>
<tr>
<td>coluna 1</td>
<td>coluna 2</td>
</tr>
</table>
INSTITUTO FEDERAL DE
EDUCAÇÃO, CIÊNCIA E TECNOLOGIA
TOCANTINS
Campus Araguaína
Aplicativos Web e Webdesign –
Médio Integrado
Atributos da Tag <table>
•
border
•
Descrição: Define se a tabela terá borda ou não
Valores: 1 ou 0
•
Descrição: identificadores para a tabela
•
•
•
id
width
•
•
Descrição: largura da tabela
height: Define a altura da tabela em pixels ou porcentagem.
INSTITUTO FEDERAL DE
EDUCAÇÃO, CIÊNCIA E TECNOLOGIA
TOCANTINS
Campus Araguaína
Aplicativos Web e Webdesign –
Médio Integrado
Atributos da Tag <td>
• align
Descrição: Define o alinhamento do
conteúdo dentro da coluna
• Valores: left, right, center, justify
• cellpadding: Define o espaço entre as
bordas da célula e o conteúdo da mesma.
(em pixels)
•cellspacing: Define o espaço entre as
bordas (em pixels).
•
INSTITUTO FEDERAL DE
EDUCAÇÃO, CIÊNCIA E TECNOLOGIA
TOCANTINS
Campus Araguaína
Aplicativos Web e Webdesign –
Médio Integrado
Cellpadding e Cellspacing
cellpadding
INSTITUTO FEDERAL DE
FACEBOOK.COM/RANGELJAVIER
EDUCAÇÃO,
CIÊNCIA E TECNOLOGIA
TOCANTINS
Campus Araguaína
cellspacing
Aplicativos Web e Webdesign –
Médio Integrado
O que mais existe?
•
Os dois atributos colspan e rowspan são
usados para criar tabelas singulares.
•
Colspan é a abreviação para "column
span". Colspan é usada na tag <td> para
indicar quantas colunas estarão
contidas em uma célula.
INSTITUTO FEDERAL DE
EDUCAÇÃO, CIÊNCIA E TECNOLOGIA
TOCANTINS
Campus Araguaína
Aplicativos Web e Webdesign –
Médio Integrado
Exemplo Colspan
<table border="1">
<tr>
<td colspan="3">Célula 1</td>
</tr>
<tr>
<td>Célula 2</td>
<td>Célula 3</td>
<td>Célula 4</td>
</tr>
</table>
INSTITUTO FEDERAL DE
EDUCAÇÃO, CIÊNCIA E TECNOLOGIA
TOCANTINS
Campus Araguaína
Aplicativos Web e Webdesign –
Médio Integrado
Que tal rowspan?
•
Como você já deve ter concluido, rowspan
especifica quantas linhas estarão
contidas em uma célula:
INSTITUTO FEDERAL DE
EDUCAÇÃO, CIÊNCIA E TECNOLOGIA
TOCANTINS
Campus Araguaína
Aplicativos Web e Webdesign –
Médio Integrado
Exemplo Rowspan
<table border="1">
<tr>
<td rowspan="3">Célula 1</td>
<td>Célula 2</td>
</tr>
<tr>
<td>Célula 3</td>
</tr>
<tr>
<td>Célula 4</td>
</tr>
</table>
INSTITUTO FEDERAL DE
EDUCAÇÃO, CIÊNCIA E TECNOLOGIA
TOCANTINS
Campus Araguaína
Aplicativos Web e Webdesign –
Médio Integrado
Tag <th>
•
Em geral tabelas possuem cabeçalhos utilizados
para organizar as informações
•
Utiliza-se esta tag para definir os cabeçalhos em
tabelas
•
Utilizada juntamente com a tag <tr> e ao invés da
tag <td>
INSTITUTO FEDERAL DE
EDUCAÇÃO, CIÊNCIA E TECNOLOGIA
TOCANTINS
Campus Araguaína
Aplicativos Web e Webdesign –
Médio Integrado
Exemplo de código html para
cabeçalho de tabela
<table border='1'>
<tr>
<th>cabeçalho 1</th>
<th>cabeçalho 2</th>
<tr>
<td>coluna 1</td>
<td>coluna 2</td>
</tr>
</table>
INSTITUTO FEDERAL DE
EDUCAÇÃO, CIÊNCIA E TECNOLOGIA
TOCANTINS
Campus Araguaína
Aplicativos Web e Webdesign –
Médio Integrado
Divisão da Tabela
•
As tabelas podem ser divididas
organizadamente em cabeçalho,
corpo e rodapé.
•
Existem tags da tabela para
auxiliarmos esta divisão.
INSTITUTO FEDERAL DE
FACEBOOK.COM/RANGELJAVIER
EDUCAÇÃO,
CIÊNCIA E TECNOLOGIA
TOCANTINS
Campus Araguaína
Aplicativos Web e Webdesign –
Médio Integrado
Exemplo
CURSO
DISCIPLINA
PROFESSOR
Enfermagem
Anatomia I
Ana Cleide
Serviço Social
Teoria do Serviço Social
Mariana Cruz
Ciências da Computação
Programação V
Rangel Xavier
INSTITUTO FEDERAL DE
FACEBOOK.COM/RANGELJAVIER
EDUCAÇÃO,
CIÊNCIA E TECNOLOGIA
TOCANTINS
Campus Araguaína
Aplicativos Web e Webdesign –
Médio Integrado
Divisão da Tabela
•
<thead> cria o cabeçalho
•
Para funcionamento corretamente, utiliza-se ainda uma tag
<th>Disciplina</th> para cada item de cabeçalho.
•
<tbody> cria o corpo
•
<tfoot> para criar rodapés da tabelas (quando for necessário)
INSTITUTO FEDERAL DE
FACEBOOK.COM/RANGELJAVIER
EDUCAÇÃO,
CIÊNCIA E TECNOLOGIA
TOCANTINS
Campus Araguaína
Aplicativos Web e Webdesign –
Médio Integrado
Exercícios para praticar
INSTITUTO FEDERAL DE
EDUCAÇÃO, CIÊNCIA E TECNOLOGIA
TOCANTINS
Campus Araguaína
Aplicativos Web e Webdesign –
Médio Integrado
Prática 01
Lista Ordenada
Lista Desordenada
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
• Carlos
• Carol
• Mariana
• John
• McCartney
• Star
• Harisson
• Michael
• Jackson
• Five
Rangel
Maria
Francisco
Bartolomeu
José
João
George
Lennon
Paul
Ringo
INSTITUTO FEDERAL DE
EDUCAÇÃO, CIÊNCIA E TECNOLOGIA
TOCANTINS
Campus Araguaína
Aplicativos Web e Webdesign –
Médio Integrado
Prática 02
Esta imagem está dentro de duas linhas
mescladas?
Cabeçalho
Este texto é apenas para complicar mais
ainda as coisas.
INSTITUTO FEDERAL DE
EDUCAÇÃO, CIÊNCIA E TECNOLOGIA
TOCANTINS
Campus Araguaína
Aplicativos Web e Webdesign –
Médio Integrado