Tabelas

Tabelas são parte importante da sintaxe estendida do Markdown e permitem apresentar dados de forma estruturada.

Sintaxe básica

Tabela simples

Usa o pipe | para separar colunas e - para a linha do cabeçalho:

| Nome | Idade | Profissão |
|------|------:|-----------|
| Zhang San | 25 | Engenheiro |
| Li Si | 30 | Designer |
| Wang Wu | 28 | Gestor de Produto |

Resultado:

Nome	Idade	Profissão
Zhang San	25	Engenheiro
Li Si	30	Designer
Wang Wu	28	Gestor de Produto

Alinhamento

Usa‑se : para controlar o alinhamento das colunas:

| Esquerda | Centro | Direita |
|:---------|:------:|-------:|
| A        |   A    |      A |
| B        |   B    |      B |
| C        |   C    |      C |

Resultado:

Esquerda	Centro	Direita
A	A	A
B	B	B
C	C	C

Detalhes de alinhamento

Tabela de referência

Sintaxe	Alinhamento	Exemplo
---	Esquerda (padrão)	`
:--:	Centro	`
--:	Direita	`

Números

Para números, prefere‑se alinhamento à direita:

| Produto | Preço | Vendas | Receita |
|:--------|------:|------:|--------:|
| A       | €99   | 1 250 | €123 750 |
| B       | €199  |   856 | €170 344 |
| C       | €299  |   432 | €129 168 |
| **Total** |      | **2 538** | **€423 262** |

Resultado:

Produto	Preço	Vendas	Receita
A	€99	1 250	€123 750
B	€199	856	€170 344
C	€299	432	€129 168
Total		2 538	€423 262

Formatação dentro da tabela

Formatação inline

As células suportam Markdown inline:

| Funcionalidade | Estado | Descrição |
|----------------|:-----:|-----------|
| **Login**      | ✅     | Entrar com e‑mail |
| *Registo*      | 🚧     | Suporte a terceiros |
| `Reset`        | ❌     | Redefinir via e‑mail |
| [Perfil](/)    | ⏳     | Gestão de utilizador |

Resultado:

Funcionalidade	Estado	Descrição
Login	✅	Entrar com e‑mail
Registo	🚧	Suporte a terceiros
Reset	❌	Redefinir via e‑mail
Perfil	⏳	Gestão de utilizador

Código em células

| Comando | Função | Exemplo |
|---------|--------|---------|
| `ls`    | Listar | `ls -la` |
| `cd`    | Mudar  | `cd /home/user` |
| `mkdir` | Criar  | `mkdir new-folder` |
| `rm`    | Remover| `rm -rf folder/` |

Resultado:

Comando	Função	Exemplo
ls	Listar	ls -la
cd	Mudar	cd /home/user
mkdir	Criar	mkdir new-folder
rm	Remover	rm -rf folder/

Exemplos mais complexos

Comparação técnica

| Caraterística | React | Vue | Angular |
|:--------------|:----:|:---:|:-------:|
| **Aprendizagem** | Média | Fácil | Difícil |
| **Desempenho**   | ⭐⭐⭐⭐ | ⭐⭐⭐⭐⭐ | ⭐⭐⭐ |
| **Ecossistema**  | Rico  | Bom   | Completo |
| **Suporte**      | Facebook | Independente | Google |
| **TypeScript**   | ✅ | ✅ | ✅ Integrado |
| **Comunidade**   | Muito alta | Alta | Média |

Resultado:

Caraterística	React	Vue	Angular
Aprendizagem	Média	Fácil	Difícil
Desempenho	⭐⭐⭐⭐	⭐⭐⭐⭐⭐	⭐⭐⭐
Ecossistema	Rico	Bom	Completo
Suporte	Facebook	Independente	Google
TypeScript	✅	✅	✅ Integrado
Comunidade	Muito alta	Alta	Média

Tabela de API

| Parâmetro | Tipo | Obrig. | Padrão | Descrição |
|----------|------|:------:|--------|-----------|
| `id`     | `number` | ✅ | - | Identificador do utilizador |
| `name`   | `string` | ✅ | - | Nome |
| `email`  | `string` | ✅ | - | E‑mail |
| `age`    | `number` | ❌ | `null` | Idade |
| `avatar` | `string` | ❌ | `"/default.jpg"` | URL do avatar |
| `status` | `enum`   | ❌ | `"active"` | Estado: `active` \| `inactive` |

Resultado:

Parâmetro	Tipo	Obrig.	Padrão	Descrição
id	number	✅	-	Identificador do utilizador
name	string	✅	-	Nome
email	string	✅	-	E‑mail
age	number	❌	null	Idade
avatar	string	❌	"/default.jpg"	URL do avatar
status	enum	❌	"active"	Estado: active | inactive

Dicas de formatação

Emojis

| SO | Suporte | Nota |
|----|:------:|------|
| Windows | ✅ | Completo |
| macOS   | ✅ | Completo |
| Linux   | ⚠️ | Parcial |
| iOS     | ❌ | Não suportado |
| Android | 🚧 | Em desenvolvimento |

Resultado:

SO	Suporte	Nota
Windows	✅	Completo
macOS	✅	Completo
Linux	⚠️	Parcial
iOS	❌	Não suportado
Android	🚧	Em desenvolvimento

Badges

| Projeto | Estado | Versão |
|---------|--------|--------|
| React   | ![Stable](https://img.shields.io/badge/status-stable-green) | `v18.2.0` |
| Vue     | ![Stable](https://img.shields.io/badge/status-stable-green) | `v3.3.0` |
| Angular | ![Beta](https://img.shields.io/badge/status-beta-orange)   | `v16.0.0` |

Células vazias

Representação

| Item | Q1 | Q2 | Q3 | Q4 |
|------|:--:|:--:|:--:|:--:|
| Receita | 1 000 000 | 1 200 000 | - | - |
| Custo   |   800 000 |   900 000 | 950 000 | - |
| Lucro   |   200 000 |   300 000 |        |   |

Resultado:

Item	Q1	Q2	Q3	Q4
Receita	1 000 000	1 200 000	-	-
Custo	800 000	900 000	950 000	-
Lucro	200 000	300 000

Erros comuns e correções

1) Pipes desalinhados

❌ Incorreto:
| Nome|Idade|Profissão|
|-----|----:|---------|
|Zhang|  25 |Engenheiro|

✅ Correto:
| Nome | Idade | Profissão |
|------|------:|-----------|
| Zhang | 25 | Engenheiro |

2) Falta da linha separadora

❌ Incorreto:
| Nome | Idade |
| Zhang | 25 |

✅ Correto:
| Nome | Idade |
|------|------:|
| Zhang | 25 |

3) Número de colunas inconsistente

❌ Incorreto:
| Nome | Idade | Profissão |
|------|------:|-----------|
| Zhang | 25 |   ← faltou a terceira coluna

✅ Correto:
| Nome | Idade | Profissão |
|------|------:|-----------|
| Zhang | 25 | Engenheiro |

4) Carateres especiais

❌ Problema:
| Preço | Descrição |
|------:|-----------|
| $100|com IVA |  ← pipe mal usado

✅ Solução:
| Preço | Descrição |
|------:|-----------|
| $100  | com IVA |
| $200  | preço\|com IVA |  ← escapar o pipe

Funcionalidades avançadas

Reforço com HTML

<table>
  <tr>
    <th colspan="2">Cabeçalho combinado</th>
    <th>Coluna</th>
  </tr>
  <tr>
    <td rowspan="2">Linha combinada</td>
    <td>Dado 1</td>
    <td>Dado 2</td>
  </tr>
  <tr>
    <td>Dado 3</td>
    <td>Dado 4</td>
  </tr>
</table>

Resultado:

Cabeçalho combinado		Coluna
Linha combinada	Dado 1	Dado 2
	Dado 3	Dado 4

Estilo

<table style="width: 100%; border-collapse: collapse;">
  <tr style="background-color: #f0f0f0;">
    <th style="border: 1px solid #ddd; padding: 8px;">Produto</th>
    <th style="border: 1px solid #ddd; padding: 8px;">Preço</th>
  </tr>
  <tr>
    <td style="border: 1px solid #ddd; padding: 8px;">A</td>
    <td style="border: 1px solid #ddd; padding: 8px; color: red;">€99</td>
  </tr>
</table>

Casos de uso

1) Gestão de projetos

## Quadro de progresso

| Tarefa | Responsável | Início | Fim | Estado | Conclusão |
|--------|-------------|--------|-----|:------:|:---------:|
| Análise | Zhang | 2023-10-01 | 2023-10-07 | ✅ | 100% |
| UI     | Li    | 2023-10-08 | 2023-10-15 | 🚧 | 75% |
| Frontend | Wang | 2023-10-16 | 2023-10-30 | ⏳ | 0% |
| Backend  | Zhao | 2023-10-16 | 2023-11-05 | ⏳ | 0% |
| Testes   | Sun  | 2023-11-06 | 2023-11-12 | ⏳ | 0% |

2) Planos de subscrição

## Comparação de planos

| Funcionalidade | Grátis | Pro | Empresa |
|----------------|:-----:|:---:|:------:|
| **Utilizadores** | 5 | 50 | Ilimitado |
| **Armazenamento** | 1GB | 100GB | 1TB |
| **Chamadas API** | 1 000/mês | 100 000/mês | Ilimitado |
| **Suporte** | Comunidade | E‑mail | Dedicado |
| **SLA** | - | 99,9% | 99,99% |
| **Preço** | €0 | €9,99/mês | €99,9/mês |
|           | [Escolher](/) | [Escolher](/) | [Contactar](/) |

3) Relatório financeiro

## Relatório mensal

| Item | Jan | Fev | Mar | Total |
|------|---:|---:|---:|----:|
| **Receita** | | | | |
| Vendas | 50 000 | 55 000 | 60 000 | 165 000 |
| Serviços | 20 000 | 22 000 | 25 000 | 67 000 |
| Outros   | 2 000  | 1 500  | 3 000  | 6 500 |
| *Subtotal* | *72 000* | *78 500* | *88 000* | *238 500* |
| **Custos** | | | | |
| Salários | 30 000 | 30 000 | 30 000 | 90 000 |
| Renda    | 8 000  | 8 000  | 8 000  | 24 000 |
| Marketing| 10 000 | 12 000 | 15 000 | 37 000 |
| *Subtotal* | *48 000* | *50 000* | *53 000* | *151 000* |
| **Lucro** | **24 000** | **28 500** | **35 000** | **87 500** |

Boas práticas

1) Mantenha simples

✅ Recomendado: simples e claro
| Item | Estado |
|------|--------|
| A    | Concluído |
| B    | Em curso |

❌ Evitar: excesso de informação
| Nome | Estado | Descrição | Responsável | Início | Fim | Observações |

2) Títulos descritivos

✅ Recomendado: títulos descritivos
| Linguagem | Dificuldade | Área |

❌ Evitar: títulos vagos
| Item 1 | Item 2 | Item 3 |

3) Alinhamento adequado

✅ Recomendado: números à direita
| Produto | Preço | Qtde |
|:--------|-----:|-----:|
| A       | €100 | 50 |

✅ Recomendado: texto à esquerda
| Nome | Departamento | Cargo |
|:-----|:------------|:------|
| Zhang | Eng. | Dev |

Saída HTML

Conversão de uma tabela Markdown para HTML:

| Nome | Idade |
|------|------:|
| Zhang | 25 |

Converte para:

<table>
  <thead>
    <tr>
      <th>Nome</th>
      <th>Idade</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Zhang</td>
      <td>25</td>
    </tr>
  </tbody>
 </table>

Referências relacionadas

• Visão geral básica
• Sintaxe estendida
• HTML

Exercícios

Tenta criar:

1. Uma tabela de equipa
2. Uma comparação de preços
3. Um quadro de progresso
4. Uma avaliação de stack

Ferramentas

Geradores

• Online: Tables Generator, Markdown Tables Generator
• Plugins: VS Code Markdown Table, edição de tabelas no Typora
• Conversão: Excel → Markdown, CSV → Markdown

Estilização

• Frameworks CSS: Bootstrap, Tailwind
• Bibliotecas: DataTables, AG Grid
• Extensões Markdown: markdown-it-table, remark-gfm