Curso de HTML/Fundamentos/Os elementos do HTML/Dados tabulares: diferenças entre revisões
[edição não verificada] | [edição não verificada] |
Linha 246: | Linha 246: | ||
Apesar de ser interessante dividir a tabela em partes (thead, tbody e tfoot), isso não é muito utilizado. |
Apesar de ser interessante dividir a tabela em partes (thead, tbody e tfoot), isso não é muito utilizado. |
||
Procure não criar o |
Procure não criar o layout do seu site com tabelas, elas foram criadas para exibir dados. Para o desenho do seu site, use a tag ''div''. |
||
=== Imagens === |
=== Imagens === |
Revisão das 14h21min de 17 de maio de 2006
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 contruí-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 |
Parâmentros de Table
Para se manipular o aspecto gráfico e a disposição de uma tabela usam-se vários parâmetros
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 comprimento 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 |
Height
Assim como width o parâmetro heidth comporta-se da mesma maneira, alterando a altura da tabela.
<table heidth="150"> <tr> <td>Uma célula</td> </tr> </table>
A saída é:
Uma célula |
Border, Bgcolor e bdcolor
Border define a espessura da borda da tabela Bgcolor define a cor de fundo da tabela Bdcolor 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! |
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 |
Cellspacing
Aumenta o espaço entre células.
<table cellspaccing="0"> <tr> <td>CellSpacing é 5</td> </tr> </table>
<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>
<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>
<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 aconcelhável a colocaçã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>
Um exemplo:
Uma pequena matriz:<br> <table> |
Uma pequena matriz:
|
A marcação tr significa table row, ou seja, uma linha da tabela.
A marcação td significa table data, ou seja, uma célula da tabela.
Este é um exemplo básico de tabela, que normalmente é utilizado para pequenas apresentações de dados. Existem também outras marcações mais avançadas usadas em tabelas:
A marcação th significa table header, ou seja, as colunas da tabela
A marcação thead significa table head, ou seja, o cabeçalho da tabela (contém o cabeçalho e o título) A marcação tfoot significa table foot, ou seja, o rodapé da tabela (contém o cabeçalho e o título)
A marcação tbody significa table body, ou seja, o corpo da tabela (contém as células com os dados)
A marcação caption siginifica, em interpretação, título, ou seja, o título da tabela.
Além das marcações internas, a marcação table pode conter atributos como sumary, sem contar os atributos padrão para todas as marcações HTML/XHTML (id, class). Muitos outros atributos não estão sendo utilizados, simplesmente pela facilidade que o CSS oferece para a manutenção. São eles:
border indica o tamanho da borda (pixels)
cellspacing indica o espaço entre as células (pixels)
cellpadding indica a margem interna das células (pixels)
align alinha a tabela - retirada do XHTML (left, center ou right)
bgcolor indica a cor de fundo - retirada do XHTML (RGB #FFFFFF ou nome da cor em inglês)
width indica a largura (pixels ou porcentagem)
A matriz do exemplo anterior com nome nas colunas, borda e título:<br> <table summary="Esta tabela é somente um exemplo" border="1"> |
A matriz do exemplo anterior com nome nas colunas:
|
Apesar de ser interessante dividir a tabela em partes (thead, tbody e tfoot), isso não é muito utilizado.
Procure não criar o layout do seu site com tabelas, elas foram criadas para exibir dados. Para o desenho do seu site, use a tag div.
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:
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%">
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.
Align
Podemos sempre alinhar as imagens na página para torná-la mais agradávle e atraente. Para isso usa-se o parâmetro align
<!-- Alinhar uma imagem à direita --> <img src="imagem.jpg" alt="Uma imagem linhada à direita" align="right">
Border
Por defeito 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. Embora este procedimento de usar border para contornar a imagem seja fácil ele não é muito útil pois não é possível alterar a cor da borda, ficando esta ao critério do browser que o visitante usa. 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>
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>
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.jpg"><img src="imagem1.jpg" alt="Imagem 1" width="200" height="200" border="0"></a></td> <td width="100" height="100"><a href="image2.jpg"><img src="imagem2.jpg" alt="Imagem 2" width="200" height="200" border="0"></a></td> <td width="100" height="100"><a href="image3.jpg"><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.jpg"><img src="imagem4.jpg" alt="Imagem 1" width="200" height="200" border="0"></a></td> <td width="100" height="100"><a href="image5.jpg"><img src="imagem5.jpg" alt="Imagem 2" width="200" height="200" border="0"></a></td> <td width="100" height="100"><a href="image6.jpg"><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 (qualquer imagem tem uma ligação para ela própria):