PROGRAMAÇÃO PARA INTERNET Prof.: Jean Carlo Mendes carlomendes@yahoo.com.br http://www.jeancarlomendes.com.br
HTML Tabelas - As tabelas em HTML são criadas através das tags <TABLE> e </TABLE> - Algumas propriedades: - <TABLE WIDTH= n% >: Define a largura da tabela como uma porcentagem da área da tela
HTML Tabelas - <TABLE WIDTH= n% >: Define a largura da tabela como uma porcentagem da área da tela - <TABLE WIDTH= n >: Define largura em pixels - <TABLE BORDER= n >: Define a espessura da borda em pixels
HTML Tabelas - <TABLE CELLSPACING= n >: Define o espaço entre as células - <TABLE CELLPADDING= n >: Define o espaço entre a borda de cada célula e seu conteúdo - <TABLE ALIGN= valor >: Define como a tabela será alinhada horizontalmente (LEFT, CENTER e RIGHT)
HTML Tabelas - O título da tabela pode ser definido com a tag - <CAPTION></CAPTION. Esta tag é opcional - (Caption aceita alinhamento com align) <TABLE border= 1 width= 200 > <CAPTION> <b><font face= Arial size= 3 color= red > Título</b></font> </CAPTION> </TABLE> Exemplo
HTML Tabelas - As tabelas são compostas de células que são referenciadas através de linhas e colunas. - Para se criar uma nova linha em uma tabela utiliza-se a tag <TR> e </TR> - Para se criar uma nova coluna em uma tabela utiliza-se a tag <TD> e </TD>
<Table border= 1 width= 80% > <Caption> <b><font face= arial size= 3 color= red >Configurações</font></b> </Caption> <tr> <td>processador</td> <td>intel Core i7</td> <tr> <td>memória</td> <td>8 Gb</td> </tr> </table> Exemplo
HTML Tabelas - É possivel alterar a cor de fundo das células da tabela através da cor das colunas <TD> <TR> <TD bgcolor= Silver >Processador</td> <TD>Intel Core i7</td> <TD bgcolor= Silver >Memória</td> </TR> Exemplo
HTML Tabelas Pode-se definir uma cor para a tabela e redefinir nas células: <table border= 1 width= 80% bgcolor= yellow > <tr> <td bgcolor= Silver >Processador</td> <td>intel Core i7</td> </tr> <tr> <td bgcolor= Silver >Memória</td> <td>intel Core i7</td> </tr> </table> Exemplo
HTML Tabelas O alinhamento é feito através da propriedade align da célula <TD> <table border= 1 width= 80% bgcolor= yellow > <tr> <td bgcolor= Silver >Processador</td> <td align= center > Intel Core i7</td> </tr> <tr> <td bgcolor= Silver >Memória</td> <td align= center >Intel Core i7</td> </tr> </table> Exemplo
HTML Tabelas Pode ser necessário realizar o alinhamento vertical de células Veja no, a primeira tabela por padrão mostra os textos no centro da célula. Na segunda tabela foi utilizada a tag valign para alinha o texto no topo da tabela: <td valign= top > Exemplo
Agrupando linhas ou colunas Em alguns casos os dados precisam ocupar duas ou mais colunas de uma só vez. Quando isto acontece, devemos usar o atributo COLSPAN. <tr> <td colspan= 2 align= center valign= top > Recursos Humanos</td> <td colspan= 2 align= center valign= top >Financeiro </tr> Exemplo
Agrupando linhas ou colunas O parâmetro colspan permite estender uma célula entre mais colunas. No exemplo anterior, cada célula que contêm o nome do departamento ocupa duas células. Com isto o nr de células da linha correspondente deixou de ser 4 e passou a ser 2.
Agrupando linhas ou colunas Da mesma forma que as colunas, as linhas podem ser estendidas. Isto é feito através do parâmetro rowspan Exemplo
Agrupando linhas ou colunas Vimos que ao se colocar uma borda na tabela com <table border= 1 > uma borda é colocada em volta da tabela e ao redor das células da mesma... Sem controle de exibir/ocultar linhas em específico...
Controlando o espaçamento Em alguns casos pode ser necessário controlar o espaçamento entre as células de uma tabela. Isto pode ser feito através de: Espaçamento entre as células Espaçamento dentro das células...
Controlando o espaçamento O Cellspacing controla o espaçamento entre as células O Cellpadding vai controlar o espaçamento entre a célula e seu conteúdo... Exemplo
Exercício... (3 pontos) data? Pesquisar a respeito dos atributos de tabela: frame e rules e seus possiveis valores: Exemplo: <table border= 1 frame= box rules= none > Faz com que a borda seja desenhada apenas ao redor da tabela. As células ficam sem borda. Criar uma tabela para cada variação encontrada...
Exercício... (4 pontos) data? Reproduzir a seguinte tabela...