HTML Sessão 4 HTML Criação de Páginas WEB Tabelas É por vezes interessante fazer com que uma célula “se expanda” de forma a “incorporar” a célula imediatamente abaixo ou ao lado (o que em folhas de cálculo como o Microsoft Excel se denomina “unir células”). Para conseguir este efeito, utilizamos os atributos rowspan e colspan, aos quais devemos atribuir como valor o número de, respectivamente, linhas ou colunas que a nossa célula vai ocupar. 1 Criação de Páginas WEB Tabelas Tags e Atributos utilizáveis em Tabelas Tags TABLE TR Atributos Nenhum Nenhum TH COLSPAN ROWSPAN ALIGN COLSPAN ROWSPAN ALIGN TD Significado Identifica uma tabela Identifica uma linha nova na tabela Número de colunas expandidas Número de linhas expandidas Alinhamento da célula Número de colunas expandidas Número de linhas expandidas Alinhamento da célula Criação de Páginas WEB Tabelas Tags e Atributos utilizáveis em Tabelas Atributos Significado Align Background Alinha horizontalmente a tabela em relação ao seu entorno. Permite-nos colocar um fundo para a tabela desde um link a uma imagem. Dá cor de fundo à tabela. Define o número de pixeis da borda principal. Define a cor da borda. Define, em pixeis, o espaço entre as bordas da célula e o conteúdo da mesma. Define o espaço entre as bordas (em pixeis). Define a altura da tabela em pixeis ou percentagem. Define a largura da tabela em pixeis ou percentagem. Bgcolor Border Bordercolor Cellpadding Cellspacing Height Width 2 Criação de Páginas WEB Tabelas <html> <head> <title>Exemplo 15</title> </head> <body> <h1>Tabela</h1> <hr> <table border="1" width="25%"> <tr align="center"> <td rowspan="2"> Um </td> <td> <b>Dois</b> </td> <td> <u>Três</u> </td> </tr> <tr align="center"> <td colspan="2"> Quatro </td> </tr> </table> </body> </html> 1) Abrir o ficheiro modelo2.txt com o bloco de notas e digitar o seguinte código HTML: Guardar o ficheiro com o nome exemp15.html e testar no IE Criação de Páginas WEB Tabelas 3 Criação de Páginas WEB Tabelas <html> <head> 1) Abrir o ficheiro modelo2.txt com o bloco <title>Exemplo 15a</title> de notas e digitar o seguinte código HTML: </head> <BODY BGCOLOR="#000000" TEXT="#FFFFFF"> <TABLE BGCOLOR="#000099" ALIGN="CENTER" WIDTH="400" HEIGHT="300" BORDER="3"> <TR> <TD ALIGN="CENTER" COLSPAN="3"> 1 </TD> </TR> <TR> <TD ALIGN="CENTER" ROWSPAN="2"> 2 </TD> <TD ALIGN="CENTER" ROWSPAN="2"> 3 </TD> <TD ALIGN="CENTER"> 4 </TD> </TR> <TR><TD ALIGN="CENTER"> 5 </TD></TR> </TABLE> </body> </html> Guardar o ficheiro com o nome exemp15a.html e testar no IE Criação de Páginas WEB Tabelas 4 Criação de Páginas WEB Tabelas Recapitulando alguns atributos: align - alinhamento da tabela: left, right ou center; width - largura da tabela, em pixeis ou em percentagem em relação ao tamanho da janela; height - altura da tabela, em pixeis ou em percentagem em relação ao tamanho da janela; border - espessura da borda da tabela; bgcolor - cor do fundo da tabela; bordercolor - cor das bordas da tabela das bordas das células; bordercolorlight - cor das bordas esquerda e superior da tabela e das bordas inferiores das células; bordercolordark - cor das bordas direita e inferior da tabela e das bordas superiores das células; rowspan - número de linhas que a célula pode ocupar; colspan - número de colunas que a tabela pode ocupar; Criação de Páginas WEB Tabelas <html> <head> <title>Exemplo 15b</title> </head> <BODY> 1) Abrir o ficheiro modelo2.txt com o bloco de notas e digitar o seguinte código HTML: <TABLE align ="center" width="90%" border="15" bordercolorlight="#3300ff" bordercolordark="#ff00CC" bgcolor="#ffffff"> <TR> <TH rowspan="2">1 - duas linhas</TH> <TH colspan="2">1 - duas colunas</TH> <TH colspan="2">2 - duas colunas</TH> </TR> <TR> <TD>1 - célula simples</TD> <TD>2 - célula simples</TD> <TD>3 - célula simples</TD> <TD>4 - célula simples</TD> </TR> Continua….. 5 Criação de Páginas WEB Tabelas <TR> <TH rowspan="2">2 - duas linhas</TH> <TH colspan="2">3 - duas colunas</TH> <TH colspan="2">4 - duas colunas</TH> </TR> <TR> <TD>5 - célula simples</TD> <TD>6 - célula simples</TD> <TD>7 - célula simples</TD> <TD>8 - célula simples</TD> </TR> </TABLE> </BODY> </html> Guardar o ficheiro com o nome exemp15b.html e testar no IE Criação de Páginas WEB Tabelas 6 Criação de Páginas WEB Tabelas <html> <head> 1) Abrir o ficheiro modelo2.txt com o bloco <title>Exemplo 15c</title> de notas e digitar o seguinte código HTML: </head> <BODY> <table align="right" width="80%" height="50%" border="3" bgcolor="#ffff00"> <tr> <th>Linha 1 Coluna 1</th> <th>Linha 1 Coluna 2</th> </tr> <tr> <td>Linha 2 Coluna 1</td> <td>Linha 2 Coluna 2</td> </tr> </table> Observe!!!<p> escrevendo<br> ao<br> lado<br> dessa<br> tabela<br> aí<br> à<br> direita!!!!!!!<br> !!!!!!!!!!!!!! </BODY> </html> Guardar o ficheiro com o nome exemp15c.html e testar no IE Criação de Páginas WEB Tabelas 7
Download
