Curso de HTML/Fundamentos/Os elementos do HTML/Dados tabulares: diferenças entre revisões

Origem: Wikilivros, livros abertos por um mundo aberto.
[edição não verificada][edição não verificada]
Conteúdo apagado Conteúdo adicionado
Lightningspirit (discussão | contribs)
X spager (discussão | contribs)
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 leiaute do seu site com tabelas, elas foram criadas para exibir dados. Para o desenho do seu site, use a tag ''div''.
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>
<tr>
 <td>1</td><td>0</td>
</tr>
<tr>
 <td>0</td><td>1</td>
</tr>
</table>

Uma pequena matriz:



 


 

10
01

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">
<caption>Tabela de exemplo</caption>
<tr>
 <th>Coluna1</th><th>Coluna2</th>
</tr>
<tr>
 <td>1</td><td>0</td>
</tr>
<tr>
 <td>0</td><td>1</td>
</tr>
</table>

A matriz do exemplo anterior com nome nas colunas:



 

 


 

Tabela de exemplo
Coluna1Coluna2
10
01

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):


Índice - Texto |