INSTITUTO FEDERAL DE EDUCAÇÃO, CIÊNCIA E TECNOLOGIA TOCANTINS Campus Araguaína Introdução ao html - tabelas ANA PAULA ALVES DE LIMA.

Apresentação em tema: "INSTITUTO FEDERAL DE EDUCAÇÃO, CIÊNCIA E TECNOLOGIA TOCANTINS Campus Araguaína Introdução ao html - tabelas ANA PAULA ALVES DE LIMA."— Transcrição da apresentação:

1 INSTITUTO FEDERAL DE EDUCAÇÃO, CIÊNCIA E TECNOLOGIA TOCANTINS Campus Araguaína Introdução ao html - tabelas ANA PAULA ALVES DE LIMA

2 Aplicativos Web e Webdesign – Médio Integrado 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.

3 Aplicativos Web e Webdesign – Médio Integrado INSTITUTO FEDERAL DE EDUCAÇÃO, CIÊNCIA E TECNOLOGIA TOCANTINS Campus Araguaína 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

4 Aplicativos Web e Webdesign – Médio Integrado INSTITUTO FEDERAL DE EDUCAÇÃO, CIÊNCIA E TECNOLOGIA TOCANTINS Campus Araguaína Como é feita a criação de tabelas em html Há 3 tags principais: A tag é usada para criação da estrutura da tabela A tag É 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 é 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.

5 Aplicativos Web e Webdesign – Médio Integrado INSTITUTO FEDERAL DE EDUCAÇÃO, CIÊNCIA E TECNOLOGIA TOCANTINS Campus Araguaína Exemplo de código html para tabelas coluna 1 coluna 2

6 Aplicativos Web e Webdesign – Médio Integrado INSTITUTO FEDERAL DE EDUCAÇÃO, CIÊNCIA E TECNOLOGIA TOCANTINS Campus Araguaína Atributos da Tag border Descrição: Define se a tabela terá borda ou não Valores: 1 ou 0 id Descrição: identificadores para a tabela width Descrição: largura da tabela height: Define a altura da tabela em pixels ou porcentagem.

7 Aplicativos Web e Webdesign – Médio Integrado INSTITUTO FEDERAL DE EDUCAÇÃO, CIÊNCIA E TECNOLOGIA TOCANTINS Campus Araguaína Atributos da Tag 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).

8 Aplicativos Web e Webdesign – Médio Integrado INSTITUTO FEDERAL DE EDUCAÇÃO, CIÊNCIA E TECNOLOGIA TOCANTINS Campus Araguaína Cellpadding e Cellspacing FACEBOOK.COM/RANGELJAVIER cellspacingcellpadding

9 Aplicativos Web e Webdesign – Médio Integrado INSTITUTO FEDERAL DE EDUCAÇÃO, CIÊNCIA E TECNOLOGIA TOCANTINS Campus Araguaína 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 para indicar quantas colunas estarão contidas em uma célula.

10 Aplicativos Web e Webdesign – Médio Integrado INSTITUTO FEDERAL DE EDUCAÇÃO, CIÊNCIA E TECNOLOGIA TOCANTINS Campus Araguaína Exemplo Colspan Célula 1 Célula 2 Célula 3 Célula 4

11 Aplicativos Web e Webdesign – Médio Integrado INSTITUTO FEDERAL DE EDUCAÇÃO, CIÊNCIA E TECNOLOGIA TOCANTINS Campus Araguaína Que tal rowspan? Como você já deve ter concluido, rowspan especifica quantas linhas estarão contidas em uma célula:

12 Aplicativos Web e Webdesign – Médio Integrado INSTITUTO FEDERAL DE EDUCAÇÃO, CIÊNCIA E TECNOLOGIA TOCANTINS Campus Araguaína Exemplo Rowspan Célula 1 Célula 2 Célula 3 Célula 4

13 Aplicativos Web e Webdesign – Médio Integrado INSTITUTO FEDERAL DE EDUCAÇÃO, CIÊNCIA E TECNOLOGIA TOCANTINS Campus Araguaína Tag 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 e ao invés da tag

14 Aplicativos Web e Webdesign – Médio Integrado INSTITUTO FEDERAL DE EDUCAÇÃO, CIÊNCIA E TECNOLOGIA TOCANTINS Campus Araguaína Exemplo de código html para cabeçalho de tabela cabeçalho 1 cabeçalho 2 coluna 1 coluna 2

15 Aplicativos Web e Webdesign – Médio Integrado INSTITUTO FEDERAL DE EDUCAÇÃO, CIÊNCIA E TECNOLOGIA TOCANTINS Campus Araguaína 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. FACEBOOK.COM/RANGELJAVIER

16 Aplicativos Web e Webdesign – Médio Integrado INSTITUTO FEDERAL DE EDUCAÇÃO, CIÊNCIA E TECNOLOGIA TOCANTINS Campus Araguaína Exemplo CURSODISCIPLINAPROFESSOR EnfermagemAnatomia IAna Cleide Serviço SocialTeoria do Serviço SocialMariana Cruz Ciências da ComputaçãoProgramação VRangel Xavier FACEBOOK.COM/RANGELJAVIER

17 Aplicativos Web e Webdesign – Médio Integrado INSTITUTO FEDERAL DE EDUCAÇÃO, CIÊNCIA E TECNOLOGIA TOCANTINS Campus Araguaína Divisão da Tabela cria o cabeçalho Para funcionamento corretamente, utiliza-se ainda uma tag Disciplina para cada item de cabeçalho. cria o corpo para criar rodapés da tabelas (quando for necessário) FACEBOOK.COM/RANGELJAVIER

18 Aplicativos Web e Webdesign – Médio Integrado INSTITUTO FEDERAL DE EDUCAÇÃO, CIÊNCIA E TECNOLOGIA TOCANTINS Campus Araguaína Exercícios para praticar

19 Aplicativos Web e Webdesign – Médio Integrado INSTITUTO FEDERAL DE EDUCAÇÃO, CIÊNCIA E TECNOLOGIA TOCANTINS Campus Araguaína Prática 01 Lista OrdenadaLista Desordenada 1.Rangel 2.Maria 3.Francisco 4.Bartolomeu 5.José 6.João 7.George 8.Lennon 9.Paul 10. Ringo Carlos Carol Mariana John McCartney Star Harisson Michael Jackson Five

20 Aplicativos Web e Webdesign – Médio Integrado INSTITUTO FEDERAL DE EDUCAÇÃO, CIÊNCIA E TECNOLOGIA TOCANTINS Campus Araguaína Prática 02 Esta imagem está dentro de duas linhas mescladas? Cabeçalho Este texto é apenas para complicar mais ainda as coisas.