HTML Tables (Tabelas) Prof. Tales Kunz Cabral [email protected] COLÉGIO DA...

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

Transcript of HTML Tables (Tabelas) Prof. Tales Kunz Cabral [email protected] COLÉGIO DA...

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

HTMLHTMLTables (Tabelas)Tables (Tabelas)

HTMLHTMLTables (Tabelas)Tables (Tabelas)

Prof. Tales Kunz CabralProf. Tales Kunz [email protected]

COLÉGIO DA IMACULADACOLÉGIO DA IMACULADACURSO TÉCNICO EM INFORMÁTICACURSO TÉCNICO EM INFORMÁTICACOLÉGIO DA IMACULADACOLÉGIO DA IMACULADA

CURSO TÉCNICO EM INFORMÁTICACURSO TÉCNICO EM INFORMÁTICA

3º Módulo3º Módulo3º Módulo3º Módulo

Page 2: HTML Tables (Tabelas) Prof. Tales Kunz Cabral talescabral@colegiodaimaculada.com.br COLÉGIO DA IMACULADA CURSO TÉCNICO EM INFORMÁTICA 3º Módulo.

Slide nº 2

Table (Tabela)

• <TABLE></TABLE> - Define uma tabela

• <TR></TR> - define uma linha de uma tabela

• <TD></TD> - define uma célula dentro de uma linha

Page 3: HTML Tables (Tabelas) Prof. Tales Kunz Cabral talescabral@colegiodaimaculada.com.br COLÉGIO DA IMACULADA CURSO TÉCNICO EM INFORMÁTICA 3º Módulo.

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

Page 4: HTML Tables (Tabelas) Prof. Tales Kunz Cabral talescabral@colegiodaimaculada.com.br COLÉGIO DA IMACULADA CURSO TÉCNICO EM INFORMÁTICA 3º Módulo.

Slide nº 4

Tabelas - Exemplo<body><table frame="void" border=“2" cellpadding="0" cellspacing="0" bordercolor="#111111" width="64" rules=“none" id="Tabela1"> <tr> <td width="19" align="center">A</td> <td width="19" align="center">B</td> <td width="22" align="center">C</td> </tr> <tr> <td width="19" align="center">1</td> <td width="19" align="center">4</td> <td width="22" align="center">7</td> </tr> <tr> <td width="19" align="center">2</td> <td width="19" align="center">5</td> <td width="22" align="center">8</td> </tr> <tr> <td width="19" align="center">3</td> <td width="19" align="center">6</td> <td width="22" align="center">9</td> </tr></table></body>

Uso do atributo Uso do atributo frame:frame:

interno

Page 5: HTML Tables (Tabelas) Prof. Tales Kunz Cabral talescabral@colegiodaimaculada.com.br COLÉGIO DA IMACULADA CURSO TÉCNICO EM INFORMÁTICA 3º Módulo.

Slide nº 5

Tabelas - Exemplo<body><table frame=“above" border=“2" cellpadding="0" cellspacing="0" bordercolor="#111111" width="64" rules=“none" id="Tabela1"> <tr> <td width="19" align="center">A</td> <td width="19" align="center">B</td> <td width="22" align="center">C</td> </tr> <tr> <td width="19" align="center">1</td> <td width="19" align="center">4</td> <td width="22" align="center">7</td> </tr> <tr> <td width="19" align="center">2</td> <td width="19" align="center">5</td> <td width="22" align="center">8</td> </tr> <tr> <td width="19" align="center">3</td> <td width="19" align="center">6</td> <td width="22" align="center">9</td> </tr></table></body>

Uso do atributo Uso do atributo frame:frame:

acima

Page 6: HTML Tables (Tabelas) Prof. Tales Kunz Cabral talescabral@colegiodaimaculada.com.br COLÉGIO DA IMACULADA CURSO TÉCNICO EM INFORMÁTICA 3º Módulo.

Slide nº 6

Tabelas - Exemplo<body><table frame=“below" border=“2" cellpadding="0" cellspacing="0" bordercolor="#111111" width="64" rules=“none" id="Tabela1"> <tr> <td width="19" align="center">A</td> <td width="19" align="center">B</td> <td width="22" align="center">C</td> </tr> <tr> <td width="19" align="center">1</td> <td width="19" align="center">4</td> <td width="22" align="center">7</td> </tr> <tr> <td width="19" align="center">2</td> <td width="19" align="center">5</td> <td width="22" align="center">8</td> </tr> <tr> <td width="19" align="center">3</td> <td width="19" align="center">6</td> <td width="22" align="center">9</td> </tr></table></body>

Uso do atributo Uso do atributo frame:frame:

abaixo

Page 7: HTML Tables (Tabelas) Prof. Tales Kunz Cabral talescabral@colegiodaimaculada.com.br COLÉGIO DA IMACULADA CURSO TÉCNICO EM INFORMÁTICA 3º Módulo.

Slide nº 7

Tabelas - Exemplo<body><table frame=“hsides" border=“2" cellpadding="0" cellspacing="0" bordercolor="#111111" width="64" rules=“none" id="Tabela1"> <tr> <td width="19" align="center">A</td> <td width="19" align="center">B</td> <td width="22" align="center">C</td> </tr> <tr> <td width="19" align="center">1</td> <td width="19" align="center">4</td> <td width="22" align="center">7</td> </tr> <tr> <td width="19" align="center">2</td> <td width="19" align="center">5</td> <td width="22" align="center">8</td> </tr> <tr> <td width="19" align="center">3</td> <td width="19" align="center">6</td> <td width="22" align="center">9</td> </tr></table></body>

Uso do atributo Uso do atributo frame:frame:

lados horizontais

Page 8: HTML Tables (Tabelas) Prof. Tales Kunz Cabral talescabral@colegiodaimaculada.com.br COLÉGIO DA IMACULADA CURSO TÉCNICO EM INFORMÁTICA 3º Módulo.

Slide nº 8

Tabelas - Exemplo<body><table frame=“vsides" border=“2" cellpadding="0" cellspacing="0" bordercolor="#111111" width="64" rules=“none" id="Tabela1"> <tr> <td width="19" align="center">A</td> <td width="19" align="center">B</td> <td width="22" align="center">C</td> </tr> <tr> <td width="19" align="center">1</td> <td width="19" align="center">4</td> <td width="22" align="center">7</td> </tr> <tr> <td width="19" align="center">2</td> <td width="19" align="center">5</td> <td width="22" align="center">8</td> </tr> <tr> <td width="19" align="center">3</td> <td width="19" align="center">6</td> <td width="22" align="center">9</td> </tr></table></body>

Uso do atributo Uso do atributo frame:frame:

lados verticais

Page 9: HTML Tables (Tabelas) Prof. Tales Kunz Cabral talescabral@colegiodaimaculada.com.br COLÉGIO DA IMACULADA CURSO TÉCNICO EM INFORMÁTICA 3º Módulo.

Slide nº 9

Tabelas - Exemplo<body><table frame=“lhs" border=“2" cellpadding="0" cellspacing="0" bordercolor="#111111" width="64" rules=“none" id="Tabela1"> <tr> <td width="19" align="center">A</td> <td width="19" align="center">B</td> <td width="22" align="center">C</td> </tr> <tr> <td width="19" align="center">1</td> <td width="19" align="center">4</td> <td width="22" align="center">7</td> </tr> <tr> <td width="19" align="center">2</td> <td width="19" align="center">5</td> <td width="22" align="center">8</td> </tr> <tr> <td width="19" align="center">3</td> <td width="19" align="center">6</td> <td width="22" align="center">9</td> </tr></table></body>

Uso do atributo Uso do atributo frame:frame:

Somente lados

esquerdos

Page 10: HTML Tables (Tabelas) Prof. Tales Kunz Cabral talescabral@colegiodaimaculada.com.br COLÉGIO DA IMACULADA CURSO TÉCNICO EM INFORMÁTICA 3º Módulo.

Slide nº 10

Tabelas - Exemplo<body><table frame=“rhs" border=“2" cellpadding="0" cellspacing="0" bordercolor="#111111" width="64" rules=“none" id="Tabela1"> <tr> <td width="19" align="center">A</td> <td width="19" align="center">B</td> <td width="22" align="center">C</td> </tr> <tr> <td width="19" align="center">1</td> <td width="19" align="center">4</td> <td width="22" align="center">7</td> </tr> <tr> <td width="19" align="center">2</td> <td width="19" align="center">5</td> <td width="22" align="center">8</td> </tr> <tr> <td width="19" align="center">3</td> <td width="19" align="center">6</td> <td width="22" align="center">9</td> </tr></table></body>

Uso do atributo Uso do atributo frame:frame:

Somente lados direitos

Page 11: HTML Tables (Tabelas) Prof. Tales Kunz Cabral talescabral@colegiodaimaculada.com.br COLÉGIO DA IMACULADA CURSO TÉCNICO EM INFORMÁTICA 3º Módulo.

Slide nº 11

Tabelas - Exemplo<body><table frame=“border" border=“2" cellpadding="0" cellspacing="0" bordercolor="#111111" width="64" rules=“none" id="Tabela1"> <tr> <td width="19" align="center">A</td> <td width="19" align="center">B</td> <td width="22" align="center">C</td> </tr> <tr> <td width="19" align="center">1</td> <td width="19" align="center">4</td> <td width="22" align="center">7</td> </tr> <tr> <td width="19" align="center">2</td> <td width="19" align="center">5</td> <td width="22" align="center">8</td> </tr> <tr> <td width="19" align="center">3</td> <td width="19" align="center">6</td> <td width="22" align="center">9</td> </tr></table></body>

Uso do atributo Uso do atributo frame:frame:

tudo

Page 12: HTML Tables (Tabelas) Prof. Tales Kunz Cabral talescabral@colegiodaimaculada.com.br COLÉGIO DA IMACULADA CURSO TÉCNICO EM INFORMÁTICA 3º Módulo.

Slide nº 12

Tabelas - Exemplo<body><table frame=“border" border=“2" cellpadding=“5" cellspacing="0" bordercolor="#111111" width="64" rules=“none" id="Tabela1"> <tr> <td width="19" align="center">A</td> <td width="19" align="center">B</td> <td width="22" align="center">C</td> </tr> <tr> <td width="19" align="center">1</td> <td width="19" align="center">4</td> <td width="22" align="center">7</td> </tr> <tr> <td width="19" align="center">2</td> <td width="19" align="center">5</td> <td width="22" align="center">8</td> </tr> <tr> <td width="19" align="center">3</td> <td width="19" align="center">6</td> <td width="22" align="center">9</td> </tr></table></body>

Uso do atributo Uso do atributo cellpadding cellpadding (acolchoamento):(acolchoamento):

Espaçamento entre a borda

e a letra

Page 13: HTML Tables (Tabelas) Prof. Tales Kunz Cabral talescabral@colegiodaimaculada.com.br COLÉGIO DA IMACULADA CURSO TÉCNICO EM INFORMÁTICA 3º Módulo.

Slide nº 13

Tabelas - Exemplo<body><table frame=“border" border=“2" cellpadding=“0" cellspacing=“5" bordercolor="#111111" width="64" rules=“none" id="Tabela1"> <tr> <td width="19" align="center">A</td> <td width="19" align="center">B</td> <td width="22" align="center">C</td> </tr> <tr> <td width="19" align="center">1</td> <td width="19" align="center">4</td> <td width="22" align="center">7</td> </tr> <tr> <td width="19" align="center">2</td> <td width="19" align="center">5</td> <td width="22" align="center">8</td> </tr> <tr> <td width="19" align="center">3</td> <td width="19" align="center">6</td> <td width="22" align="center">9</td> </tr></table></body>

Uso do atributo Uso do atributo cellspacing (espaço cellspacing (espaço entre células):entre células):

Espaçamento entre a borda

e a célula

Page 14: HTML Tables (Tabelas) Prof. Tales Kunz Cabral talescabral@colegiodaimaculada.com.br COLÉGIO DA IMACULADA CURSO TÉCNICO EM INFORMÁTICA 3º Módulo.

Slide nº 14

Tabelas - Exemplo<body><table frame=“border" border=“2" cellpadding=“0" cellspacing=“0" bordercolor=“red" width="64" rules=“none" id="Tabela1"> <tr> <td width="19" align="center">A</td> <td width="19" align="center">B</td> <td width="22" align="center">C</td> </tr> <tr> <td width="19" align="center">1</td> <td width="19" align="center">4</td> <td width="22" align="center">7</td> </tr> <tr> <td width="19" align="center">2</td> <td width="19" align="center">5</td> <td width="22" align="center">8</td> </tr> <tr> <td width="19" align="center">3</td> <td width="19" align="center">6</td> <td width="22" align="center">9</td> </tr></table></body>

Uso do atributo Uso do atributo bordercolor:bordercolor:

Cor da borda

Page 15: HTML Tables (Tabelas) Prof. Tales Kunz Cabral talescabral@colegiodaimaculada.com.br COLÉGIO DA IMACULADA CURSO TÉCNICO EM INFORMÁTICA 3º Módulo.

Slide nº 15

Tabelas - Exemplo<body><table frame=“border" border=“2" cellpadding=“0" cellspacing=“0" bordercolor=“red" width=“200" rules=“none" id="Tabela1"> <tr> <td width="19" align="center">A</td> <td width="19" align="center">B</td> <td width="22" align="center">C</td> </tr> <tr> <td width="19" align="center">1</td> <td width="19" align="center">4</td> <td width="22" align="center">7</td> </tr> <tr> <td width="19" align="center">2</td> <td width="19" align="center">5</td> <td width="22" align="center">8</td> </tr> <tr> <td width="19" align="center">3</td> <td width="19" align="center">6</td> <td width="22" align="center">9</td> </tr></table></body>

Uso do atributo width Uso do atributo width (largura):(largura):

Obs.: O valor do Obs.: O valor do atributo width pode atributo width pode ser dado em pixels ser dado em pixels ou em %ou em %

Obs2.: Quando Obs2.: Quando dado em %, dado em %, significa quanto ao significa quanto ao tamanho da área.tamanho da área.

Page 16: HTML Tables (Tabelas) Prof. Tales Kunz Cabral talescabral@colegiodaimaculada.com.br COLÉGIO DA IMACULADA CURSO TÉCNICO EM INFORMÁTICA 3º Módulo.

Slide nº 16

Tabelas - Exemplo<body><table frame=“border" border=“2" cellpadding=“0" cellspacing=“0" bordercolor=“red" width=“200" rules=“groups" id="Tabela1"> <tr> <td width="19" align="center">A</td> <td width="19" align="center">B</td> <td width="22" align="center">C</td> </tr> <tr> <td width="19" align="center">1</td> <td width="19" align="center">4</td> <td width="22" align="center">7</td> </tr> <tr> <td width="19" align="center">2</td> <td width="19" align="center">5</td> <td width="22" align="center">8</td> </tr> <tr> <td width="19" align="center">3</td> <td width="19" align="center">6</td> <td width="22" align="center">9</td> </tr></table></body>

Uso do atributo rules Uso do atributo rules (regras):(regras):

agrupado

Page 17: HTML Tables (Tabelas) Prof. Tales Kunz Cabral talescabral@colegiodaimaculada.com.br COLÉGIO DA IMACULADA CURSO TÉCNICO EM INFORMÁTICA 3º Módulo.

Slide nº 17

Tabelas - Exemplo<body><table frame=“border" border=“2" cellpadding=“0" cellspacing=“0" bordercolor=“red" width=“200" rules=“rows" id="Tabela1"> <tr> <td width="19" align="center">A</td> <td width="19" align="center">B</td> <td width="22" align="center">C</td> </tr> <tr> <td width="19" align="center">1</td> <td width="19" align="center">4</td> <td width="22" align="center">7</td> </tr> <tr> <td width="19" align="center">2</td> <td width="19" align="center">5</td> <td width="22" align="center">8</td> </tr> <tr> <td width="19" align="center">3</td> <td width="19" align="center">6</td> <td width="22" align="center">9</td> </tr></table></body>

Uso do atributo rules Uso do atributo rules (regras):(regras):

Somente linhas

Page 18: HTML Tables (Tabelas) Prof. Tales Kunz Cabral talescabral@colegiodaimaculada.com.br COLÉGIO DA IMACULADA CURSO TÉCNICO EM INFORMÁTICA 3º Módulo.

Slide nº 18

Tabelas - Exemplo<body><table frame=“border" border=“2" cellpadding=“0" cellspacing=“0" bordercolor=“red" width=“200" rules=“cols" id="Tabela1"> <tr> <td width="19" align="center">A</td> <td width="19" align="center">B</td> <td width="22" align="center">C</td> </tr> <tr> <td width="19" align="center">1</td> <td width="19" align="center">4</td> <td width="22" align="center">7</td> </tr> <tr> <td width="19" align="center">2</td> <td width="19" align="center">5</td> <td width="22" align="center">8</td> </tr> <tr> <td width="19" align="center">3</td> <td width="19" align="center">6</td> <td width="22" align="center">9</td> </tr></table></body>

Uso do atributo rules Uso do atributo rules (regras):(regras):

Somente colunas

Page 19: HTML Tables (Tabelas) Prof. Tales Kunz Cabral talescabral@colegiodaimaculada.com.br COLÉGIO DA IMACULADA CURSO TÉCNICO EM INFORMÁTICA 3º Módulo.

Slide nº 19

Tabelas - Exemplo<body><table frame=“border" border=“2" cellpadding=“0" cellspacing=“0" bordercolor=“red" width=“200" rules=“all" id="Tabela1"> <tr> <td width="19" align="center">A</td> <td width="19" align="center">B</td> <td width="22" align="center">C</td> </tr> <tr> <td width="19" align="center">1</td> <td width="19" align="center">4</td> <td width="22" align="center">7</td> </tr> <tr> <td width="19" align="center">2</td> <td width="19" align="center">5</td> <td width="22" align="center">8</td> </tr> <tr> <td width="19" align="center">3</td> <td width="19" align="center">6</td> <td width="22" align="center">9</td> </tr></table></body>

Uso do atributo rules Uso do atributo rules (regras):(regras):

tudo (padrão)

Page 20: HTML Tables (Tabelas) Prof. Tales Kunz Cabral talescabral@colegiodaimaculada.com.br COLÉGIO DA IMACULADA CURSO TÉCNICO EM INFORMÁTICA 3º Módulo.

Slide nº 20

Tabelas – Exemplo Aleatório

<table border="1" cellpadding="1" cellspacing="10" bordercolor="#111111" width="59%" id="Tabela1"> <tr> <td width="100%" colspan="5">Título</td> </tr> <tr> <td width="20%">A</td> <td width="20%">B</td> <td width="20%">C</td> <td width="20%">D</td> <td width="20%">E</td> </tr> <tr> <td width="20%">F</td> <td width="20%">G</td> <td width="20%">H</td> <td width="20%">I</td> <td width="20%">J</td> </tr> <tr> <td width="20%">K</td> <td width="20%">L</td> <td width="20%">M</td> <td width="20%">N</td> <td width="20%">O</td> </tr></table>

Page 21: HTML Tables (Tabelas) Prof. Tales Kunz Cabral talescabral@colegiodaimaculada.com.br COLÉGIO DA IMACULADA CURSO TÉCNICO EM INFORMÁTICA 3º Módulo.

Slide nº 21

Tabelas – Outros Exemplos

Page 22: HTML Tables (Tabelas) Prof. Tales Kunz Cabral talescabral@colegiodaimaculada.com.br COLÉGIO DA IMACULADA CURSO TÉCNICO EM INFORMÁTICA 3º Módulo.

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

Page 23: HTML Tables (Tabelas) Prof. Tales Kunz Cabral talescabral@colegiodaimaculada.com.br COLÉGIO DA IMACULADA CURSO TÉCNICO EM INFORMÁTICA 3º Módulo.

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

Page 24: HTML Tables (Tabelas) Prof. Tales Kunz Cabral talescabral@colegiodaimaculada.com.br COLÉGIO DA IMACULADA CURSO TÉCNICO EM INFORMÁTICA 3º Módulo.

Slide nº 24

Marcas da Tabela - Exemplos

Page 25: HTML Tables (Tabelas) Prof. Tales Kunz Cabral talescabral@colegiodaimaculada.com.br COLÉGIO DA IMACULADA CURSO TÉCNICO EM INFORMÁTICA 3º Módulo.

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.