Imagens Links Controlos

Tabelas em Html

Índice da página:

Comandos Principais
Títulos
Alinhamentos
Span Colunas e Linhas
Rebordos
Dimensões

Segue abaixo o conjunto de marcações essenciais para desenhar tabelas em HTML. Alguns atributos podem ser definidos para cada uma dessas marcações. Falaremos desses atributos mais adiante.

•<table></table>
Toda tabela deve ser iniciada com a marcação <table> e encerrada com </table>.
Nota: Desta forma a tabela vai aparecer sem bordas, mas dividindo linhas e células. Para que a tabela apareça com bordas simples, defina o Atributo border="1" (0=sem rebordo, 1=com rebordo). Antes e depois de uma tabela, acontece sempre uma quebra de linha.

•<tr></tr>
Cada linha de uma tabela deve sempre aparecer entre estas duas tags. (tr = Table Row).

•<td></td>
Esta é a marcação que define cada célula de uma tabela. As células de uma tabela devem sempre aparecer entre as marcações de linhas (<tr></tr>). Como padrão, o texto nas células é alinhado à esquerda. (td = Table Division)

•<th></th>
Desta forma são definidos os títulos de uma tabela. Estes podem ser posicionados em qualquer célula. A diferença entre a marcação de célula e título de célula é que o título aparece em negrito e centrado. (th = Table Header)

Índice

Títulos

Vamos ver então o nosso primeiro exemplo de uma tabela utilizando as marcações básicas com Títulos.

Exemplo:

<html>
<head>
<title>Títulos</title>
</head>
<body>
<table border="1">
    <tr>
        <td>Items/Mês</td>
        <th>Janeiro</th>
        <th>Fevereiro</th>
        <th>Março</th>
    </tr>
    <tr>
        <th>Usuários</th>
        <td>80</td>
        <td>93</td>
        <td>120</td>
    </tr>
    <tr>
        <th>Linhas</th>
        <td>3</td>
        <td>3</td>
        <td>5</td>
    </tr>
</table>
</body>
</html>

Ver

Índice

Alinhamentos

As marcações das tabelas, podem apresentar resultados diferentes, se acompanhadas de alguns atributos. Vamos ver os principais:

•align
Este atributo pode ser aplicado a tr,th e td, e controla como será o alinhamento do texto dentro de uma célula, com relação às bordas laterais. Aceita os valores (left, center, right), respectivamente para alinhar à esquerda, centralizar ou alinhar à direita.

Exemplo:

<html>
<head>
<title>Alinhamento</title>
</head>
<body>
<table border="1">
    <tr>
        <td>Primeira célula</td>
        <td>Segunda célula</td>
        <td>Terceira célula</td>
    </tr>
    <tr>
        <td align=center>centro</td>
        <td align=left>esquerda</td>
        <td align=right>direita</td>
    </tr>
</table>
</body>
</html>

Ver

•valign
Pode ser aplicado a tr,th e td, e define o alinhamento do texto nas células com relação à sua posição vertical. Aceita os valores top, middle e bottom, que corresponde ao (Topo, Centro e Base).

Exemplo:

<html>
<head>
<title>Alinhamento Vertical</title>
</head>
<body>
<table border="1">
      <tr>
            <td> Teste para alinhamento<br>
                 com relação a topos<br>
                 inferior e superior<br>
             </td>
             <td valign="top"> Topo </td>
             <td valign="middle">Centro</td>
             <td valign="bottom">Base</td>
      </tr>
</table>
</body>
</html>

Ver

Índice

Span Colunas e Linhas

Existem dois atributos muito usados em tabelas, que por vezes são um pouco confusos de usar, mas que são de grande utilidade. São eles: o rowspan para linhas e o colspan para colunas. Iremos dar um exemplo muito prático destes atributos, mas aconselhamos a que faça várias aplicações, pois só com a prática dominará este atributos tão potentes.

•colspan
Pode ser aplicado a th e td. Define quantas colunas uma célula poderá abranger. Por padrão cada célula corresponde a uma coluna, ou seja colspan="1".

Exemplo:

<html>
<head>
<title>Span Coluna</title>
</head>
<body>
<table border="1">
      <tr>
             <td colspan="3">3 Colunas</td>
             <td>Normal</td>
             <td>Normal</td>
      </tr>
      <tr>
             <td>Col 1</td>
             <td>Col 2</td>
             <td>Col 3</td>
             <td>Col 4</td>
             <td>Col 5</td>
      </tr>
