HTML: Criação de Tabelas

A criação de tabelas em html é extremamente simples. Neste post vou detalhar como podemos criar e modificar uma tabela, alterando as suas propriedades e seus elementos.


Vamos inicialmente criar uma tabela conforme este exemplo:

Nome	Telefone
João	3333-3333
João	3333-3333
Tabela criada para demonstração no site Dicas e Códigos Web

A estrutura da tabela sempre iniciará com o elemento TABLE. Todas as tags deverão ser finalizadas com /, portanto o código da tabela ficará assim:

<table>
</table>


Para criarmos uma linha, utilizaremos o elemento TR, lembrando que as nossas tabelas sempre terão pelo menos uma linha e uma coluna(caso contrário não faz sentido utilizar a estrutura de uma tabela).

Desta forma a nossa tabela acima terá a seguinte estrutura:

<table>
        <tr></tr>
        <tr></tr>
        <tr></tr>
        <tr></tr>
</table>

Dentro de cada linha, podemos incluir dois elementos distintos  uma "célula de cabeçalho" (elemento TH - Table Header) ou uma "célula de dado" (elemento TD - Table Data). 

Incluíndo os textos e formatação de fonte, a nossa tabela ficará assim:

<table border=1>
        <tr>
              <th>Nome</th><th>Telefone</th>
        </tr>
        <tr>
               <td>João</td><td>3333-3333</td>
        </tr>
        <tr>
               <td>Pedro</td><td>2222-2222</td>
        </tr>
        <tr>
               <td colspan=2> Tabela criada para demonstração no site Dicas e Códigos Web </td>
        </tr>
</table>


Neste exemplo incluímos alguns detalhes a mais, a formatação da borda da tabela utilizando a propriedade border=1px e na ultima linha utilizamos a propriedade colspan.

Sempre que tivermos uma tabela na qual tenhamos mais colunas em uma linha do que em outra, podemos mesclar duas colunas utilizando a propriedade colspan. Como no exemplo, utilizamos o colspan=2, mesclando duas colunas. 

PRINCIPAIS PROPRIEDADES DE UMA TABELA <TABLE>

WIDTH=n   Define a largura da tabela em pixels. Quando este parâmetro é omitido, a tabela se auto ajusta.



BORDER=n  Define o tamanho da borda. Quando BORDER=0, a tabela não tem borda.

CELLPADDING=n  Define a distância do texto em relação a célula.

CELLSPACING=n  Define a distância entre as células da tabela.

BGCOLOR="cor"   Define a cor de fundo da tabela.

PRINCIPAIS PROPRIEDADES DE UMA LINHA <TR>

HEIGHT=n Define a altura da linha em pixels.

ALIGN="left | right | center" Define o alinhamento do texto nesta linha.

VALIGN="top | middle | botton" Define o alinhamento do texto verticalmente:

                                                - top - no topo da célula;

                                                - middle - no meio da célula;

                                                - botton - na parte inferior da célula.

BGCOLOR="cor" Define a cor de fundo da linha.

PRINCIPAIS PROPRIEDADES DE UMA CÉLULA OU COLUNA <TD>

WIDTH=n Define a largura da linha em pixels.

ALIGN="left | right | center"  Define o alinhamento do texto na célula.

VALIGN="top | middle | botton" Define o alinhamento do texto verticalmente:

                                               - top - no topo da célula;

                                               - middle - no meio da célula;

                                               - botton - na parte inferior da célula.

BGCOLOR="cor"  Define a cor de fundo da célula.

COLSPAN=n  Define quantas colunas uma célula vai ocupar.

ROWSPAN=n  Defice quantas linhas uma célua vai ocupar.

Categories: HTML