Witam.
Czy można zbudować tabelę z elementów <div></div>, która będzie wyglądała jak zwykła tabela <table></table>? Jeżeli tak, to jak powinien wyglądać odpowiedni arkusz stylów?
Witam.
Czy można zbudować tabelę z elementów <div></div>, która będzie wyglądała jak zwykła tabela <table></table>? Jeżeli tak, to jak powinien wyglądać odpowiedni arkusz stylów?
Oczywiście że można.
Ale jest to sprzeczne z ideą HTML-a, gdzie każdy znacznik ma swoją ściśle określoną funkcję, a wizualne formatowanie jest już po stronie CSS. Taka niby-tabela z DIVów może też bardzo komplikować życie późniejszym użytkownikom naszej strony. Na przykład pobieranie danych opublikowanych przez nas narzędziami z MS Excel będzie niemożliwe - kwerenda sieci WEB MS Excel wymaga, by dane były publikowane w formie tabeli ze znacznikami TABLE.
Proszę też wziąć pod uwagę to, że strona napisana samymi DIVami może nieco gorzej pozycjonować się w wyszukiwarkach. HTML określa strukturę dokumentu, a DIVy są wyłącznie pustymi kontenerami bez znaczenia semantycznego.
Widziałem niegdyś kilka stron chorych na "divizm", w których autorzy znacznikami DIV i klasami CSS próbowali zastępować każdy ze standardowych znaczników HTML. Wizualnie nie było to nawet najgorsze - ale oglądając źródło strony miałem nieustające wrażenie, że twórcy używają DIVów i klas wyłącznie dlatego, że nie chce im się stosować typowych znaczników HTML. W niektórych przypadkach nawet podejrzewałem twórców o słabą znajomość HTML, którą maskowali DIVami.
Natomiast z technicznego punktu widzenia - da się to zrobić bez problemu. Można by było użyć DIVów w roli znaczników: TABLE, TR i TD (albo jakichkolwiek innych). Trzeba by im tylko przypisać odpowiednie klasy, a następnie w arkuszu CSS zdefiniować wymiary i inne parametry. Nawet można by się pobawić DIVami w roli komórek, opływających się wzajemnie, umieszczonych w jednym DIVie kontenerze.
Przykładowy HTML z DIVami zamiast tabelki mógłby wyglądać tak:
<div class="tabelka"> <div class="wiersz"> <div class="komorka">Treść</div> <div class="komorka">treść</div> <div class="komorka">treść treść treść treść treść </div> </div> <div class="wiersz"> <div class="komorka">Treść</div> <div class="komorka">treść</div> <div class="komorka">treść</div> </div> <div class="wiersz"> <div class="komorka">treść treść treść treść treść treść </div> <div class="komorka">treść</div> <div class="komorka">treść</div> </div> </div>
Natomiast przykładowy CSS mógłby wyglądać tak [Pisałem to na szybko, więc może być, że suma szerokości komórek, grubości BORDERów i PADDINGÓW może być nieco mniejsza niż zadeklarowana szerokość całej ;-) tabeli]:
div.tabelka, div.komorka { border-style: solid; border-color: #eeeeee; border-width: 3px; } div.tabelka { width: 400px; margin: 10px auto; } div.komorka { width: 120px; height: 20px; text-align: center; padding: 8px; }
Ale to co powyżej - proszę traktować wyłącznie jako teoretyczną zabawę DIVami. W praktyce do publikowania danych tabelarycznych zdecydowanie lepiej jest używać znaczników TABLE, TR i TD.
Polecam bardzo fajny tekst o znacznikach HTML i semantyce:
https://blog.performancemedia.pl/seo-sem/seo/semantyka-czyli-jak-poprawnie-stosowac-znaczniki-html
Na koniec cytat z tejże strony:
"Znaczniki div
i span
oferują ogólny mechanizm nadawania struktury dokumentom HTML. Mogą być stosowane, gdy nie ma innego elementu, który byłby poprawnie dopasowany do zawartości."
Pozdrawiam.
Andrzej.