display

The display property, which specifies how the element should be shown in the document.

Syntax



display: inline | block | inline-block | list-item | run-in | compact | table | inline-table | table-row-group | table-header-group | table-footer-group | table-row | table-column-group | table-column | table-cell | table-caption | ruby | ruby-base | ruby-text | ruby-base-group | ruby-text-group | none;


Key difference

There are two ways to use tables in layout: this is an HTML table and a CSS table.
An HTML table is when a native HTML <table> tag is used to create a table, and a CSS table is an imitation of the same behavior but with CSS properties.

The display: table CSS property and others render a group of elements like a <table> table, but with the limitation that colspan and rowspan cell joins are not supported.


List of properties and tags they replace:

display: table; <table>
display: inline-table; <table> but also
display: inline-block
display: table-caption; <caption>
display: table-column-group; <colgroup>
display: table-column; <col>
display: table-header-group; <thead>
display: table-row-group; <tbody>
display: table-footer-group; <tfoot>
display: table-row; <tr>
display: table-cell; <td> or <th>

Example