Propozycja znacznika semantycznego

Question

Tworzę internetowy interfejs graficzny dla aplikacji, nad którą pracuję. Ta konkretna sekcja będzie znajdować się na większej stronie, która ma dobry semantyczny wygląd. Nie jestem jednak pewny, jaka jest najlepsza opcja znacznika na poniższym ekranie semantycznie.

Moja początkowa myśl polega na oddzieleniu górnej połowy od dolnej połowy za pomocą elementów div. Dlatego znaczniki na górę są dość łatwe. Pozostawiając dno, w którym czuję się zakłopotany. Najłatwiejszą odpowiedzią jest tabela, ale ta treść nie pasuje do tabel tylko do użycia dla tabelarycznej reguły danych. Zwłaszcza biorąc pod uwagę, że nagłówki wyglądałyby rzucająco w tym układzie. Propozycje?

Need Semantic Markup for this Image http://img183.imageshack.us/img183/2261/semanticmarkup.png

Answer 1

użyłbym stolik na dolnej części, ponieważ moim zdaniem to jest danych tabelarycznych. Widzę 4 kolumny (ikona, nazwa projektu, opis projektu i przyciski czynności). Nie widzę powodu, aby nie używać tabeli do tego układu (nie wspominając o tym, że jakiekolwiek inne podejście, które spowodowałoby prawidłowe skalowanie tego układu, wymagałoby JavaScriptu i wielu bóle głowy do prawidłowego działania).

Answer 2

Nie sądzę, że byłoby to najbardziej rażące naruszenie znaczników semantycznych, jeśli umieści się to w tabelach. Z wyjątkiem przycisków, wygląda na całkiem tabelaryczną. Sądzę, że bogowie CSS cię rozgrzeszą :)

Answer 3

Nie naruszasz niczego, umieszczając to w formie tabeli. Pewnie, niektórzy ludzie będą narzekać, ale jest to wystarczająco bliskie danych tabelarycznych, że równie dobrze możesz.

Answer 4

Zgadzam się z Andrew. Są to dane tabelaryczne, więc powinieneś użyć <table>, ale pamiętaj, że powinieneś poprawnie zdefiniować nagłówki, kolumny i stopki tabeli.

Inną opcją jest przejście do tabeli bez nagłówków, w której do nagłówka i stopki użyty zostałby znak <div> oraz <table> jako ciało. Jednak nie zalecam tego. Jednym z powodów jest to, że chcesz używać nagłówków do sortowania po stronie klienta, jeśli używasz JavaScript.