Kategorie szkoleń | Egzaminy | Kontakt
  • 1
  • 2
  • 29

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?

 

Karol_Pisarek
  • Zapytał
  • @ Karol_Pisarek | 24.01.2017
    • lider
    • 5
    • 1
    • 13

Odpowiedź (1)

  • 3

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.

 

 

 

 

  • Odpowiedział
  • @ | 24.01.2017
  • TRENER ALTKOM AKADEMII
Komentarze
Dziękuję za interesującą odpowiedź.
Skomentował : @ Karol_Pisarek ,27.01.2017
  • 5
  • 1
  • 13