Have I made a mistake by using <table>?

Technical Documentation Page. I draw your attention to the “Spelling” and “Idioms” sections of the page. Should I have used grid or flexbox to achieve this two-column layout? Or is <table> ok? :

https://codepen.io/lepros/pen/QWgKPvB

Table in this case seems to fit, as flexbox is more of a general non-specific way of positioning elements. If you are putting data in a pre-determined location in columns and rows then a table is best. If you were to do the same but with elements (div boxes, block images, etc), then use grid (or flexbox for flexibility).

Here is what your table looks like on a 4k monitor:

1 Like

I think with some internet searches you will find using table for layout is the “old” way.

“Although we can achieve pretty nice layouts with HTML tables, but tables weren’t really designed as a layout tool. Tables are more suited to presenting tabular data.”

“You can create better layout using DIV, SPAN along with CSS.”

https://www.tutorialspoint.com/html/html_layouts.htm

But the way you are using it I’m not going to say it is a mistake because you kind of do have “tabular data” which needs to be seen side by side. Just pointing out that if the use of table is only for layout rather than presenting data, maybe there is a better solution.

1 Like

Thank you both, @michaelnicol and @eoja. Yes, from what I had seen online, I was starting to worry that I was taking an archaic approach or something. I feel better sticking with the <table> layout now. Though it might be a challenge getting the spacing between columns right and having it be responsive.

Is ok to use table for representing data, but you need to make them accessible for screen readers check this:

https://www.w3.org/WAI/tutorials/tables/

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.