Div's Versus Tables

[universal4]

Brought up in a different discussion I thought it best not to sidetrack that discussion.

There are many debates about this dating back to the early 2000;s as to whether to use div's or tables for layout and tabular data. Many schools of thought about this and the debate about speed rages on.

Tables were much m,ore widely used when the web existed almost solely on the PC, and tables were much easier to learn layout tricks then learning and understanding css and their functionality and benefits with div's.

Simple answer is tables were created to show tabular data, not for layout.

Css is used for layout, and provides far more flexibility in responsive designs. Div's are more or less a block element, whereas tables fit inside of the block, and when you start using more complex nested tables, the entire table needs to render.

Div's and elements inside of divs scale better and more smoothly when screen sizes change, such as in mobile designs versus the pc.

https://www.tutorialspoint.com/div-l...layout-in-html

We can define multiple <div> elements inside a HTML document and each of them can be used to show different set of information. Inside <div> element we can use more than one HTML elements like paragpraph(<p>), heading(<h2>), span(<span>) etc. We can group all the HTML elements of the <div> tag and can apply CSS to them to make them more understandable and presentable.

Page rendering is the time taken by the browser to display the content of the webpage. In case of div layout the browser doesn’t look for the ending tag while in case of table layout browser doesn’t display content of the page, until it reaches the end of the . Hence page rendering is slow in table layout as compared to div layout.

Tables are more limited in these aspects

https://www.smashingmagazine.com/200...l-to-div-hell/

Tables generally increase the complexity of documents and make them more difficult to maintain. Also, they reduce a website’s flexibility in accommodating different media and design elements, and they limit a website’s functionality.

https://softwareengineering.stackexc...bles-with-divs

Unless the table has table-layout:fixed, it will need to load entirely before it can be displayed.

I am curious as to the thoughts of other concerning this, since some web designers refuse to give up tables for layout.

I saw one result that stated divs render 30% faster but was behind a paywall so could not see the statement in context.

Rick
Universal4

[citizen42]

Tables are a great tool for representing tabular data, they were widely used for layout when we had no other choice.

But now there are so many elements (div, section, main, header, footer, aside, etc.) for layout, so much flexibility with CSS and in most cases we build such complex layouts that I don't see any advantage for using tables.



I use tables for tabular data exclusively and other elements for layout.

Tables have many advantages, most importantly accessibility, screen readers "understand" complex tables, and you can copy/paste data from tables to spreadsheets keeping the format.

Using other elements for layout gives us much more flexibility for styling, they have proper semantic values, etc.


As for rendering speed, I think on modern browsers for an average page, one not containing thousands of table rows and columns, the performance difference will be unnoticeable, if any.