CSS: O Guia Definitivo, 5ª Edição

Capítulo 13. Layout de tabela em CSS

Este trabalho foi traduzido com recurso a IA. Agradecemos o teu feedback e comentários: [e-mail]

Tu podes ter olhado para o título deste capítulo e ter pensado: "Disposição da tabela? Isso não é tão do último milénio?" De facto, mas este capítulo não é sobre a utilização de tabelas para layout. Em vez disso, trata das formas como as próprias tabelas são dispostas pelo CSS, o que é muito mais complicado do que parece à primeira vista.

As tabelas são invulgares, comparadas com o resto do layout do documento. Até ao aparecimento da flexbox e da grelha, só as tabelas possuíam a capacidade única de associar tamanhos de elementos a outros elementos - por exemplo, todas as células de uma linha têm a mesma altura, independentemente da quantidade de conteúdo que cada célula possa ter. O mesmo se aplica às larguras das células que partilham uma coluna. As células adjacentes podem partilhar um contorno, mesmo que as duas células tenham estilos de contorno muito diferentes. Como verás, estas capacidades são adquiridas à custa de muitos comportamentos e regras - muitos deles enraizados no passado da Web - que se aplicam a tabelas, e apenas a tabelas.

Formatação de tabelas

Antes de começarmos a preocupar-nos com a forma como as bordas das células são desenhadas e as tabelas dimensionadas, precisamos de nos aprofundar nas formas fundamentais em que as tabelas são montadas e nas formas como os elementos de uma tabela estão relacionados. ...