• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

HTML Tabelle

A

Atze

Neues Mitglied
Konnt ihr mir sagen wie eine gute HTML Tabelle ausieht und wie der cod ist :?::?:




Danke atze ;Jump;Jump
 
Zuletzt bearbeitet:
HTML: 
<table>
    <caption>Name/Titel/Zweck der Tabelle</caption>
    <thead>
        <tr>
            <th scope="col">Spalte 1/Zeile 1</th>
            <th scope="col">Spalte 2/Zeile 1</th>
            <th scope="col">Spalte 3/Zeile 1</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Spalte 1/Zeile 2</td>
            <td>Spalte 2/Zeile 2</td>
            <td>Spalte 3/Zeile 2</td>
        </tr>
        <tr>
            <td>Spalte 1/Zeile 3</td>
            <td>Spalte 2/Zeile 3</td>
            <td>Spalte 3/Zeile 3</td>
        </tr>
    </tbody>
</table>
Das scope-Attribut gibt in diesem Beispiel an, dass sich das jeweilige th-Element auf die Zellen der darunterliegenden Spalte bezieht. Insgesamt gibt es fünf Werte für das scope-Attribut.

Es kommt natürlich auch darauf an, wie deine Tabelle aussehen soll. Wenn du unten in der Tabelle noch eine kleine Zusammenfassung für die Spalte einfügen willst, gibt es das tfoot-Element. Dann müsstest du zwischen </tbody> und </table> das hier einfügen:

HTML: 
<tfoot>
    <tr>
        <td>Spalte 1/Zeile 4</td>
        <td>Spalte 2/Zeile 4</td>
        <td>Spalte 3/Zeile 4</td>
    </tr>
</tfoot>
Wenn deine Tabelle von der Logik her zeilenweise verläuft, macht wiederrum das thead-Element keinen Sinn. Dann müsstest du deine Tabelle so schreiben:

HTML: 
<table>
    <caption>Name/Titel/Zweck der Tabelle</caption>
    <tbody>
        <tr>
            <th scope="row">Spalte 1/Zeile 1</td>
            <td>Spalte 2/Zeile 1</td>
        </tr>
        <tr>
            <th scope="row">Spalte 1/Zeile 2</td>
            <td>Spalte 2/Zeile 2</td>
        </tr>
        <tr>
            <th scope="row">Spalte 1/Zeile 3</td>
            <td>Spalte 2/Zeile 3</td>
        </tr>
    </tbody>
</table>
 
Zuletzt bearbeitet von einem Moderator:
Es gibt weder "gute" noch "schlechte" HTML-Tabellen. Deshalb gibt es auch nur einen einheitlichen HTML-Code dafür:
SELFHTML: HTML/XHTML / Tabellen / Aufbau einer Tabelle

Es wäre jedoch nicht gut, wenn du für eine komplette Website eine Tabelle verwenden würdest.
Gut wäre es dagegen, wenn du die Tabelle für ihren eigentlichen Zweck verwendest, nämlich für eine strukturierte, tabellarische Darstellung.
 
Ich sehe das auch so, dass es gute und schlechte Tabellen gibt. Vielleicht sind die meisten schlechten Tabellen auch invalide, aber über manche Attribute, die es gibt (auch bei anderen Tags) machen sich einige nicht genügend Gedanken. Das fängt an mit dem alt-Attribut von <img>. Aber hier ist das Fehlen des Attributs auch invalide, wobei ein fehlendes <caption> IIRC valide ist.

Aber wo zu solchen Themen besser gucken als bei Einfach-Für-Alle?
BITV-Anforderung 5 - Tabellen : Einfach für Alle

Viel zu lesen, aber immer wieder sehr interessant!
 
Efchen schrieb:
Aber hier ist das Fehlen des Attributs auch invalide, wobei ein fehlendes <caption> IIRC valide ist.
Zum Vergrößern anklicken....

Wenn manche Elemente oder Attribute beispielsweise Screenreader-Benutzern helfen, dann soll man sie auch einsetzen. Vor allem dann, wenn der Code dann sowieso valide bleibt.

Aber auch wenn der Code invalide werden würde, würde ich dazu raten. Bestes Beispiel: Das role-Attribut der WAI. Wenn du es verwendest wird dein HTML-Code invalide, aber wenn Screenreader-Benutzer dadurch schneller zur Navigation oder zum Inhalt deiner Website kommen, dann ist das eine gute und erstrebenswerte Sache.
 
Zuletzt bearbeitet von einem Moderator:
so könnte es klappen

HTML: 
<div>
<table border="0" width="95%">
<tr>
<td colspan="3" bgcolor="red">
OBEN
</td>
</tr>
<tr>
<td width="250" bgcolor="green">
LINKS
</td>
<td width="500" bgcolor="blue">
INHALT
</td>
<td width="250" bgcolor="green">
RECHTS
</td>
</tr>
<tr>
<td colspan="3" bgcolor="grey">
UNTEN
</td>
</tr>
</table
</div>
 
@HTMLPro: Dein Benutzername vermittelt uns, dass du Sinn für Humor hast. :D Um mich mal kurz zu fassen: Deine Tabelle ist nicht zu empfehlen.
 
Manchmal ist es echt traurig, was für Beiträge es in ein Forum schaffen, das irgendwann mal von Ahnungslosen durchsucht und dann für bare Münze gehalten wird. Kein Wunder, dass huete noch solche Krücken aus dem letzten Jahrtausend existieren. Besonders lustig ist das dann immer, dass solche Dinge von Jünglingen empfohlen werden, die zu der Zeit, als solcher Code richtig war, noch in die Windeln gemacht haben, oder zumindest "Internet" oder "WWW" noch nie gehört haben.
 
francesco schrieb:
Was hat denn eine Tabelle mit Layout zu tun? Überhaupt nichts.
Zum Vergrößern anklicken....
Solange es MÖGLICH ist, Layout mit Tabellen zu machen, hat es was damit zu tun. Egal ob es die gute oder die schlechte Lösung ist.

Ich bin zwar auch ein "CSS-Layouter", bin aber der Meinung, dass man Leute nicht auf eine solche Art und Weise, die nicht hilft, auf den einzig richtigen Weg führt.

Ich will damit nicht sagen, dass Tabellen-Layout gut ist ^^
 
Asterixus schrieb:
Ich bin zwar auch ein "CSS-Layouter", bin aber der Meinung, dass man Leute nicht auf eine solche Art und Weise, die nicht hilft, auf den einzig richtigen Weg führt.
Zum Vergrößern anklicken....

Ich habe geschrieben, dass Layout nichts mit Tabellen zu tun hat. Wieso sollte dieser Satz "nicht helfen"?

Wenn jemand denkt, man mache mittels Tabellen oder mittels div-Containern das Layout einer Website, dann muss man ihn berichtigen. Ansonsten wird diese Person nie begreifen, dass das Layout einer Website allein Sache des CSS ist und sich nicht über irgendwelche HTML-Elemente definiert.
 
Asterixus schrieb:
Solange es MÖGLICH ist, Layout mit Tabellen zu machen, hat es was damit zu tun.
Zum Vergrößern anklicken....
Quatsch. BobbyCars haben auch nichts mit Autobahnen zu tun, nur weil es *möglich* ist, damit auf Autobahnen zu fahren.

Egal ob es die gute oder die schlechte Lösung ist.
Zum Vergrößern anklicken....
Es ist keine gute oder schlechte Lösung, es ist überhaupt keine Lösung, es ist schlichtweg falsch und unsinnig.

Ich bin zwar auch ein "CSS-Layouter", bin aber der Meinung, dass man Leute nicht auf eine solche Art und Weise, die nicht hilft, auf den einzig richtigen Weg führt.
Zum Vergrößern anklicken....
Man bringt Leute aber auch nicht dazu, etwas richtig zu lernen, wenn man ihnen sagt, dass der falsche Weg angeblich auch zum Ziel führt, insbesondere wenn man eigentlich genau wissen sollte, dass er das eben nicht tut!

Ich will damit nicht sagen, dass Tabellen-Layout gut ist ^^
Zum Vergrößern anklicken....
Aber was Du damit sagen wolltest, weißt Du eigentlich selber nicht, da war nämlich leider nichts hilfreiches oder sinnvolles dabei, sorry. :-(

Niklas schrieb:
Hier habe ich alles gelernt über HTML Tabellen gelernt
Tabellen - Lektion 10 | HTML Tutorial | HTML.net
Zum Vergrößern anklicken....
Da fällt mir gleich im ersten Satz etwas entscheidendes ein, was sich nicht wirklich in den Köpfen der Leute festzusetzen vermag, warum kann ich nicht erklären.
Da steht "Tabellen werden verwendet um “Tabellendaten” anzuzeigen". Das ist so erstmal falsch. Tabellen werden verwendet, um Tabellendaten *auszuzeichnen*. Angezeigt wird mit HTML nichts. HTML ist nicht für die Anzeige. Suchmaschinen bekommen auch nichts angezeigt, und doch interpretieren sie HTML.
Es mag wie Haarspalterei klingen, aber das ist eine der Grundursachen, warum viele nicht begreifen, was HTML eigentlich ist. Weil sie immer glauben, sie definieren mit HTML die Ausgabe. Daher verstehen sie auch nie, was eigentlich mit Semantik gemeint ist.

Ansonten ist diese Site ganz okay, abgesehen davon, dass sie auf all die Attribute eingeht, die man aufgrund der Trennung von Inhalt und Layout nicht verwenden sollte: align, border und so. Das macht man alles mit CSS. Aussehen ist immer die Aufgabe von CSS, nie von HTML.

Auch wichtig in dem Zusammenhang ist immer noch der Klassiker: Warum Layout mit Tabellen dumm ist
 
Zuletzt bearbeitet von einem Moderator:
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben