Divs Vs Table for styled data\
-
Hello,
We're in the process of launching MultipleSclerosis.net and are a bit confused with how to present some specific information.
Looking at pages such as http://multiplesclerosis.net/symptoms/, http://multiplesclerosis.net/what-is-ms/courses-patterns/ and http://multiplesclerosis.net/treatment/prescription-nonprescription-medications/ is it better to keep this data structured as divs, and style them as tables or to keep them as tables and style them accordingly.
Though not technically "tabular" data, i'm not too sure how to handle this. The text to code ratio is quite high with the divs in the markup, which though i'm not overly worried about, it could cause some issues with the site's indexability.
Thanks I appreciate any feedback.
-
Hey Oliver
Looking at those tables I can't see that you would have any problems with how you have done it. We do have a lot of mark up but it is all seemingly well structured with divs, unordered lists, list items etc.
I certainly would not worry about it in this case.
Marcus
-
My opinion would be that DIV-based markup is the better choice here. As you said yourself, it's not really tabular data, so in using DIVs you can use semantic markup which is a positive for SEO.
You could improve/cleanup the markup of that data though, by:
-
Use
,
,
tags. Even the bolded text in the lefthand column are basically headers for the text in the righthand column.
-
You should remove the empty class="hr">tags, which I assume are in there to create the horizontal lines. It's nit picky, as if you remove them, you'll need to add a 'wrapper DIV' surrounding each row, so you won't really be cutting down on the code used that much. But having empty tags that are only there for presentation purposes is generally frowned upon. You could create the same visual effect by using a border or by using a background image (if you want the line to not fully extend across the row).
That's all pretty nitpicky coding stuff though. For SEO purposes, I think the only thing that might have an affect is using the <hx>tags.</hx>
-