Tutorial Iniciante de HTML: Tabelas

24 02 2008

Exemplo de Tabela

De um lado a outro da web, usava-se a abusava-se das tabelas HTML pra fazer o layout das páginas. Nós veremos como criar um layout sem tabelas, no Tutorial Avançado de CSS. O uso correto das tabelas é fazer exatamente o que você espera que uma tabela faça – estruturar dados tabulares, tais como descrição de dados estatísticos em geral, agendas, calendários, planilhas em geral e etc.

Existem várias tags usadas em tabelas, e entender completamente como elas funcionam é provavelmente a parte mais difícil do Tutorial Iniciante de HTML.

Adicione o código seguinte à tag “body” em seu documento HTML e então nós veremos o que cada tag está fazendo:

<table>
    <tr>
        <td>Linha 1, Célula 1</td>
        <td>Linha 1, Célula 2</td>
        <td>Linha 1, Célula 3</td>
    </tr>
    <tr>
        <td>Linha 2, Célula 1</td>
        <td>Linha 2, Célula 2</td>
        <td>Linha 2, Célula 3</td>
    </tr>
    <tr>
        <td>Linha 3, Célula 1</td>
        <td>Linha 3, Célula 2</td>
        <td>Linha 3, Célula 3</td>
    </tr>
    <tr>
        <td>Linha 4, Célula 1</td>
        <td>Linha 4, Célula 2</td>
        <td>Linha 4, Célula 3</td>
    </tr>
</table>

O elemento table define a tabela.

O elemento tr define uma linha da tabela.

O elemento td define uma célula. Elas precisam estar contidas em tags tr, como foi mostrado acima.

Se você imaginar uma tabela 3×4, que tem 12 células, devem existir quatro elementos tr pra definir as linhas e três elementos td em cada linha, totalizando 12 elementos td.

Páginas Relacionadas

  • Próxima Página: Formulários
  • Página Anterior: Imagens
  • Tabelas (Tutorial Intermediário de HTML) – um pouco mais detalhado, incluindo como unir células.

Exemplos

Referência

BlogBlogs Tags: , , , ,

Esse material é uma adaptação do HTML Beginner Tutorial, de autoria de Patrick Griffiths. Todos os direitos pertencem ao autor.

Anúncios

Ações

Information

3 responses

2 05 2008
Mike

Como fazemos para aparecer as linhas que contornam as células?

2 05 2008
Elomar França

O jeito mais fácil de fazer isso é usar o atributo border=”1″ na tag table, ma não é uma boa prática (você vai saber o “porquê” e um jeito melhor nas próximas lições).

5 05 2013
Tabelas Acessíveis | Blog do Leos

[…] Tutorial Iniciante de HTML: Tabelas | Codando […]

Deixe um comentário

Preencha os seus dados abaixo ou clique em um ícone para log in:

Logotipo do WordPress.com

Você está comentando utilizando sua conta WordPress.com. Sair / Alterar )

Imagem do Twitter

Você está comentando utilizando sua conta Twitter. Sair / Alterar )

Foto do Facebook

Você está comentando utilizando sua conta Facebook. Sair / Alterar )

Foto do Google+

Você está comentando utilizando sua conta Google+. Sair / Alterar )

Conectando a %s




%d blogueiros gostam disto: