Tamanhos de tabela HTML

As tabelas podem esticar numa coluna de conteúdo ou ficar compactas como um cartão de preços. Depois das bordas que desenharam a grelha, esta lição dimensiona a caixa: use CSS (width, max-width, padding, larguras de coluna opcionais) para a tabela caber nos dados e no ecrã. A apresentação fica no CSS; table / tr / th / td ainda carregam o significado. Se as bordas tornaram a grelha visível, o tamanho torna-a confortável.

O que «tamanho» significa para uma tabela

Tamanho não é um único número. A tabela inteira tem largura relativa ao pai. As células precisam de padding para o texto respirar. As colunas podem partilhar o espaço por igual ou favorecer uma coluna de etiquetas mais larga. No telemóvel, uma tabela que insiste em 1200px força scroll horizontal desconfortável mesmo com só duas colunas curtas. Receitas flexíveis — muitas vezes width: 100% com um max-width sensato — mantêm grelhas simples legíveis sem fingir que CSS substitui a estrutura honesta th/td.

Resposta direta

Defina width na table (por exemplo 100%) e opcionalmente limite com max-width (por exemplo 480px ou 640px). Sugira largura de coluna em th/td quando uma coluna deve ocupar mais espaço. Prefira percentagens e max-width a larguras fixas enormes em pixels que transbordam no telemóvel. Continue a usar border-collapse e padding da lição de bordas para tamanho e linhas cooperarem. Limite as regras com uma class para uma demo não redimensionar todas as tabelas da página.

Largura flexível com dica de coluna

Um padrão comum de principiante: a tabela preenche o pai até um máximo, as bordas ficam collapsed e a primeira coluna fica com uma maior parte para etiquetas.

Ler o exemplo flexível

• width: 100% deixa a tabela usar a largura de conteúdo disponível
• max-width: 480px impede que se torne uma faixa gigante em monitores largos
• border-collapse: collapse evita que tamanho e bordas lutem
• padding: 8px dá a cada célula espaço interior legível
• :first-child { width: 60%; } sugere que a coluna do plano seja mais larga que a do preço
• O scope por class (.prices) evita redimensionar por acidente todas as tabelas

Tabela compacta com max-width

Às vezes quer um cartão de comparação pequeno que nunca estique em full-bleed. Um max-width mais baixo (ainda com width: 100% dentro desse teto) mantém a grelha arrumada no desktop e no telemóvel.

Ler o exemplo compacto

• A mesma ideia flexível, com max-width mais apertado para pegada tipo cartão
• O padding horizontal (6px 10px) pode diferir do vertical por conforto
• text-align: left é apresentação opcional — útil quando números e palavras partilham uma grelha pequena
• Continua sem nesting de tabelas de layout; está só a dimensionar uma tabela de dados real
• Redimensione o browser: a tabela deve encolher com a coluna até aos limites do conteúdo, não forçar uma barra de scroll enorme por defeito

Píxeis fixos versus hábitos flexíveis

Larguras fixas como width: 1200px podem parecer bem num monitor grande e dolorosas no telemóvel. Se precisar de um mínimo para impressão ou um dashboard denso, comece por width fluido mais max-width, ou planeie depois uma estratégia responsiva. Para as tabelas de principiante deste curso, o tamanho flexível é o bom hábito por omissão. Percentagens de width de coluna são dicas — o browser pode ajustar quando o conteúdo é extremamente longo ou inquebrável, por isso mantenha o texto da célula razoavelmente curto ao aprender. Quando uma coluna se recusa a encolher, verifique URLs longas ou palavras sem espaços antes de culpar o max-width.

Padding, colunas e collapse juntos

O trabalho de tamanho senta-se ao lado da lição de bordas. Sem padding, células densas sentem-se apertadas mesmo com largura exterior perfeita. Sem collapse, experiências de largura podem parecer mais espessas ou irregulares porque bordas separadas consomem espaço extra. Dicas opcionais de coluna (width em células :first-child, ou num th específico) guiam o browser quando as etiquetas precisam de mais espaço do que os valores. Não use CSS de tamanho como desculpa para largar cabeçalhos th ou reconstruir a página como tabelas de layout aninhadas — esse conflito já ficou resolvido na sessão Tables.

Pratique no seu editor

1. Dê à tabela de prática width: 100% e um max-width (experimente 480px).
2. Adicione padding a th/td (reutilize estilos de borda se ainda os tiver).
3. Redimensione o browser — confirme que uma tabela simples de duas colunas não força scroll horizontal interminável.
4. Opcionalmente alargue a primeira coluna com :first-child ou uma class.
5. Duplique a tabela com um max-width mais apertado como 320px e compare a pegada.
6. Defina temporariamente width: 1200px, note a dor no telemóvel e remova.
7. Alterne border-collapse com larguras definidas e observe a sensação do tamanho exterior.
8. Escreva uma frase sob a tabela a indicar o max-width escolhido e porquê.

Erros fáceis

• Tabelas fixas width: 1200px que quebram ecrãs pequenos
• Sem padding — células densas difíceis de ler
• Fazer bordas e larguras lutarem sem border-collapse
• table { width: ... } global que redimensiona cada demo da página
• Esperar que dicas de width de coluna anulem strings extremamente longas inquebráveis
• Usar o tamanho da tabela para fingir outra vez colunas de layout de página inteira
• Esquecer max-width para que width: 100% sozinho estique uma tabelinha de três células num ultrawide

Resumo

• Dimensione tabelas com CSS width e max-width
• Use padding para células legíveis
• Prefira layouts flexíveis em ecrãs pequenos
• Dicas de largura de coluna são opcionais e limitadas com classes quando possível
• Mantenha as bordas collapsed para tamanho e linhas cooperarem
• A estrutura fica no HTML; as dimensões no CSS
• As próximas lições focadas em cabeçalhos constroem sobre uma grelha que já cabe confortavelmente no viewport