I had a list I needed to display, a very, very big list. It was so long that the only reasonable thing to do was to consider using a table. Granted I had to remember how to write the markup for a table as the last time I did this was for a musicians site (incidentally I don’t think they have used the site since I built it, but I digress.)

After tweaking the loop for a 4 column table structure, and making the table pretty, I had the terrible realization. “How do I make this work on mobile?” I mean I know a table will display well enough on mobile but the site is responsive (another version of a table I might add, but that is another discussion.) So giving my columns 25% width will eventually become problematic as the window/screen gets smaller and smaller.

I had a few obvious options:

• Output a table version and an unordered list, hiding the list or table based on media queries.
• Use the jetpack mobile detection to serve up a table for desktop users and an unordered list for mobile (though this doesn’t really work for small windows on a desktop.)
• Abandon the table altogether and style my unordered list to behave like a table when possible and become a simple list when necessary.
• Or in this case use responsive gridding to accomplish the same thing.

Of course I could probably use a jQuery plugin to handle this as well, but I rather not add more javascript when I can accomplish the same thing on the backend or with CSS.

So that brings me to my point, are the days of HTML tables numbered? Aside from very specific use-cases is there any way to really make a table work well for desktop and mobile alike?

I am interested to here what everyone thinks, leave a comment below or send me a message via twitter.