Elmord's Magic Valley

Software, lingüística e rock'n'roll. Às vezes em Português, sometimes in English.

The tableless table

2013-03-01 23:13 -0300. Tags: comp, web, em-portugues

[Pintura de Hasegawa Tōhaku de um mestre zen prestes a cortar um gato em dois]
Mumon, membro do CSS Working Group

Uma rápida inspeção do código-fonte atual (mas em vias de mudar) das páginas do ~vbuaraujo revelará que eu tenho (ou tinha) o costume questionável de usar TABLEs para layout mais ou menos shamelessly. Meus motivos para isso eram:

De qualquer forma, essa tabela do blog andava me incomodando, em parte porque uma das coisas que eu mais gosto do CSS é a possibilidade de desabilitá-lo (View > Page Style > No Style no Firefox) e ler as páginas como as seqüências de texto que Deus quis que elas fossem, coisa que não é possível quando a página usa TABLEs.*

Recentemente eu descobri uma maravilha do CSS 2.1: é possível usar CSS para instruir o browser a renderizar elementos quaisquer (e.g., DIVs) como tabelas, linhas, células, etc. Assim, migrar de um layout baseado em TABLEs para um baseado em DIVs + CSS é trivial:

<!-- Exemplo com CSS inline; normalmente a coisa decente a se fazer
     é dar IDs aos elementos e estilizá-los com um arquivo CSS externo. -->

<H1>Título</H1>

<DIV STYLE="display: table; width: 100%; table-layout: fixed">
    <DIV STYLE="display: table-row">
        <DIV STYLE="display: table-cell; width: 75%">
            <P>coluna 1
        </DIV>
        <DIV STYLE="display: table-cell: width: 25%">
            <P>coluna 2
        </DIV>
    </DIV>
</DIV>

<P>Rodapé.

No caso de uma tabela com uma única linha, a DIV com display: table-row (equivalente a um <TR>) não é estritamente necessária; o browser cria uma "linha anônima" para conter as células. A propriedade table-layout: fixed indica que a largura das colunas é fixa; o padrão é auto, que permite que a largura das colunas seja reajustada de acordo com o conteúdo das células. Há outros valores possíveis para display relacionados a tabelas; para mais informações, consulte o standard.

_____

* Normalmente eu faço isso quando estou usando uma tela pequena e quero dar zoom em uma página sem que ela transborde para fora da janela ou que uma barra lateral cresça junto com o texto e coma espaço útil da tela.

Comentários / Comments (0)

Deixe um comentário / Leave a comment

Main menu

Posts recentes

Comentários recentes

Tags

em-portugues (213) comp (137) prog (68) in-english (50) life (47) pldesign (35) unix (34) lang (32) random (28) about (27) mind (25) lisp (23) mundane (22) fenius (20) ramble (17) web (17) img (13) rant (12) hel (12) privacy (10) scheme (10) freedom (8) copyright (7) bash (7) music (7) academia (7) lash (7) esperanto (7) home (6) mestrado (6) shell (6) conlang (5) emacs (5) misc (5) latex (4) editor (4) book (4) php (4) worldly (4) android (4) politics (4) etymology (4) wrong (3) security (3) tour-de-scheme (3) kbd (3) c (3) film (3) network (3) cook (2) poem (2) physics (2) wm (2) treta (2) philosophy (2) comic (2) lows (2) llvm (2) perl (1) en-esperanto (1) audio (1) old-chinese (1) kindle (1) german (1) pointless (1) translation (1)

Elsewhere

Quod vide


Copyright © 2010-2020 Vítor De Araújo
O conteúdo deste blog, a menos que de outra forma especificado, pode ser utilizado segundo os termos da licença Creative Commons Attribution-NonCommercial-ShareAlike 4.0 International.

Powered by Blognir.