I’ve find a lot of posts about how to make a DIV behave like a TABLE, but not the other way around. So here it is:

That is not voodoo, neither black magic. There is a good REASON why tables behave like table on HTML, and once you know it, you can hack it to behave like anything else. Say like a paragraph.

At this time you might be frowning and thinking:

Why on Earth would I want to change a table’s behave?? Or why would I even use it!?

Answering the second question first: you should use it, but only to tabular data.

And the first question: well… when some people DO NOT use it for tabular data and create a complex-system-that-generate-html-output-that-can-not-be-changed… well, in that case you might want to turn some tables in divs

Why tables behave like table?

Short answer: because they have a different “display” property.

The long answer: Every browser has a custom css built-in (have a sneak peak on Firefox, Chrome and IE ones), and the <table>‘s tag default property in all of them is “display: table;“. And so <tr> ‘s are “display: table-row;” and <td>‘s are “display: table-cell;“.

How to change a table’s behavior?

You can simply get your <table>, <tr> or <td> tag on css and set it to “display: block;“, “display: inline;” or whatever other display property you may want to use.

Conclusion

That is kind of stuff that, hopefully, you will never need. But it will save your life when do.

Hopefully you’ll enjoy understanding how browsers and HTML interact together.

P.S. I would also add, as my friend Antonio insisted, that you rather fix the complex-system-that-generate-html-output-that-can-not-be-changed before doing this at all, and I cound’t agree more with him. So, remind that: with great power, comes great responsibilities.