Post on 21-Apr-2015
HTMLHTMLTables (Tabelas)Tables (Tabelas)
HTMLHTMLTables (Tabelas)Tables (Tabelas)
Prof. Tales Kunz CabralProf. Tales Kunz Cabraltalescabral@colegiodaimaculada.com.br
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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.
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
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
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
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)
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>
Slide nº 21
Tabelas – Outros Exemplos
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
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
Slide nº 24
Marcas da Tabela - Exemplos
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.