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
andtd
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 div
s. But classes on div
s are not absolutely necessary. I could have styled all the div
s using selectors based on the table root div
. I assigned a specific class to the row div
s 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 div
s as a table.