How is tableless design better for web design?

[Red Squirrel]

I was working on a site that used div/spans instead of tables, and trying to change anything was a real nightmare, everything is based on coordinates, instead of just being able to stick a new element and everything flow properly.

What is the reasoning behind tables being considered so bad? I've always done it that way myself as I just find it makes it much easier to maintain, everything just flows properly, nothing overlaps etc. Especially true if dealing with dynamic data where you don't know how much room it will take.

Is there a way to do tableless design but still have it act like tables? Perhaps this particular site was just badly coded or something. It was just a nightmare to work with. Got me thinking that at some point I do want to redo my sites and I want to try to conform to what is considered better, but I just can't get myself to not use tables, it's always worked so much better for me. So convince me otherwise, I'm open to know why I should switch, and how to make it work better. Also IE murders div/span based sites (I don't even think it supports those elements) but I don't really care about IE.

 

[Ken g6]

Tables can be hard to arrange. They like to overflow their assigned area. And it can be hard to convert table cells to act like other elements. Supposedly tables should now only be used for things that are actually tables.

But yes you can make other elements behave like tables. Display: table, table-row, and table-cell.

 

[Merad]

Tables are not friendly to mobile devices. The table will maintain the same layout on a small screen forcing the user to scroll horizontally to see everything. A system like Bootstrap's grid will rearrange itself depending on screen size to try to be mobile friendly.