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

Question

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?

Answer 1

Modern browsers use CSS to style all their markup.

How would they render a <table> element if CSS had nothing that could express the appearance of one?

(That, and you might have non-tabular data that you want to render like a table, there are enough people using tables for layout to see a demand for it).

Answer 2

The <table> HTML markup is for tabular data, i.e. data that consists of logical rows and columns, i.e. a spreadsheet. It should only be used for data that logically requires to be presented in a table.

The CSS table-* display styles allow any data to be presented in a tabular style (which has its own unique logic, mostly in regard to vertical centering and width distribution which is hard to emulate using other elements), while still being marked up using whatever makes the most sense for it semantically, for example a list.

Answer 3

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.