CSS, HTML UND JAVASCRIPT MIT {STIL}

Aber Tabellen sind weiterhin ein bedeutendes Hilfsmittel beim Layout von Newslettern. Für die Positionierung von Inhalten in der Email zählt die Zuverlässigkeit der HTML table gegenüber einem CSS-basierten Layouts.

Die HTML-Tabelle unterbricht den normalen Fluss von Texten und Bildern (table ist ein Block-Element) und wird in der nächsten Zeile eingefügt. Am Ende des table-Tags wird der Fluss der Texte und Bilder in der nächsten Zeile wieder aufgenommen.

                <table>    <-------------------------------+
                    <tr>      <--------------+             |
Kopfzelle +----->       <th> … </th>         |             |
Kopfzelle +----->       <th> … </th>         +---- Zeile   |
Kopfzelle +----->       <th> … </th>         |             |
                    </tr>     <--------------+             |
                    <tr>      <--------------+             +--- Tabelle
    Zelle +----->       <td> … </td>         |             |
    Zelle +----->       <td> … </td>         +---- Zeile   |
    Zelle +----->       <td> … </td>         |             |
                    </tr>     <--------------+             |
                </table>   <-------------------------------+

Tabellenzeilen und -spalten organisieren

HTML-Tabellen sind zeilenorientiert – d.h. sie werden Zeile für Zeile aufgebaut. Das Innenleben einer Tabelle besteht aus Tabellenzeilen (<tr>), in denen die einzelnen Zellen liegen, aus Kopfzeilen (th) mit Zellen und dem caption-Tag.

Die HTML-Attribute rowspan und colspan fassen nebeneinander liegende Zellen einer Tabelle zeilen- oder spaltenweise zusammen. So verschmelzen Zellen über mehrere Spalten oder Zeilen.

---

Die Spalten einer Tabelle werden durch das colgroup-Tag in Gruppen zusammengefasst und über das col-Tag formatiert.

Tabellenkopf und Tabellenfuß

Zudem gibt es seit HTML 4.0 drei weitere Tags für Tabellen: – <tbody>, <tfoot> und <thead>.

Direkt innerhalb eines table-Elements dürfen nur die folgenden HTML-Tags stehen:

• colgroup
• tr
• caption
• tbody, thead, tfoot

CSS-Eigenschaften für table-Elemente

Obwohl die Attribute border, cellpadding und cellspacing hier noch aufgeführt sind, haben sie kaum noch eine Bedeutung. Der Rahmen um Tabellenzellen, der vom border-Attribut erzeugt wird, läßt keine Spezifikation einer Farbe zu und wird besser durch die border-Eigenschaft in CSS ersetzt.

Die CSS-Regel border-collapse: collapse für das table-Element verhindert den doppelten Rahmen zwischen nebeneinander liegenden Tabellenzellen. cellpadding und cellspacing lassen sich durch die CSS-Eigenschaften padding und margin steuern.

Attribute für table

border

legt einen Rahmen rund um die Tabelle. Die Linien des Rahmens werden schattiert dargestellt, um ihnen eine dreidimensionale Erscheinung zu verleihen. Die Breite des Rahmens wird als ganze Zahl von Pixeln angegeben. Die Voreinstellung ist »kein Rahmen« (0 Pixel).
In HTML5 ist border deprecated – als veraltert und unerwünscht – markiert.

cellpadding

setzt den Weißraum zwischen den Zellwänden und dem Inhalt der Zelle und wird als ganze Zahl von Pixeln eingegeben. Die Vorgabe ist ein Pixel.
In HTML5 ist cell-padding deprecated – als veraltert und unerwünscht – markiert.

cellspacing

setzt den Weißraum zwischen nebeneinander liegenden Zellen und zwischen den Zellen und dem äußeren Rand der Tabelle und wird als ganze Zahl von Pixeln angegeben. Die Vorgabe ist zwei Pixel.
In HTML5 ist cell-spacing deprecated – als veraltert und unerwünscht – markiert.

frame

legt fest, welche der vier Linien, aus denen der Rahmen der Tabelle besteht, sichtbar sein soll. Die möglichen Werte sind above, below, border, box, hsides, lhs, rhs, void und vsides.
frame="above" zeigt den oberen Rand der Tabelle, frame="below" den unteren Rahmen, frame="box" zeigt alle Linien rund um die Tabelle, frame="hsides" zeigt den Rand ober- und unterhalb der Tabelle an, frame="vsides" zeigt die Linien rechts und links, frames="lhs" zeigt den linken und frames="rhs" den rechten Rahmen. Alle Einstellungen werden nur wirksam, wenn border="" als Attribut der Tabelle notiert ist.

rules

legt fest, welche Rahmenlinien rund um die Zelle innerhalb der Tabelle sichtbar sein sollen. Durch die Angabe von rows werden nur die Linien zwischen den Reihen sichtbar, durch die Angabe von cols werden nur die Linien zwischen den Spalten sichtbar, durch die Angabe groups werden Linien zwischen thead, tfoot und tbody angezeigt und die Angabe von none zeigt keine innenliegenden Rahmen. rules="all" ist die Voreinstellung und zeigt alle Linien rund um die Tabellenzellen einer Tabelle an.

summary

wird für nicht visuelle Medien wie Braillezeile oder Sprachsynthesizer benutzt, um zusätzliche Informationen über die Tabelle zur Verfügung zu stellen.

width

bestimmt die Breite der Tabelle. Es wird entweder als ganze Zahl von Pixeln oder als Prozentsatz des umfassenden Elements angegeben.

Beispiel

<table summary="Tabelle ohne CSS-Formatierung" 
        border="1" cellspacing="2" cellpadding="3" width="600">
  <caption>HTML-Tabelle ohne Formatierung durch CSS-Eigenschaften</caption>
  <colgroup>
    <col width="10" /><col width="50" />
    <col width="50" /><col width="400" />
  </colgroup>
  <thead>
    <tr> <th colspan="4">Top 15 of 3219 Total User Agents</th> </tr>
    <tr> <th>#</th> <th colspan="2">Hits</th> <th>User Agent</th> </tr>
  </thead>
  <tfoot>
    <tr> <td colspan="4"><em>Ohne formatierende CSS-…  …</em></td> </tr>
  </tfoot>
  <tbody>
    <tr>
      <td>1</td>
      <td>497913</td>
      <td>16.27%</td>
      <td>Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.8.1.11) </td>
    </tr>
    <tr>
      <td>2</td>
      <td>267810</td>
      <td>8.75%</td>
      <td>Mozilla/5.0 (Windows; U; Windows NT 5.1; de; rv:1.8.1.11) Gec</td>
    </tr>
     …
  </tbody>
</table>

Kernattribute und Ereignisse für table

Attribute	Events
class dir id lang style title	onclick, ondblclick onkeydown, onkeypress, onkeyup mousedown, mousemove, mouseout, mousedown, mouseup