Liberdade na Era da Computação
Contato FAQ Doação
Para criar tabelas em um documento HTML, se utiliza a tag table.
Cada linha (row) da tabela é definida pela tag tr (table row), cada título (header) da tabela é definida pela tag th (table header) e cada dado/célula (data/cell) da tabela é definida pela tag td (table data).
A tag td pode conter qualquer dado: textos, imagens, listas, outras tabelas, etc.
Por padrão, o texto na tag th é negrito e centralizado, e o texto na tag td é regular e alinhado à esquerda. É possível formatar o estilo com propriedades do CSS.
Exemplo de uma tabela simples:
| Nome | Sobrenome | Idade |
|---|---|---|
| Pedro | Silva | 40 |
| Maria | Santos | 50 |
As tabelas podem ter cabeçalhos (headers) tanto nas colunas quanto nas linhas da tabela.
Para utilizar cabeçalhos nas linhas, é só utilizar a tag th ao invés de td ao iniciar uma nova linha da tabela.
| Horário | SEGUNDA | TERÇA | QUARTA | QUINTA | SEXTA |
|---|---|---|---|---|---|
| 8:00 | Matemática | História | Química | Português | Biologia |
| 9:00 | Matemática | História | Química | Português | Biologia |
| 10:00 | Artes | Geografia | Biologia | Artes | Física |
| 11:00 | Português | Geografia | Biologia | Matemática | Física |
| 12:00 | Português | Física | História | Matemática | Geografia |
Você pode adicionar um título na tabela utilizando a tag caption. Essa tag deve ser colocada logo abaixo da tag table, e antes da primeira linha (tag tr).
| Horário | SEGUNDA | TERÇA | QUARTA | QUINTA | SEXTA |
|---|---|---|---|---|---|
| 8:00 | Matemática | História | Química | Português | Biologia |
| 9:00 | Matemática | História | Química | Português | Biologia |
| 10:00 | Artes | Geografia | Biologia | Artes | Física |
| 11:00 | Português | Geografia | Biologia | Matemática | Física |
| 12:00 | Português | Física | História | Matemática | Geografia |
As tabelas podem possuir células que compreendem mais de uma coluna ou linha.
Para fazer uma célula compreender mais de uma coluna, utilize a propriedade colspan das tags th e td.
| Nome | Idade | |
|---|---|---|
| Pedro | João | 40 |
| Maria | Alice | 50 |
Para fazer uma célula compreender mais de uma linha, utilize a propriedade rowspan das tags th e td.
| Nome | Pedro Silva |
|---|---|
| Telefone | (10) 3355-1350 |
| (10) 99905-1350 |
< Listas Tabelas
O conteúdo original (artigos e tutoriais) deste website está disponível em CC0 1.0 (Domínio Público), salvo indicação do contrário. Termos adicionais podem estar aplicados (conteúdo de terceiros), conforme mencionado nos comentários do código-fonte.