What is the appropriate use of display: table?

Question

As its name says, the display table makes the element (Divs, sections, etc.) have a very similar behavior to a table with the tag <table>, where we can use child elements with the property display: table-cell that will have similar behavior to cells of a <table>.

For example, I can use the property vertical-align: middle; in a daughter div to vertically center a content, as in a <td> one-table <table>:

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

.celula{
   display: table-cell;
   vertical-align: middle;
}

<div class="tabela">
   <div class="celula">
      Texto
   </div>
</div>

My doubts:

It is appropriate to use display: table to create layouts or should only be used to create tables, as does the tag <table>?

Finally, what is the proper application of this property?

Answer 1

The layout model table, is suitable for tabular data structure display, "because they have an internal structure complex, with various different roles that their children and descendants can fill".

It becomes appropriate when it makes sense, it makes no sense to use it in an element img only to make use of alignment properties, for example.

I thought that an objective answer with references, it was sufficient, perhaps for the complex relationship embedded in its interior what follows below is necessary.

..."the display table makes the element (Divs, sections, etc.) have a very similar behavior to a table with the tag table...

When it says similar, it gives me the impression of something a little distant, however it is the behavior of a table.

table

"The element generates a main table wrapper box that sets a block formatting context and contains an additionally generated table grid box that sets a table formatting context."

See a little more about the complexity of layout templates:

Some layout templates, such as table and ruby, have a complex internal structure...

... box with specific layout display types generate anonymous wrapper boxes around you when placed on an incompatible parent as defined by their respective specifications.

For example, the table layout requires a table-cell should have table-row as a father.

If it’s misinterpreted, so be it:

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

It will generate wrapper box around itself, producing a structure like:

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

Even if the parent is another element of the internal table, if it is not the correct one, the wrapper box will be generated.

This "repair" ensures that the table layout has a predictable structure to operate.

It makes sense... x)