I am creating a web GUI for an application I am working on. This particular section will sit within a larger page that is of a good semantic makeup. However, I am unsure what the best option to markup the below screen semantically.
My initial thought is to separate the top half from the bottom half via divs. Therefore, markup for the top is pretty easy. Leaving the bottom which is where I feel stumped. The easiest answer is a table but this content doesn't easily fit the only use tables for tabular data rule. Especially considering that headers would look conspicuous in this layout. Suggestions?
Need Semantic Markup for this Image http://img183.imageshack.us/img183/2261/semanticmarkup.png
I would use a table for the lower portion because in my opinion this is tabular data. I see 4 columns (icon, project name, project description, and action buttons). I don't see any reason to not use a table for this layout (not to mention that any other approach that would make this layout scale properly would require JavaScript and a lot of headaches to work right).
I don't think it would be the most egregious violation of semantic markup if you put that stuff in tables. Except for the buttons, it looks pretty tabular to me. I think the CSS gods would absolve you :)
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With