Curso de HTML/Recursos visuais avançados
Origem: Wikilivros, livros abertos por um mundo aberto.
Tabela de conteúdo |
[editar] Tabelas
Para se iniciar uma tabela dentro do documento html usa-se a tag table, porém são necessárias as tags td e tr para construí-la.
<table>
<tr>
<td>Uma célula</td>
<td>Outra célula</td>
</tr>
<tr>
<td>Uma célula em quebra de coluna</td>
<td>Uma última tabela</td>
</tr>
</table>
A saída seria:
| Uma célula | Outra célula |
| Uma célula em quebra de coluna | Uma última tabela |
[editar] Parâmetros de Table
Para se manipular o aspecto gráfico e a disposição de uma tabela usam-se vários parâmetros
[editar] Width
width dá o comprimento da tabela na página. Um comprimento width pode ter o seu valor em pixels ou em percentagem de espaço. 100% representa a ocupação máxima do espaço disponível para a tabela.
<!-- A tabela tem de largura 250 pixels -->
<table width="250">
<tr>
<td>Tabela de uma célula</td>
</tr>
</table>
<!-- A tabela ocupa 70% do espaço disponível para ela -->
<table width="70%">
<tr>
<td>Table de uma célula</td>
</tr>
</table>
A saída desta última tabela é:
| Table de uma célula |
[editar] Height
Assim como width o parâmetro height comporta-se da mesma maneira, alterando a altura da tabela.
<table height="150">
<tr>
<td>Uma célula</td>
</tr>
</table>
A saída é:
| Uma célula |
[editar] Border, Bgcolor e bdcolor
Border define a espessura da borda da tabela; Bgcolor define a cor de fundo da tabela; Bdcolor ou bordercolor define a cor da borda da tabela;
<table border="4" bdcolor="green" bgcolor="grey">
<tr>
<td>Uma mistura de cores berrante!</td>
</tr>
</table>
A saída seria:
| Uma mistura de cores berrante! |
[editar] Cellpadding
Cellpadding aumenta ou diminui a borda interior em cada célula.
<table cellpadding="5">
<tr>
<td>Padding 5</td>
</tr>
</table>
A saída é:
| Padding 5 | Outra célula |
[editar] Cellspacing
Aumenta o espaço entre células.
<table cellspaccing="5">
<tr>
<td>CellSpacing é 5</td>
</tr>
</table>
| CellSpacing é 5 | Outra célula |
| Repare no espaço que elas têm entre si | |
[editar] <td>
No corpo da tabela existem várias tags que representam a forma como os dados são visualizados: assim são controladores da organização do espaço. <td> representa o conteúdo dentro de uma tabela. td quer dizer table data.
<table> <tr> <td>Conteúdo</td> </tr> </table>
[editar] <tr>
<tr> controla e incrementa uma nova linha na tabela. tr quer dizer table row.
<table> <tr> <!-- Linha de começo é sempre necessária --> <td> </tr> <tr> <!-- Nova linha --> </tr> </table>
[editar] <th>
<th> é a linha mestra e não pode ser deformada por outras de nível inferior, sendo assim qualquer uma das outras terá que se ajustar a esta. Embora seja aconselhável a inserção desta tag numa das linhas que queremos para mestra, não é necessária actualmente pois os ajustes da tabela são feitos pelo conteúdo da tag style.
<table> <th> <td></td> </th> <tr> <td></td> </tr> </table>
[editar] Imagens
Podemos criar imagens usando a marcação img.
Exemplo:
<img src="imagem.jpg" alt="A minha imagem">
Neste caso nós estamos a requisitar a imagem denominada imagem.jpg incluindo o parâmetro src e damos-lhe um comentário com o parâmetro alt. Estes dois são os parâmetros obrigatórios exigidos pela W3C. Existem mais opções para alteração do aspecto da imagem:
[editar] Width
Para se alterar a largura da imagem recorre-se ao parâmetro width
<!-- Altera a largura da imagem para 200 pixels --> <img src="imagem.jpg" alt="A minha imagem" width="200"> <!-- Altera a largura da imagem para 75% do seu valor real --> <img src="imagem.jpg" alt="A minha imagem" width="75%">
[editar] Height
Pode-se alterar a altura da imagem com o parâmetro height através da referência por percentagem % assim como por pixelagem px
<!-- Altera a largura e a altura da imagem para 200 e 100 pixels respectivamente --> <img src="imagem.jpg alt="A minha imagem" width="200" height="100"> <!-- Altera somente a altura da imagem para 150 pixels --> <img src="imagem.jpg" alt="A minha imagem" height="150">
É necessário ter sempre em atenção o uso do parâmetro alt numa imagem para assegurar a compatibilidade com as normas da W3C. Se não se quiser comentar nada na imagem pode-se somente deixar em branco o valor de alt.
[editar] Align
Podemos sempre alinhar as imagens na página para torná-la mais agradável e atraente. Para isso usa-se o parâmetro align
<!-- Alinhar uma imagem à direita --> <img src="imagem.jpg" alt="Uma imagem alinhada à direita" align="right">
[editar] Border
Por padrão uma imagem que é inserida no documento HTML apresenta uma borda de 2 pontos de espessura. Com o parâmetro border é possível diminuir, retirar ou aumentar essa borda em torno da imagem.
Para mudar a cor da borda inserida diretamente na imagem, utilizar a seguinte linha de comando:
<img src="imagem.jpg" alt="Uma imagem bem contornada" style = "border:#ffcc66 sold 10px;">
Normalmente usa-se uma técnica muito mais atraente: contornar a imagem com uma tabela.
<!-- Aumentar para 4 pontos a borda da imagem -->
<img src="imagem.jpg" alt="Uma imagem!" border="4">
<!-- Fazer desaparecer a borda em volta da imagem -->
<img src="imagem.jpg" alt="Uma imagem sem borda" border="0">
<!-- Usar uma tabela para contornar a imagem -->
<table border="4" bdcolor="green" cellpadding="0" cellspacing="0">
<tr>
<td><img src="imagem.jpg" alt="Uma imagem bem contornada" border="0"></td>
</tr>
</table>
[editar] Links
Para fazermos uma imagem com uma hiperligação basta usar a tag a como se usa no texto.
<a href="http://www.dominio.com/pagina" target="_parent"> <img src="imagem.jpg" alt="Imagem com ligação" border="0"> </a>
[editar] Curiosidade
Podemos criar uma galeria de imagens clicáveis usando todos os parâmetros de cima. Encolhemos as imagens e criamos um link à imagem original, organizando-as dentro de uma tabela.
<table width="300" border="1" bdcolor="grey" cellpadding="1" cellspacing="1">
<tr>
<td width="100" height="100"><a href="imagem1.jpgl"><img src="imagem1.jpg" alt="Imagem 1"
width="200" height="200" border="0"></a></td>
<td width="100" height="100"><a href="imagem2.jpgl"><img src="imagem2.jpg" alt="Imagem 2"
width="200" height="200" border="0"></a></td>
<td width="100" height="100"><a href="imagem3.jpgl"><img src="image3.jpg" alt="Image 3"
width="200" height="200" border="0"></a></td>
</tr>
<tr>
<td width="100" height="100"><a href="imagem4.jpgl"><img src="imagem4.jpg" alt="Imagem 1"
width="200" height="200" border="0"></a></td>
<td width="100" height="100"><a href="imagem5.jpgl"><img src="imagem5.jpg" alt="Imagem 2"
width="200" height="200" border="0"></a></td>
<td width="100" height="100"><a href="imagem6.jpgl"><img src="image6.jpg" alt="Image 3"
width="200" height="200" border="0"></a></td>
</tr>
</table>
A Saída dentro de um browser teria o seguinte aspecto (ao clicar-se numa imagem, abrir-se-á na mesma janela a respectiva imagem, mas no tamanho normal):
Índice - Texto | Recursos meta
