Efetuar login

Oficina da Net - Construindo conhecimento

Widgets | Contato | Cadastro | Fórum | Promoções

HTML

Curso de HTML - Aula 8

Publicado em: 22/09/2008 | HTML | Visualizações: 776 | 1 Comentário(s)

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 é <table>...</table>, marcando respectivamente o início e o fim de uma tabela.

Sintaxe:

<table	border=”borda”

	        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.

<tr>  -  Cria linha na tabela

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

<td>  -  Cria coluna na tabela

Essa Tag <td>...</td> é responsável por criar as colunas na tabela. Ela deve ser colocada sempre entre <tr>...</tr>.

<th>  -  Cabeçalho de uma coluna

Essa Tag <th>...</th> define o cabeçalho de uma coluna. A diferença entre <td> e <th> é que os dados ente <th>...</th> serão colocados em negrito e centralizados.

<caption>  - Cabeçalho de uma tabela

Essa Tag <caption>...</caption>  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 <tr> e <td> 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, <tr> e <td> podem ter ainda o parâmetro bgcolor.

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

<html>

<head>

<title>Curso de HTML – Aula 8</title>

</head>



<body>

<table width="300" border="0" cellspacing="5" cellpadding="3">

  <caption align="top">

    LISTA DE SOFTWARES

  </caption>

  <tr>

    <th>Lista 1</th>

    <th>Lista 2</th>

  </tr>

  <tr>

    <td>Office</td>

    <td>Corel Draw</td>

  </tr>

  <tr>

    <td>BrOffice</td>

    <td>Photoshop</td>

  </tr>

  <tr>

    <td>Linux</td>

    <td>Fireworks</td>

  </tr>

  <tr>

    <td>Windows</td>

    <td>Dreamweaver</td>

  </tr>

  <tr>

    <td>Mac</td>

    <td>Flash</td>

  </tr>

</table>

</body>

</html>