1

Como o próprio nome diz, o display table faz com que o elemento (divs, sections, etc.) tenha um comportamento bem semelhante a de uma tabela com a tag <table>, onde podemos usar elementos filhos com a propriedade display: table-cell que terão comportamento semelhante a células de uma <table>.

Por exemplo, posso usar a propriedade vertical-align: middle; numa div filha para centralizar verticalmente um conteúdo, como numa <td> de uma tabela <table>:

.tabela{
   display: table;
   height: 200px;
   background: Yellow;
}

.celula{
   display: table-cell;
   vertical-align: middle;
}
<div class="tabela">
   <div class="celula">
      Texto
   </div>
</div>

Minhas dúvidas:

É apropriado usar display: table para criar layouts ou deve ser usada apenas para criar tabelas, como faz a tag <table>?

Enfim, qual a aplicação apropriada dessa propriedade?

1 Resposta 1

0

O modelo de layout table, é apropriado para exibição de estrutura de dados tabulares, "pois possuem uma estrutura interna complexa, com vários papéis diferentes que seus filhos e descendentes podem preencher".

Ele se torna apropriado quando faz sentido, não faz sentido usá-lo em um elemento img apenas para fazer uso de propriedades de alinhamento, por exemplo.

Achei que uma resposta objetiva e com referências, fosse suficiente, talvez pela relação complexa embutida em seu interior o que segue abaixo seja necessário.

..."o display table faz com que o elemento (divs, sections, etc.) tenha um comportamento bem semelhante a de uma tabela com a tag table...

Quando diz semelhante, me passa a impressão de algo um tanto distante, entretanto é o comportamento de uma tabela.

table

"O elemento gera uma wrapper box de tabela principal que estabelece um contexto de formatação de bloco e que contém um grid box de tabela gerada adicionalmente que estabelece um contexto de formatação de tabela."

Veja um pouco mais sobre a complexidade de modelos de layout:

Alguns modelos de layout, como o table e o ruby , possuem uma estrutura interna complexa...

... box com tipos de exibição específicos de layout geram wrapper box anônimas ao redor de si quando colocadas em um pai incompatível, conforme definido por suas respectivas especificações.

Por exemplo, o layout de tabela requer que uma table-cell deva ter table-row como pai.

Se for mal interpretado, assim:

<div style="display:block;">
    <div style="display:table-cell">...</div>
</div>

Ele irá gerar wrapper box em torno de si, produzindo uma estrutura como:

block box
└anonymous table box
 └anonymous table-row-group box
  └anonymous table-row box
   └table-cell box

Mesmo se o pai for outro elemento da tabela interna , se não for o correto , as wrapper box serão geradas.

Esse "conserto" garante que o layout da tabela tenha uma estrutura previsível para operar.

Faz sentido... x)

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .