Search code examples
htmlcssmarkupsemantic-markup

Suggestion for Semantic Markup


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


Solution

  • 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).