Carregar apresentação
A apresentação está carregando. Por favor, espere
1
Prof. Tales Kunz Cabral talescabral@colegiodaimaculada.com.br
COLÉGIO DA IMACULADA CURSO TÉCNICO EM INFORMÁTICA HTML Tables (Tabelas) Prof. Tales Kunz Cabral 3º Módulo
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
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
Tabelas - Exemplo interno <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> <td width="19" align="center">1</td> <td width="19" align="center">4</td> <td width="22" align="center">7</td> <td width="19" align="center">2</td> <td width="19" align="center">5</td> <td width="22" align="center">8</td> <td width="19" align="center">3</td> <td width="19" align="center">6</td> <td width="22" align="center">9</td> </table> </body> Uso do atributo frame: interno
5
Tabelas - Exemplo acima <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> <td width="19" align="center">1</td> <td width="19" align="center">4</td> <td width="22" align="center">7</td> <td width="19" align="center">2</td> <td width="19" align="center">5</td> <td width="22" align="center">8</td> <td width="19" align="center">3</td> <td width="19" align="center">6</td> <td width="22" align="center">9</td> </table> </body> Uso do atributo frame: acima
6
Tabelas - Exemplo abaixo <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> <td width="19" align="center">1</td> <td width="19" align="center">4</td> <td width="22" align="center">7</td> <td width="19" align="center">2</td> <td width="19" align="center">5</td> <td width="22" align="center">8</td> <td width="19" align="center">3</td> <td width="19" align="center">6</td> <td width="22" align="center">9</td> </table> </body> Uso do atributo frame: abaixo
7
Tabelas - Exemplo lados horizontais <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> <td width="19" align="center">1</td> <td width="19" align="center">4</td> <td width="22" align="center">7</td> <td width="19" align="center">2</td> <td width="19" align="center">5</td> <td width="22" align="center">8</td> <td width="19" align="center">3</td> <td width="19" align="center">6</td> <td width="22" align="center">9</td> </table> </body> Uso do atributo frame: lados horizontais
8
Tabelas - Exemplo lados verticais <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> <td width="19" align="center">1</td> <td width="19" align="center">4</td> <td width="22" align="center">7</td> <td width="19" align="center">2</td> <td width="19" align="center">5</td> <td width="22" align="center">8</td> <td width="19" align="center">3</td> <td width="19" align="center">6</td> <td width="22" align="center">9</td> </table> </body> Uso do atributo frame: lados verticais
9
Somente lados esquerdos
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> <td width="19" align="center">1</td> <td width="19" align="center">4</td> <td width="22" align="center">7</td> <td width="19" align="center">2</td> <td width="19" align="center">5</td> <td width="22" align="center">8</td> <td width="19" align="center">3</td> <td width="19" align="center">6</td> <td width="22" align="center">9</td> </table> </body> Uso do atributo frame: Somente lados esquerdos
10
Somente lados direitos
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> <td width="19" align="center">1</td> <td width="19" align="center">4</td> <td width="22" align="center">7</td> <td width="19" align="center">2</td> <td width="19" align="center">5</td> <td width="22" align="center">8</td> <td width="19" align="center">3</td> <td width="19" align="center">6</td> <td width="22" align="center">9</td> </table> </body> Uso do atributo frame: Somente lados direitos
11
Tabelas - Exemplo tudo <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> <td width="19" align="center">1</td> <td width="19" align="center">4</td> <td width="22" align="center">7</td> <td width="19" align="center">2</td> <td width="19" align="center">5</td> <td width="22" align="center">8</td> <td width="19" align="center">3</td> <td width="19" align="center">6</td> <td width="22" align="center">9</td> </table> </body> Uso do atributo frame: tudo
12
Espaçamento entre a borda e a letra
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> <td width="19" align="center">1</td> <td width="19" align="center">4</td> <td width="22" align="center">7</td> <td width="19" align="center">2</td> <td width="19" align="center">5</td> <td width="22" align="center">8</td> <td width="19" align="center">3</td> <td width="19" align="center">6</td> <td width="22" align="center">9</td> </table> </body> Uso do atributo cellpadding (acolchoamento): Espaçamento entre a borda e a letra
13
Espaçamento entre a borda e a célula
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> <td width="19" align="center">1</td> <td width="19" align="center">4</td> <td width="22" align="center">7</td> <td width="19" align="center">2</td> <td width="19" align="center">5</td> <td width="22" align="center">8</td> <td width="19" align="center">3</td> <td width="19" align="center">6</td> <td width="22" align="center">9</td> </table> </body> Uso do atributo cellspacing (espaço entre células): Espaçamento entre a borda e a célula
14
Tabelas - Exemplo Cor da borda <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> <td width="19" align="center">1</td> <td width="19" align="center">4</td> <td width="22" align="center">7</td> <td width="19" align="center">2</td> <td width="19" align="center">5</td> <td width="22" align="center">8</td> <td width="19" align="center">3</td> <td width="19" align="center">6</td> <td width="22" align="center">9</td> </table> </body> Uso do atributo bordercolor: Cor da borda
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> <td width="19" align="center">1</td> <td width="19" align="center">4</td> <td width="22" align="center">7</td> <td width="19" align="center">2</td> <td width="19" align="center">5</td> <td width="22" align="center">8</td> <td width="19" align="center">3</td> <td width="19" align="center">6</td> <td width="22" align="center">9</td> </table> </body> 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
Tabelas - Exemplo agrupado <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> <td width="19" align="center">1</td> <td width="19" align="center">4</td> <td width="22" align="center">7</td> <td width="19" align="center">2</td> <td width="19" align="center">5</td> <td width="22" align="center">8</td> <td width="19" align="center">3</td> <td width="19" align="center">6</td> <td width="22" align="center">9</td> </table> </body> Uso do atributo rules (regras): agrupado
17
Tabelas - Exemplo Somente linhas <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> <td width="19" align="center">1</td> <td width="19" align="center">4</td> <td width="22" align="center">7</td> <td width="19" align="center">2</td> <td width="19" align="center">5</td> <td width="22" align="center">8</td> <td width="19" align="center">3</td> <td width="19" align="center">6</td> <td width="22" align="center">9</td> </table> </body> Uso do atributo rules (regras): Somente linhas
18
Tabelas - Exemplo Somente colunas <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> <td width="19" align="center">1</td> <td width="19" align="center">4</td> <td width="22" align="center">7</td> <td width="19" align="center">2</td> <td width="19" align="center">5</td> <td width="22" align="center">8</td> <td width="19" align="center">3</td> <td width="19" align="center">6</td> <td width="22" align="center">9</td> </table> </body> Uso do atributo rules (regras): Somente colunas
19
Tabelas - Exemplo tudo (padrão) <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> <td width="19" align="center">1</td> <td width="19" align="center">4</td> <td width="22" align="center">7</td> <td width="19" align="center">2</td> <td width="19" align="center">5</td> <td width="22" align="center">8</td> <td width="19" align="center">3</td> <td width="19" align="center">6</td> <td width="22" align="center">9</td> </table> </body> Uso do atributo rules (regras): tudo (padrão)
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> <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> <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> <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> </table>
21
Tabelas – Outros Exemplos
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
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
Marcas da Tabela - Exemplos
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.
Apresentações semelhantes
