B2F: Unsauberes HTML mit table statt div?

Hallo,

ich habe mal eine Frage.
Ist es unsauber, wenn man eine Website mit Tabellen und nicht mit div-Blöcken designt? Also, dass man die Tabellen nur benutzt um irgendwelche Hintergründe und Inhalte etc. sauber anzuordnen, teilweise ohne Text? Oder sollte man dafür immer div benutzen?
Wenn ich mir manche Websites ansehe, sind diese meistens mit div-Blöcken realisiert, manchmal finde ich es aber leichter etwas mit Tabellen zu designen.

Danke schonmal für eure Antworten :)

greetz

  1. hallo,

    Ist es unsauber, wenn man eine Website mit Tabellen und nicht mit div-Blöcken designt?

    Ja - allerdings nicht im technischen Sinn. Der Validator interessiert sich nicht dafür, wozu du eine Tabelle benutzt, ihn interessiert nur, ob sie korrekt dargestellt ist.

    Also, dass man die Tabellen nur benutzt um irgendwelche Hintergründe und Inhalte etc. sauber anzuordnen, teilweise ohne Text?

    Die Standardantwort lautet: das solltest du nicht tun. Tabellen sind dazu da, tabellarische Daten aufzunehmen.

    Oder sollte man dafür immer div benutzen?

    Nein, nicht "immer". Es gibt sicherlich viele Bestandteile einer Webseite, die ohne Tabellen und ohne DIVs auskommen können.

    Grüße aus Berlin

    Christoph S.

    --
    Visitenkarte
    ss:| zu:) ls:& fo:) va:) sh:| rl:|
    1. hallo,

      Danke für die Antwort :-)

      Die Standardantwort lautet: das solltest du nicht tun. Tabellen sind dazu da, tabellarische Daten aufzunehmen.

      Ich habe dazu noch 2 "Praxisbeispiele":
      Wenn ich eine Navigationsleiste erstellen will, sollte diese dann auch mit div realisiert werden?

      Das 2. Beispiel ist eher ein Problem das ich beim Designen mit div habe: Wenn ich links und rechts je nach Auflösung des Betrachters Freiraum lasse und in der Mitte den Inhalt darstelle und dieser in einem div steht, aber von der höhe her ziemlich klein ist dann sehe ich am ende des divs die Hintergrund vom body. Wie kann ich soetwas vermeiden? Also, dass der div-Block bis unten an den Seitenrand geht?

      Grüße

      1. hallo,

        Wenn ich eine Navigationsleiste erstellen will, sollte diese dann auch mit div realisiert werden?

        In vielen Fällen reicht eine Liuste vollkommen aus.

        Das 2. Beispiel ist eher ein Problem das ich beim Designen mit div habe: Wenn ich links und rechts je nach Auflösung des Betrachters Freiraum lasse und in der Mitte den Inhalt darstelle und dieser in einem div steht, aber von der höhe her ziemlich klein ist dann sehe ich am ende des divs die Hintergrund vom body. Wie kann ich soetwas vermeiden? Also, dass der div-Block bis unten an den Seitenrand geht?

        Du kannst ihm eine Höhe zuweisen.

        Unabhängig davon finde ich diese "Design-Idee", daß man rechts und links Platz läßt und den Seiteninhalt gewissermaßen als Briefmarke in die Mitte klebt, ziemlich bescheuert. Das ist eine Unart, die in den letzten zwei Jahren allerdings gewaltig viele Symapthisanten gefunden hat.

        Grüße aus Berlin

        Christoph S.

        --
        Visitenkarte
        ss:| zu:) ls:& fo:) va:) sh:| rl:|
        1. Hi,

          Wenn ich eine Navigationsleiste erstellen will, sollte diese dann auch mit div realisiert werden?

          In vielen Fällen reicht eine Liuste vollkommen aus.

          Eine Liste? Also die Navigationsleiste soll auch Hindergründe für die Buttons haben. Geht das damit?

          Du kannst ihm eine Höhe zuweisen.

          Diese ist aber aufgrund des Inhalts und der Auflösung ja auch immer verschieden.
          height: 100% funktioniert nicht..

          Grüße

          1. hallo,

            Eine Liste? Also die Navigationsleiste soll auch Hindergründe für die Buttons haben. Geht das damit?

            Selbstverständlich kannst du mit CSS alle möglichen Hintergründe festlegen.

            Du kannst ihm eine Höhe zuweisen.
            Diese ist aber aufgrund des Inhalts und der Auflösung ja auch immer verschieden.

            Na und?

            height: 100% funktioniert nicht

            Selbstverständlich funktioniert die zugehörende CSS-Anweisung.

            Grüße aus Berlin

            Christoph S.

            --
            Visitenkarte
            ss:| zu:) ls:& fo:) va:) sh:| rl:|
            1. Hi,

              height: 100% funktioniert nicht

              Selbstverständlich funktioniert die zugehörende CSS-Anweisung.

              Hmm, also ich erstelle in meinem HTML-Dokument ein div-Element mit:
              <div id="heighttest">
                test
              </div>

              in der CSS-Datei steht:
              #heighttest {
                width: 984px;
                height: 100%;
                margin: 0px auto;
                background-color: #FFFFFF;
              }

              Body-Background ist eine andere Farbe.
              Funktioniert bei mir leider nicht :-(

              Grüße

              1. Hallo,

                Body-Background ist eine andere Farbe.
                Funktioniert bei mir leider nicht :-(

                Prozentangaben beziehen sich auf die Höhe des Elternelements. Hat body denn auch die Höhe 100% und hat das Elternelement von body ebenfalls die Höhe 100%?

                Gruss,
                OhneName

                1. Hi,

                  Prozentangaben beziehen sich auf die Höhe des Elternelements. Hat body denn auch die Höhe 100% und hat das Elternelement von body ebenfalls die Höhe 100%?

                  Seit wann hat denn der body ein Elternelement bzw. welches Element wäre das?

                  Grüße

                  1. Hallo,

                    Seit wann hat denn der body ein Elternelement bzw. welches Element wäre das?

                    Schon immer. Das wäre das html-Element. Das body-Element ist formatierbar wie jedes andere Element auch (außer dem html-Element). Merk dir das ;)

                    Gruß;

                    1. hallo Daniel,

                      Das body-Element ist formatierbar wie jedes andere Element auch (außer dem html-Element).

                      Nana. Auch <html> ist (in Grenzen) durchaus formatierbar.

                      Merk dir das ;)

                      Merk dir das ;-)

                      Grüße aus Berlin

                      Christoph S.

                      --
                      Visitenkarte
                      ss:| zu:) ls:& fo:) va:) sh:| rl:|
                      1. Hallo,

                        Nana. Auch <html> ist (in Grenzen) durchaus formatierbar.

                        Nichts anderes wolle ich damit sagen, werde aber in Zukunft auf die Formulierung achten.

                        Merk dir das ;-)

                        Zu Befehl!

                        Gute Nacht :)

                        1. Danke für eure Hilfe, es funktioniert jetzt wunderbar!

  2. hallo,

    tabellen sollten grundsätzlich nicht zum layouten benutzt werden.
    siehe auch hier:
    http://de.selfhtml.org/html/tabellen/layouts.htm

    leider ist es vielerorts aber noch gängige praxis, tabellen zu verwenden.

    philipp

  3. Hallo,

    Ist es unsauber, wenn man eine Website mit Tabellen und nicht mit div-Blöcken designt?

    Tabellen sind das klassiche Layoutwerkzeug, und Tabellen werden von wohl allen
    üblichen Browsern so dargestellt wie beabsichtigt. Die Zugänglichkeit ist also
    erstmal sehr viel besser als bei einer Anordnung anderer HTML-Elemente durch
    CSS.

    Probleme sind aber z.B. bei Screenreadern vorstellbar, die Seite wäre also
    wahrscheinlich bei (stärkerer) Tabellennutzung zur Seitenaufteilung weniger
    barrierefrei.
    Ausserdem sind mit CSS bzw. ohne Tabellen meist auch ähnliche Layouts umsetzbar,
    der HTML-Code ist im Idealfall "richtiger" und auch leichter wartbar.

    Grüsse

    Cyx23

    1. hallo,

      Tabellen sind das klassiche Layoutwerkzeug

      Richtig - allerdings haben wir die Periode der "Klassik" längst hinter uns und befinden uns zur Zeit in der Moderne. Einige meinen sogar, wir seien bereits postmodern.

      die Seite wäre also wahrscheinlich bei (stärkerer) Tabellennutzung zur Seitenaufteilung weniger barrierefrei.

      Sie wäre _überhaupt nicht_ barrierefrei.

      Grüße aus Berlin

      Christoph S.

      --
      Visitenkarte
      ss:| zu:) ls:& fo:) va:) sh:| rl:|
      1. Sie wäre _überhaupt nicht_ barrierefrei.

        Wieso nicht? Sie bringen häufig eine falsche (im Sinne von: unerwünschte) Abfolge der Inhalte mit sich, wenn man z.B. einen Spaltensatz mit Tabellen baut, aber warum sonst sind Tabellen nicht barrierefrei?

        Viele Grüße!
        _ds

        --
        »Echt erreichten wahrscheinlich genau in diesem Moment den Höhepunkt ihrer Karriere, und wenn nicht, dann schien es wenigstens so.«
        - Top Fives, Denn das ist Echt.
      2. Hallo Christoph,

        Einige meinen sogar, wir seien bereits postmodern.

        seit wann ist die Post modern?

        *scnr*
         Martin

        --
        Mir geht es gut. Ich mag die kleinen Pillen, die sie mir dauernd geben.
        Aber warum bin ich ans Bett gefesselt?
        1. hallo,

          seit wann ist die Post modern?

          Bitte jetzt keine Wortwitze, ja? Wir "modern" ja auch nicht vor uns hin - hoffe ich jedenfalls ;-)
          Andrerseits: mit dem Mindestlohn könnte die Post duchaus zu mehr Modernität gezwungen worden sein als ihr lieb war.

          Grüße aus Berlin

          Christoph S.

          --
          Visitenkarte
          ss:| zu:) ls:& fo:) va:) sh:| rl:|
  4. Hallo,

    Idee:?

    Das Ganze in ein umgebendes DIV, und diesem DIV dann den kompletten
    Hintergrud zuordnen. Die eingebetteten DIVs dann transparent. Mit CSS wie

    --------------------------------------
    .transparentes_div{
     background : transparent;
    }
    -------------------------------------

    In HTML dann:

    ---------------------------------------------------------
    <div class="transparentes_div"> ... hier text ... </div>
    ---------------------------------------------------------

    Achte den Punkt vor "transparentes_div{".

    Fände ich fluider. MHO.
    Best regards
    C.