Important difference between standard HTML tables and div tables

And a critical difference between div tables

There are two reasonable ways to construct a table in a web page:

• using the dedicated table, tr, th and td HTML elements
• using only divs but appropriately styled

The two visually identical tables below are coded using those approaches:

The two tables look the same, but they are coded with quite different HTML:

The table on the right has slightly longer HTML code because of additional class attributes on row divs. But classes on divs are not absolutely necessary. I could have styled all the divs using selectors based on the table root div. I assigned a specific class to the row divs mainly to simplify CSS selectors in the sample code. Additionally, it is believed that simple selectors reduce the time of style calculations during rendering.

How to arrange divs into a table?

There several ways to render a set of divs as a table.