</table>
</body>
</html>

Ver

•colspan
Este atributo pode ser aplicado a células TH e TD e define quantas linhas uma mesma célula pode abranger. Assim como na marcação anterior, o padrão é uma célula corresponder a uma linha.

Exemplo:

<html>
<head>
<title>Span Linhas</title>
</head>
<body>
<table border="1">
      <tr>
            <td rowspan="3">3 Linhas</td>
            <td>Col 2</td>
            <td>Col 3</td>
            <td>Col 4</td>
      </tr>
      <tr>
            <td>Col 2</td>
            <td>Col 3</td>
            <td>Col 4</td>
      </tr>
      <tr>
            <td>Col 2</td>
            <td>Col 3</td>
            <td>Col 4</td>
      </tr>
</table>
</body>
</html>

Ver

Índice

Rebordos

Existem mais três atributos muito usados em tabelas, também de grande utilidade. São eles: o border para dimensionar o (Rebordo) o cellspacing para espaçamento entre as colunas e linhas, e o cellpadding espaçamento interno das colunas e linhas.Iremos dar um exemplo muito prático destes atributos, mas aconselhamos a que faça várias aplicações, pois só com a prática dominará estes atributos.

•border
Acrescentando um valor ao atributo border é possível colocar tabelas em maior destaque:

Exemplo:

<html>
<head>
<title>Rebordo</title>
</head>
<body>
<table border="4">
      <tr>
            <td>Teste 1</td>
            <td>Teste 2</td>
            <td>Teste 3</td>
      </tr>
      <tr>
            <td>Teste 4</td>
            <td>Teste 5</td>
            <td>Teste 6</td>
      </tr>
</table>
</body>
</html>

Ver

•cellspacing
Este atributo é aplicável à marcação table. Como padrão, o browser utiliza espaço 2 entre as células. Este atributo define o espaço entre cada célula na tabela.

Exemplo:

<html>
<head>
<title>Cell Spacing</title>
</head>
<body>
<table border="1" cellspacing="6">
      <tr>
            <td>Teste 1</td>
            <td>Teste 2</td>
            <td>Teste 3</td>
      </tr>
      <tr>
            <td>Teste 4</td>
            <td>Teste 5</td>
            <td>Teste 6</td>
      </tr>
</table>
</body>
</html>

Ver

•cellpadding
Este atributo é aplicado também à marcação table e define a distância entre o texto e a borda interna de cada célula.

Exemplo:

<html>
<head>
<title>Cell Padding</title>
</head>
<body>
<table border="1" cellpadding="8">
      <tr>
            <td>Teste 1</td>
            <td>Teste 2</td>
            <td>Teste 3</td>
      </tr>
      <tr>
            <td>Teste 4</td>
            <td>Teste 5</td>
            <td>Teste 6</td>
      </tr>
</table>
</body>
</html>

Ver

Índice

Dimensões

Existem dois Atributos que podem dimensionar as suas Tabelas. Estes atributos pode ser aplicados tanto a table,th e td. São eles; width (Largura) e height (Altura). A eles tanto podem ser associados valores em "pixels" (ponto em tela gráfica), como um valor percentual. Ou seja, determina a pecentagem da tabela ou células em referência à Tela ou à Tabela.

•width
Iremos apresentar um exemplo que contempla pecentagem para a tabela, e uma mistura de percentagem e pixels para a Tabela.

Exemplo:

<html>
<head>
<title>Largura</title>
</head>
<body>
<table border="1" width="80%" align="center" cols="3">
      <tr align="center">
            <td width="60">Segunda</td>
            <td width="100%">Terça</td>
            <td Width="60">Quarta</td>
      </tr>
      <tr alig="center">
            <td>Quinta</td>
            <td>Sexta</td>
            <td>Sábado</td>
      </tr>
</table>
</body>
</html>

Ver

•height
Iremos apresentar um exemplo que contempla pecentagem para a tabela, e uma mistura de percentagem e pixels para a Tabela.

Exemplo:

<html>
<head>
<title>Altura</title>
</head>
<body>
<table border="1" width="80%" align="center" cols="3">
      <tr align="center">
            <td width="60">Segunda</td>
            <td width="100%">Terça</td>
            <td Width="60">Quarta</td>
      </tr>
      <tr align="center" height="60">
            <td>Quinta</td>
            <td>Sexta</td>
            <td>Sábado</td>
      </tr>
</table>
</body>
</html>

Ver

Índice