Curso de HTML - Aula 8

As tabelas são um recurso muito útil na montagem de páginas, sendo elas divididas em linhas e colunas. Quando uma linha e uma coluna se encontram formam o que chamamos de célula.

Por | @jonathanlamimkt Programação
As tabelas são um recurso muito útil na montagem de páginas, sendo elas divididas em linhas e colunas. Quando uma linha e uma coluna se encontram formam o que chamamos de célula.

Elas são utilizadas para agrupar informações, dividir páginas, posicionar textos e imagens que precisem dividir um mesmo espaço na página, enfim, podem ser utilizadas em várias situações.

A Tag principal de uma tabela é ...
, marcando respectivamente o início e o fim de uma tabela.

Sintaxe:

	        align=”alinhamento”
        cellspacing=”espaço entre as células”
        cellpading=”distância do conteúdo para a borda da célula”
        bgcolor=”cor de fundo da tabela/célula”
                bordercolor=”cor da borda da tabela”
                bordercolordark=”cor da borda escura”
                bordercolorlight=”cor da borda clara” >

Vejamos agora detalhes sobre cada um dos parâmetros.

1) Border: define a espessura da borda da tabela, valor dado em pixels e caso seja omitido a tabela não apresentará bordas.

2) Align: define o alinhamento horizontal da tabela (left= esquerdo; center=centro; right=direito).

3) Cellspacing: define o espaço existente entre as células, e seu padrão é 2. Lembre-se que o valor é dado em pixels.

4) Cellpading: define o espaço entre os dados de uma célula e a sua borda, seu padrão é 1 e também é dado em pixels.

5) Bgcolor: define a cor de fundo para cada célula da tabela. Deve ser especificado com base no sistema de numeração hexadecimal.

6) Bordercolor: define a cor das bordas da tabelas.

7) Bordercolordark e Bordercolorlight: define, respectivamente,  a cor mais escura e mais clara da borda, dando um efeito tridimensional à mesma.

Vimos até aqui os parâmetros da Tag principal para monagem de tabelas. Agora vamos ver as Tags “secundárias”, que criarão as linhas e as colunas e os seus parâmetros.

  -  Cria linha na tabela

Essa Tag ... é responsável por criar linhas na tabela, e tudo o que estiver dentro dela estará em uma mesma linha.

é responsável por criar as colunas na tabela. Ela deve ser colocada sempre entre ....

define o cabeçalho de uma coluna. A diferença entre serão colocados em negrito e centralizados.

  define um cabeçalho para a tabela, e será colocado logo no início, não fazendo parte de nenhuma de suas células.

Como parâmetros de
e e
  -  Cria coluna na tabela

Essa Tag
...
  -  Cabeçalho de uma coluna

Essa Tag
... e é que os dados ente ...
  - Cabeçalho de uma tabela

Essa Tag
...
temos:

1) Valign: define o alinhamento vertical das informações.  Os valores possíveis para este parâmetro são:
a) baseline: mantém as linhas de texto sempre com o mesmos alinhamento.
b) top: alinha o conteúdo ao topo da célula.
c) middle: alinha o conteúdo ao centro da célula.
        d) bottom: alinha o conteúdo na base da célula.

2) Width: define a largura da célula, e deve ser dado em pixels.

3) Height: define a altura da célula, de também deve ser dado em pixels.

4) Colspan e Rowspan: Expande as células, em colunas e linhas, respectivamente, dando a sensação do efeito “Mesclar Células” do MS Word.

Além dos parâmetros vistos acima,
podem ter ainda o parâmetro bgcolor.

Para fixar, digite o código HTML abaixo e veja qual será o resultado.



Curso de HTML – Aula 8




  
  
    
    
  
  
    
    
  
  
    
    
  
  
    
    
  
  
    
    
  
  
    
    
  

    LISTA DE SOFTWARES
  
Lista 1Lista 2
OfficeCorel Draw
BrOfficePhotoshop
LinuxFireworks
WindowsDreamweaver
MacFlash



Mais sobre: curso_html html tabelas_html
Share Tweet
Recomendado
Comentários
Carregar comentários
Destaquesver tudo