CSS display: block, inline e table-cell

Depois que eu postei no Twitter a brincadeira de que duvidava que alguém me fizesse uma pergunta inteligente, eis que o @bernarddeluna resolveu acessar o meu perfil no Formspring e perguntar sobre a propriedade display do CSS, mais especificamente sobre os valores block e inline. Claro que a pergunta dele não era exatamente uma dúvida, e sim um motivo pra puxar a discussão, coisa que fizemos depois pelo MSN :)

A pergunta e a respectiva resposta seguem abaixo:

Gostei do “dúvido” :) Bom, sabendo da regra de tag’s inline e block, onde entra a <td> nisso? Podemos colocar elementos de blocos em uma <td>?
(http://www.formspring.me/eduagni/q/311181935)

Elementos de visualização inline são elementos que ocupam apenas a largura do próprio elemento e não geram uma quebra de linha, como um <a> ou <strong>. Elementos de visualização block são elementos que ocupam toda a largura da página e geram quebra de linha, como uma <div> ou um <p>.

A propriedade display do CSS permite que sejam alteradas as formas de visualização de um elemento. Podemos aplicar o display:block a um <a> e fazer com que ele tenha cor de fundo, largura e altura, por exemplo.

Elementos de uma <table> (tabela de dados) não são nem de visualização block, nem inline. A forma de visualização que corresponde a uma <td> (célula da tabela) é a display:table-cell. Podemos adicionar elementos block e inline dentro de uma célula, porém desde que sejam dados tabulares (aqueles dados que possuem uma relação entre linhas e colunas), pois é essa a semântica correta de uma tabela: conter dados tabulares.

Vale dar uma lida aqui: http://www.w3.org/TR/CSS2/tables.html. Mando um salve para o @bernarddeluna pelo papo :)

Tem alguma dúvida sobre design de interface, web standards ou criação? Então acesse meu perfil no Formpring e pergunte :)

Participe do grupo sobre HTML5 no Facebook.

Artigos Relacionados: