PARTE - 6
HTML Página 36 Índice Tabelas... 37 Construindo tabelas Marcação TABLE... 37 Título da Tabela Marcação CAPTION... 37 Cabeçalho da tabela (table headings) Marcação TH... 37 Dados da tabela (table data) Marcação TD... 37 Fim de uma linha na Tabela (end of table row) Marcação TR... 37 Resumo dos Elementos básicos de tabelas... 37 Atributo Border... 38 Alinhamento dentro da célula Atributo ALIGN... 39 Atributos de Largura Marcação WIDTH... 39 Atributos de espaçamento CELLSPACING e CELLPADDING... 40 Cor de segundo plano para a tabela - Atributo BGCOLOR... 41 Cor da borda da tabela - Atributo BORDERCOLOR... 42 Imagem de fundo na tabela - Atributo BACKGROUND... 43 Títulos compreendendo mais de uma coluna ou linha... 44 Atributos COLSPAN e ROWSPAN... 44 Alinhamento do texto em relação às bordas superior e inferior... 45 Atributo VALIGN... 45
HTML Página 37 Tabelas Tabelas correspondem a um ótimo formato para originar informações, e é por essa razão que eles foram acrescentados à linguagem HTML Construindo tabelas Marcação TABLE A TAG <TABLE> é utilizada para a representação de dados tabulares. A estrutura e o conteúdo da tabela devem ficar dentro das TAGs <TABLE> </TABLE> Título da Tabela Marcação CAPTION A TAG <CAPTION> especifica o título de uma tabela. Por exemplo: <CAPTION>Tabela de Cores</CAPTION> Cabeçalho da tabela (table headings) Marcação TH A TAG <TH> é usada para especificar as células de cabeçalho da tabela. Essas células são diferentes das outras, pois seu conteúdo aparece geralmente em negrito. O elemento TH pode ser apresentado sem conteúdo algum: isso corresponde a uma célula em branco. As tabelas podem ainda conter mais de um TH para uma dada coluna, ou linha, ou simplesmente não conter nenhum elemento TH, isto é, não conter em nenhuma célula em destaque. O TAG dela é: <HT>texto em destaque</ht> Dados da tabela (table data) Marcação TD A TAG <TD> especifica a células de dados de uma tabela. Por se tratar de dados comuns (e não cabeçalhos), essas células possuem seu conteúdo escrito em fonte normal, sem nenhum destaque e alinhamento à esquerda. Assim como o TH, podem-se construir células em branco, usando o elemento TD, como no exemplo a seguir: <TD>Células de dados</td> Fim de uma linha na Tabela (end of table row) Marcação TR A TAG <TR> indica o fim de uma linha na tabela. Cada linha da tabela pode conter várias células, e, portanto, é necessário que se faça uso de uma marcação que indique exatamente o ponto de quebra de uma linha e início de outra. Toda linha deve terminar com um <TR>, com exceção da última linha da tabela, que dispensa o TR porque o uso da própria marcação de fim de tabela </TABLE> torna implícito o fim da linha. Resumo dos Elementos básicos de tabelas Inicia Finaliza Uso <TABLE> </TABLE> Delimita uma tabela. Um atributo básico é BORDER, que indica a apresentação da borda. <TABLE BORDER> ou <TABLE BORDER= 3 > <CAPTION> </CAPTION> Define o título da tabela <TR> </TR> Delimita uma linha <TH> </TH> Define um cabeçalho para colunas ou linhas (dentro de <TR>) <TD> </TD> Delimita um elemento ou célula (dentro de <TR>)
HTML Página 38 Atributo Border O atributo BORDER pode também receber um valor que vai estabelecer qual a espessura (além da existência)da linha de borda da tabela (BORDER="valor"). Se o valor atribuído for 0 (zero), o BORDER funciona exatamente como o caso padrão, sem o BORDER. Dessa maneira, é possível colocar tabelas em maior destaque, atribuindo um valor maior que 1 para o BORDER.
HTML Página 39 Alinhamento dentro da célula Atributo ALIGN Este atributo pode ser aplicado a TH, TD ou TR e controlam o alinhamento do texto dentro de uma célula, com ralação as bordas laterais. Quando aplicado a TR, ele define o alinhamento de toda uma linha da tabela O exemplo abaixo, mostra como o ALIGN aceita os valores LEFT, CENTER ou RIGHT, para alinhar à esquerda, centralizar ou alinhar à direita, respectivamente. Atributos de Largura Marcação WIDTH Para apresentar uma tabela ocupando determinado espaço disponível na linha, usamos o atributo WIDTH. Esse atributo pode ser aplicado também a linhas e células. Essa largura pode ser definida em porcentagem (do espaço disponível).
HTML Página 40 2 Alterando a largura de uma coluna da tabela. Atributos de espaçamento CELLSPACING e CELLPADDING Dois atributos permitem o controle de espaçamento em tabelas: CELLPADDING - espaço entre o texto e as bordas da célula; 1
HTML Página 41 CELLSPACING - espaço entre células. 2 Cor de segundo plano para a tabela - Atributo BGCOLOR
HTML Página 42 Cor da borda da tabela - Atributo BORDERCOLOR
HTML Página 43 Imagem de fundo na tabela - Atributo BACKGROUND
HTML Página 44 Títulos compreendendo mais de uma coluna ou linha Atributos COLSPAN e ROWSPAN É possível englobar colunas e linhas, através dos atributos COLSPAN (para colunas) e ROWSPAN (para linhas). Nestes exemplos, vemos que o cabeçalho Colunas 1 e 2 compreendem duas colunas (COLSPAN=2); o cabeçalho 3 linhas compreende, por sua vez, 3 linhas (ROWSPAN=3).
HTML Página 45 Alinhamento do texto em relação às bordas superior e inferior Atributo VALIGN Pode ser aplicado a TH e TD e define o alinhamento do texto em relação às bordas superior e inferior. Aceita os valores TOP, MIDDLE, e BOTTOM para alinhar na parte de cima, no meio e na parte de baixo, respectivamente.