A apresentação está carregando. Por favor, espere

A apresentação está carregando. Por favor, espere

HTML Tables (Tabelas) Prof. Tales Kunz Cabral COLÉGIO DA IMACULADA CURSO TÉCNICO EM INFORMÁTICA 3º Módulo.

Apresentações semelhantes


Apresentação em tema: "HTML Tables (Tabelas) Prof. Tales Kunz Cabral COLÉGIO DA IMACULADA CURSO TÉCNICO EM INFORMÁTICA 3º Módulo."— Transcrição da apresentação:

1 HTML Tables (Tabelas) Prof. Tales Kunz Cabral COLÉGIO DA IMACULADA CURSO TÉCNICO EM INFORMÁTICA 3º Módulo

2 Slide nº 2 Table (Tabela) - Define uma tabela - define uma linha de uma tabela - define uma célula dentro de uma linha

3 Slide nº 3 Tabelas - Atributos Table –BORDER – define a existência de alguma borda para tabela –WIDTH – pode ser dado em pixels ou em percentagem –FRAME – especifica os lados da borda que serão exibidos. Valores possíveis: Void, above, below, hsides, vsides, lhs (left hand side), rhs (right hand side), border –RULES – especifica em que células se aplica as regras definidas. Valores possíveis: none, groups, rows, cols, all –CELLSPACING – espaçamento entre as celulas (grade) –CELLPADING – espaçamento da célula para o texto –BORDERCOLOR – cor da borda

4 Slide nº 4 Tabelas - Exemplo A B C Uso do atributo frame: interno

5 Slide nº 5 Tabelas - Exemplo A B C Uso do atributo frame: acima

6 Slide nº 6 Tabelas - Exemplo A B C Uso do atributo frame: abaixo

7 Slide nº 7 Tabelas - Exemplo A B C Uso do atributo frame: lados horizontais

8 Slide nº 8 Tabelas - Exemplo A B C Uso do atributo frame: lados verticais

9 Slide nº 9 Tabelas - Exemplo A B C Uso do atributo frame: Somente lados esquerdos

10 Slide nº 10 Tabelas - Exemplo A B C Uso do atributo frame: Somente lados direitos

11 Slide nº 11 Tabelas - Exemplo A B C Uso do atributo frame: tudo

12 Slide nº 12 Tabelas - Exemplo A B C Uso do atributo cellpadding (acolchoamento): Espaçamento entre a borda e a letra

13 Slide nº 13 Tabelas - Exemplo A B C Uso do atributo cellspacing (espaço entre células): Espaçamento entre a borda e a célula

14 Slide nº 14 Tabelas - Exemplo A B C Uso do atributo bordercolor: Cor da borda

15 Slide nº 15 Tabelas - Exemplo A B C Uso do atributo width (largura): Obs.: O valor do atributo width pode ser dado em pixels ou em % Obs2.: Quando dado em %, significa quanto ao tamanho da área.

16 Slide nº 16 Tabelas - Exemplo A B C Uso do atributo rules (regras): agrupado

17 Slide nº 17 Tabelas - Exemplo A B C Uso do atributo rules (regras): Somente linhas

18 Slide nº 18 Tabelas - Exemplo A B C Uso do atributo rules (regras): Somente colunas

19 Slide nº 19 Tabelas - Exemplo A B C Uso do atributo rules (regras): tudo (padrão)

20 Slide nº 20 Tabelas – Exemplo Aleatório Título A B C D E F G H I J K L M N O

21 Slide nº 21 Tabelas – Outros Exemplos

22 Slide nº 22 Tabelas – Outros Atributos CAPTION: define a legenda da tabela –TH: semelhante à TD, mas usado para cabeçalhos –THEAD, TFOOT e TBODY: permitem def inir um conjunt o de várias linhas agrupadas no cabeçalho, no rodapé ou no corpo da tabela* –COLGROUP: permite especificar um grupo de colunas e adicionalmente definir-lhes características comuns –COL: define as características da coluna. Pode ou não estar incluída dentro da Marca COLGROUP

23 Slide nº 23 Marcas da Tabela - Atributos TD,TH,TR,THEAD,TBODY,TFOOT,COL,COLGROUP –VALIGN: alinhamento vertical. Valores possíveis: top, middle, bottom, baseline –ALIGN: alinhamento horizontal. Valores possíveis: –Left, center, right, justify, char TD,TH –ROWSPAN: número de células ocupadas na vertical –COLSPAN: número de células ocupadas na horizontal COLGROUP –SPAN: número de colunas do grupo. É ignorado se contiver uma ou mais MARCAS COL dentro da marca COLGROUP. –WIDTH: largura (pixels ou %) de cada coluna do grupo COL –SPAN: número de colunas a que se aplica as características –WIDTH: largura (pixels ou %) de cada coluna

24 Slide nº 24 Marcas da Tabela - Exemplos

25 Slide nº 25 Exercício Montar a seguinte tabela: espaçamento entre as células: 2 Espaçamento entre o texto e a borda: 3 Cor da borda: azul Conferir os alinhamentos das células. largura à 60% da página expessura da borda = 1. Cada célula irá ter 20% de largura da tabela.


Carregar ppt "HTML Tables (Tabelas) Prof. Tales Kunz Cabral COLÉGIO DA IMACULADA CURSO TÉCNICO EM INFORMÁTICA 3º Módulo."

Apresentações semelhantes


Anúncios Google