Donnerstag, 25. November 2010

19: HTML Tables


Zusammengefasst nach dem Artikel von Jenifer Hanen
Quelle: http://dev.opera.com/articles/view/19-html-tables/
Semantic HTML and Search Engine Optimization

Im Webdesign Tabellen sind eine gute Möglichkeit, um Daten in einer tabellarischen Form zu organisieren.
Früher wurden Tabellen noch dazu verwendet, um eine Webseite im HTML aufzubauen, dies ist jedoch der falsche Weg.

Grundstruktur

 
<table></table>: Dieser Tag umfasst die gesamte Tabelle und weist den Browser darauf hin, dass der folgende Inhalt in eine tabellarischen Form dargestellt wird.

<tr></tr>: bedeutet „table row“, also die jeweilige Reihe (horizontal) einer Tabelle und kommt direkt nach dem <tabel> Tag.

<td></td>: der td Tag definiert die Tabellen Zelle oder jeden individuellen Inhalt innerhalb der Reihe.

Beispiel:
<table>
    <tr>
        <td>content</td>
        <td>content</td>
        <td>content</td>
    </tr>
</table>

Weitere Elemente

 
<caption></caption>: mit dem caption Element kann ein Titel zu der Tabelle gesetzt werden.

<th></th>: bedeutet „table head“ und definiert somit die jeweilige Spalten Überschrift.

thead, tbody, tfoot: definiert den Tabellen header, - body und - footer. Bei einer komplexen Tabelle können diese Elemente helfen, um die Daten besser zu strukturieren, nicht nur für den Programmierer, sondern auch für den Browser.

colspan und rowspan: diese Eigenschaften dienen dazu, dass eine Tabellen Zelle bzw. Spalte mehr als nur Zelle/Spalte lang ist. <td rowspan=“3“>.

summary: definiert eine Zusammenfassung des Tabellen Inhaltes. Diese Eigenschaft ist bei Screenreaders sehr hilfreich. Diese Summary erscheint jedoch nicht auf der Webseite.

scope: das scope Element kann im <th> Tag verwendet werden, um Screenreaders zu sagen, dass der <th> Inhalt Titel einer Spalte oder Reihe ist. Dieses Element wird nur im <th> Element verwendet.

Beispiel:
<table summary=“a summary of recent major volcanic eruptions in the Pacific Northwest“>
    <caption>Recent Major Volcanic Eruptions in the Pacific Northwest</caption>
    <thead>
        <tr>
            <th scope=“col“>Volcano Name</th>
        </tr>
    </thead>
    <tfoot>
        <tr>
            <td colspan=“4“>Compiled in 2008 by Ms Jen</td>
        </tr>
    </tfoot> 
    <tbody>
        <tr>
            <th scope=“row“>Mt. Lassen</th>
            <td>California</td>
        </tr>
        <tr>
            <th scope=“row“>Mt. Hood</th>
            <td>Oregon</td>
        </tr>
    </tbody>
</table>

Diese ganzen Tags und Eigenschaften ist alles, um eine gute Tabelle zu programmieren. Um die Tabelle nun noch schön zu gestalten, wird wieder das CSS verwendet.

CSS: styling einer Tabelle

 
Mit der Hilf von CSS kann die Tabelle auf jede Art und Weise formatiert werden. Es kann ein Rahmen (border: 1px solid #333) hinzugefügt werden oder auch nur eine Linie (border-bottom: 1px solid #333) darunter. Dem Text oder den einzelnen Zellen kann eine Farbe zugewiesen werden (background:#ffffff).
Die Formatierungsmöglichkeiten sind im Großen und Ganzen die gleichen wie bei einem normalen HTML Inhalt. Am Besten ist es, das ganze einfach auszuprobieren.

Keine Kommentare:

Kommentar veröffentlichen