O elemento para definição de uma tabela é <TABLE> sendo finalizada com </TABLE>. Este elemento prevê sub-elementos para sua composição.

Tamanho: px

Começar a partir da página:

Download "O elemento para definição de uma tabela é <TABLE> sendo finalizada com </TABLE>. Este elemento prevê sub-elementos para sua composição."

Rubens Caminha Sampaio
6 Há anos
Visualizações:

1 HTML Tabelas O elemento para definição de uma tabela é <TABLE> sendo finalizada com. Este elemento prevê sub-elementos para sua composição. 1. Sub-elemento Título O título de uma tabela é definido pela TAG <CAPTION> e requer finalização por meio de da TAG </CAPTION> Por exemplo: <CAPTION>CUSTO</CAPTION> 2. Sub-elemento Cabeçalho O cabeçalho de uma tabela é definido pela TAG <TH> ela requer finalização por meio de </TH>. Com ela especificamos 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. As tags <TH> devem ficar, assim como todas, dentro da TAG <TABLE>. <TH>titulo da coluna UM</TH> <TH>titulo da coluna DOIS</TH> 3. Sub-elemento Linha O sub-elemento tem a finalidade de definir uma linha em uma tabela. A finalização da linha é indicado por </TR> linha de dados</tr> 4. Sub-elemento Celula A TAG <TD> especifica a células de dados de uma tabela em uma linha. Por tando deve ficar entre as TAG </TR> <TD>Célula de dados</td> <html> Nota de Aula Tecnologia Web 1

2 <head> </head> <body> <table > <CAPTION>TITULO: TABELA EXEMPLO</CAPTION> <th>cabeçalho DA COL. UM</th> <th>cabeçalho DA COL. DOIS</th> <td >Elemento da coluna UM(1) linha UM(1)</td> <td >Elemento da coluna DOIS(2) linha UM(1)</td> <td >Elemento da coluna UM(1)1 linha 2</td> <td >Elemento da coluna DOIS(2) linha DOIS(2)</td> </table> <br> </body> </html> Resultado obtido no navegado (Browser): Nota de Aula Tecnologia Web 2

3 5. Atributos de Tabela Os atributos de uma tabela qualificam a tabela como um todo ou suas celulas. 5.1 Atributos do elemento <TABLE> BORDER É um atributo opcional, definido em pixels, para ser usado com TABLE. Se ele estiver presente, a tabela será formatada com linhas de borda cuja dimensão espessura corresponde ao valor numerico definido. <TABLE BORDER=2> <TABLE BORDER> <CAPTION> Nota da primeira avaliação </CAPTION> <TD>Notas/Alunos</TD> <TH>Eduardo</TH> <TH>Ana Lúcia</TH> <TH>Andréa</TH> <TH>Notas</TH> <TD>8,0</TD> <TD>9.3<TD> <TD>7.8</TD> <TH>No de Inscrição</TH> <TD> </TD> <TD> </TD> <TD> </TD> Resultado OBS: A presença do atributo BORDER indica justamente que deve ser desenhada uma borda em torno de cada célula da tabela Nota de Aula Tecnologia Web 3

4 5.1.2 ALIGN O atributo ALIGN posiciona a tabela em relação a pagina html podendo ter os seguintes valores: letf, center ou right CELLSPACING O atributo CELLSPACING, definido em pixels, na tag <TABLE> determina o espaçamento entre as celulas. O default deste parametro é 2 pixels CELLPADDING O atributo CELLPADDING, definido em pixels, na tag <TABLE> determina o espaçamento entre o texto e a borda da celula. O default deste parâmetro é 1 pixel BGCOLOR O atributo BGCOLOR define uma cor de fundo para a tabela <TABLE BGCOLOR="#AAFF00"> BACKGROUND O atributo BACKGROUND define uma imagem de fundo para a tabela. <TABLE BACKGROUND="imagemA.gif"> BORDERCOLOR O atributo BORDERCOLOR define uma cor para a borda da tabela. <TABLE BORDERCOLOR= "red"> 5.2 Atributos dos sub-elementos <TD> e <TH> ALIGN O atributo ALIGN posiciona o conteudo horizontalmente, dentro da celula. Ele pode ter os seguintes valores: letf, center ou right. <TABLE BORDER=2> Primeira célula</tr> Segunda célula</tr> Terceira célula</tr> Nota de Aula Tecnologia Web 4

