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
Esse material é uma adaptação do HTML Beginner Tutorial, de autoria de Patrick Griffiths. Todos os direitos pertencem ao autor.
Como fazemos para aparecer as linhas que contornam as células?
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).