Suggestion for Semantic Markup

Question

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

Answer 1

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

Answer 2

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 :)

Answer 3

I agree with Andrew. This is tabular data so you should use a <table> but keep in mind that you should define table headers, columns, and footers properly.

Your other option is to go with a headerless table where you would use a <div>for the header and footer and a <table> as the body. However, I don't recommend doing this. One reason would be you would want headers for things like client-side sorting if you're using JavaScript.

Answer 4

You're not violating anything putting that in a table form. Sure, some people will whine about it, but it's close enough to tabular data that you may as well.