5 <TD ALIGN="CENTER">conteudo Centro</TD> <TD ALIGN="LEFT">conteudo a Esquerda</TD> <TD ALIGN="RIGHT">conteudo a Direita</TD> VALIGN O atributo VALIGN posiciona o conteudo verticalmente, dentro da celula. Ele pode ter os seguintes valores: top, middle ou bottom. <TABLE BORDER> <TD>Teste de alinhamento</td> <TD VALIGN="TOP">TOP</TD> <TD VALIGN="middle">MIDDLE</TD> <TD VALIGN="bottom">BOTTOM</TD> </TR> Resultdo: ROWSPAN Especifica o número de linhas a serem ocupados por uma célula. Utilizado para expandir uma célula verticalmente, também assume o valor default de 1 em todas as células. A expansão ocorre para baixo, assim ao atribuir ROWSPAN =2 para uma célula, diminua em 1 o número de células da linha de baixo. <table> <th rowspan="3">numbers</th><td>1</td> <td>2</td> <td>3</td> </table> COLSPAN Especifica o número de colunas de uma tabela a serem ocupados por uma célula. Utilizado portando para expandir uma célula horizontalmente, tem como default o valor 1 em todas as células. Se atribuirmos COLSPAN=2 a uma célula, ela ocupará o seu espaço e o espaço de mais uma célula para a direita, assim esta linha deverá possuir uma célula a menos que as demais, já Nota de Aula Tecnologia Web 5

6 que uma de suas células "vale" por duas WIDTH O atributo WIDTH determina a largura da coluna,pode ser definido em pixels ou em porcentagem em relação ao tamanho da tabelas <TABLE width="400"> BGCOLOR O atributo BGCOLOR permite definir uma cor para a celula NOWRAP <TABLE border="0" width=79%>... <TD bgcolor="#031535" > celula 1</TD> <TD bgcolor="#081578" > celula 2</TD> </TR>... Quando este atributo encontra-se associado a uma célula, o navegador entende que o texto dentro daquela célula não pode ser dividido em mais de uma linha Significa que toda a coluna terá o mesmo tamanho que o texto nela contido. Este atributo deve ser utilizado com cuidado, para evitar colunas demasiadamente largas. Exemplo 1: <table border> <th colspan=3>vendas de Automóveis no Varejo por Fabricante <th align=left>fabricante <th align=right>1995 <th align=right>1996 <td>fiat <td align=right> <td align=right> Nota de Aula Tecnologia Web 6

7 <td>ford <td align=right> <td align=right> <td>general Motors <td align=right> <td align=right> <td>volkswagem <td align=right> <td align=right> </table> Resultado: Vendas de Automóveis no Varejo por Fabricante Fabricante Fiat Ford General Motors Volkswagem Exemplo 2: <table align="center" bgcolor="#bbffbb" border="2" cellpadding="5" cellspacing="5" width="90%"> <caption align="bottom">exemplo 2: Uma tabela mais elaborada </caption> <th colspan="4" bgcolor="aqua">vendas de Automóveis no Varejo por Modelo </th> <tr bgcolor="#ffccc8"> <th>fabricante </th> <th align="left" nowrap="nowrap">marca (incluindo todos os modelos e categorias) </th> <th align="right">2008 </th> <th align="right">2009 </th> <th rowspan="2" bgcolor="yellow" valign="top">fiat </th> <td>siena </td> <td align="right"> </td> <td align="right"> </td> <td>palio </td> <td align="right"> </td> <td align="right"> </td> <th bgcolor="lime" valign="top">ford </th> <td>fiesta </td> <td align="right"> </td> <td align="right"> </td> <th rowspan="3" bgcolor="silver" valign="top">general Motors </th> <td>corsa </td> <td align="right"> </td> <td align="right"> </td> Nota de Aula Tecnologia Web 7

8 <td>monza </td> <td align="right"> </td> <td align="right"> </td> <td>vectra </td> <td align="right"> </td> <td align="right"> </td> <th rowspan="2" bgcolor="red" valign="top">volkswagem <td>gol </td> <td align="right"> </td> <td align="right"> </td> <td>parati </td> <td align="right"> </td> <td align="right"> </td> </table> </th> Resultado: Vendas de Automóveis no Varejo por Modelo Fabricante Marca (incluindo todos os modelos e categorias) Fiat Siena Palio Ford Fiesta General Motors Corsa Monza Vectra Volkswagem Gol Exemplo 2: Uma tabela mais elaborada Nota de Aula Tecnologia Web 8

Documentos relacionados

HTML Página 36. Índice

HTML Página 36. Índice 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