Jump to content
craig-c

tables/columns in HTML 5

Recommended Posts

I am building a web page that's part of a contacts system. The page enables the user to search for a contact and after finding a contact they can view and edit that contacts details in the web page.

 

The page consists of a number of tables that I want to control using HTML 5 and CSS 3. In full screen mode (e.g. on a desktop machine) there are up to 4 tables across the page. I need the page to convert to a single, narrow column of tables when the screen width gets narrower (e.g. when on a mobile phone).

 

I've attached 2 screen shots. The first shows the page in full screen mode: post-174326-0-53276400-1403535419_thumb.jpg

 

The other shows how I want the page to convert when it goes into narrow mode: post-174326-0-39841100-1403537114_thumb.jpg

 

Please let me know what I can do to get the page working in that way.

 

I've already played around with this problem in different ways. Initially I tried using lists, but found that I couldn't combine tables with lists, because they don't seem to display correctly in that set up.

 

I've also tried using <section>, <article> and <aside> but found it difficult to control the widths of things (tables) when using these. Also, it seems difficult to use these components when I have 3 or 4 tables spread across the page and I want/need to convert those into a single column of tables with only one table per row in that column.

 

It currently seems to me as though HTML 5 and CSS 3 just aren't set up to deal with this kind of scenario. I hope someone out there can prove me wrong and point me in the right direction, so that I can resolve this problem. Thanks in advance for your time.

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

×