Search code examples
htmlcsscss-tables

What is the purpose of display "table-cell", "table-column" etc


What is the purpose of the CSS display property's values such as:

  • table-cell
  • table
  • table-caption
  • table-column
  • table-column-group
  • table-footer-group
  • table-header-group
  • table-row
  • table-row-group

I understand these styles will style the element like a table, but what is the purpose of this when there is already an acceptable, working, table element?


Solution

  • They can be used to format content in a tabular manner when the markup does not use the table element, e.g. because the markup was written by someone who was told not use tables or because the markup is generic XML and not HTML.

    You can also design a page using e.g. div elements so that some stylesheet formats them as a table, some other stylesheet lets them be block elements or turns them to inline elements. This may depend e.g. on the device width.