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 Programação Pular para comentários
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.

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



Compartilhe com seus amigos:
Jonathan Lamim
Jonathan Lamim Empreendedor digital, ex-programador (decidi abandonar a carreira após 12 anos), especialista em marketing de conteúdo e agora atuando exclusivamente com Marketing Digital, em projetos de Marketing de Conteúdo, produção de conteúdo para internet, além de escrever ebooks e criar cursos ligados ao marketing digital de um modo geral.
FACEBOOK // TWITTER: @jonathanlamimkt
Quer conversar com o(a) Jonathan, comente:
Carregar comentários
Últimas notícias