aula de HTML Nº3 - Listas

Hoje vamos continuar com as nossas aulas de HTML com o assunto das listas e tabelas.

-LISTAS-

Para fazer uma lista em HTML só é preciso saber um conjunto básico de tags.

-Listas Não Numeradas-

Para as listas não numeradas são necessários os seguintes tags:

Código:


<UL> inicia a lista não numerada.
<LI> marca cada ponto da lista.
</UL> finaliza a lista não numerada.


Exemplo:

Código:


<UL>
<LI>Bébé
<LI>Criança
<LI>Adolescente
</UL>


E o resultado é:

• Bébé
  
• Criança
  
• Adolescente
  

-Listas Numeradas-

A única diferença entre o código das listas não numeradas e das numeradas é que nestas utiliza-se um tag diferente oara iniciar a lista:

Código:


<OL> Inicia a lista numerada.
</OL> Finaliza a lista numerada.


Exemplo:

Código:


<OL>
<LI>Bébé
<LI>Criança
<LI>Adolescente
</OL>


E o resultado é:

1. Bébé
   
2. Criança
   
3. Adolescente
   

-TABELAS-

-Estrutura básica da tabela-

A estrutura básica de uma Tabela é simples só é necessário os seguintes tags:

Código:


<TABLE> </TABLE> Inicia/finaliza uma tabela sem bordas.
<TABLE BORDER =n> </TABLE> Inicia/finaliza uma tabela com bordas (n é o numero de pixels da borda).
<CAPTION></CAPTION> Inicia/finaliza a legenda da tabela.
<TR> </TR> Inicia/finaliza uma linha.
<TD> </TD> Inicia/finaliza uma célula normal.
<TH> </TH> Inicia/finaliza uma célula do cabeçalho ( o que é colocado nestas células aparece a negrito e centrado).


Exemplo:

Código:

<TABLE BORDER =3><CAPTION> Tabela</CAPTION>
<TR><TH>Ímpares</TH><TH>Pares</TH></TR>
<TR><TD>1</TD><TD>2</TD></TR>
<TR><TD>3</TD><TD>4</TD></TR>
</TABLE>

Tabela

Ímpares	Pares
1	2
3	4

-Outros atributos da tabela-

Podemos mudar os atributos de cada célula dentro de uma Tabela com os seguintes comandos
[tr]

Atributo	Descrição
ALIGN (LEFT, CENTER, RIGHT)	Alinhamento horizontal da célula
VALIGN (TOP, MIDDLE, BOTTOM)	Alinhamento vertical da célula
COLSPAN=n	Número (n) de colunas que uma célula ocupa
ROWSPAN=n	Número de linhas que uma célula ocupa
WIDTH=	Largura da célula
CELLPADDING	Espaço a ser acrescentado entre uma coluna e outra

Exemplo:

Código:


<TABLE BORDER=10 WIDTH="50%" CELLPADING=5>
<TR><TD COLSPAN=3 ALIGN=CENTER> Tabela Grande</TD></TR>
<TR><TD ROWSPAN=2 VALIGN=MIDDLE ALIGN=CENTER> Valores</TD></TR>
<TR><TD COLSPAN=2 ROWSPAN=2 ALIGN=CENTER VALIGN=BOTTOM>1,2,3,4</TD></TR>
</TABLE>


Aqui não mostro como fica pois o editor de HTML do forum não o suporta.

E assim chegamos ao fim de mais um tutorial!

qualquer dúvida mandem uma MP ou deixem uma resposta.

muito bom seus tutoriais parabns denovo

eu acho tão chato mecher com lista e principalmente com tabela

eu sabia fazer umas doideraça com tabela tipo coisa na diagonal e talz mas nem lembro mais como

vlw Henrique!

se lembrar poste aqui!

eu tenho que achar as apostilas