<p> ♪ δ ñ العربية ⇨ Русский 乸 漢 🙂⭐ </p>Damit diese Emojis auch tatsächlich angezeigt werden, muss die Zeichencodierung (nächste Slide) korrekt gesetzt sein.
<!DOCTYPE html>
Die drei wichtigsten HTML-Tags für Tabellen lauten:
<table> –>
Tabelle als Ganzes
<tr> –>
Zeile einer Tabelle (table row)
<td> –>
Zelle einer Tabelle (table data)
<table>
<tr>
<td> oben-links </td>
<td> oben-Mitte </td>
<td> oben-rechts </td>
</tr>
<tr>
<td> unten-links </td>
<td> unten-Mitte </td>
<td> unten-rechts </td>
</tr>
</table>
<table border="1">
<tr>
<td> oben-links </td>
<td> oben-Mitte </td>
<td> oben-rechts </td>
</tr>
<tr>
<td> unten-links </td>
<td> unten-Mitte </td>
<td> unten-rechts </td>
</tr>
</table><th>
Wenn man anstatt <td> das Tag <th> verwendet, dann
wird eine Tabellenüberschrift erzeugt, welche fett und zentriert dargestellt wird.
<table border="1">
<tr>
<th> Ü1 </th>
<th> Ü2 </th>
<th> Ü3 </th>
</tr>
<tr>
<td> oben-links </td>
<td> oben-Mitte </td>
<td> oben-rechts </td>
</tr>
<tr>
<td> unten-links </td>
<td> unten-Mitte </td>
<td> unten-rechts </td>
</tr>
</table>
<thead>, <tbody>, <tfoot> Die Bereiche der Tabelle werden oftmals noch zusätzlich gegliedert mithilfe dieser (semantischer) Tags:
<thead> –>
Tabellenkopf / -überschrift
<tbody> –>
Hauptteil der Tabelle
<tfoot> –>
Fussteil der Tabelle
<table border="1">
<thead>
<tr>
<th> Ü1 </th>
<th> Ü2 </th>
<th> Ü3 </th>
</tr>
</thead>
<tbody>
<tr>
<td> oben-links </td>
<td> oben-Mitte </td>
<td> oben-rechts </td>
</tr>
<tr>
<td> unten-links </td>
<td> unten-Mitte </td>
<td> unten-rechts </td>
</tr>
</tbody>
</table>⚠ Die drei Tags haben (zum jetzigen Zeitpunkt) keine Auswirkung auf die Formatierung!
Tabellen können mit folgenden Attributen gestaltet werden:
cellspacing –>
Abstand der Zellen zueinander
cellpadding –>
Abstand des Textes zum Rand der Zelle
align –>
Ausrichtung (horizontal) innerhalb der Zelle (left, center, right)
valign –>
Ausrichtung (vertikal) innerhalb der Zelle(top, middle, bottom)
width –>
Breite der Tabelle/Spalte (entweder in Pixel oder Prozent)
<table border="1" cellpadding="10" width="600">
<tr>
<td width="20%">oben-links</td>
<td width="60%" align="center">oben-zentriert</td>
<td width="20%">oben-rechts</td>
</tr>
<tr>
<td>unten-links</td>
<td align="center">unten-zentriert</td>
<td>unten-rechts</td>
</tr>
</table>
colspan und rowspan innerhalb von <td>
(oder <th>) können Zellen verbunden,
d.h. Zellen definiert werden, die sich über mehrere Spalten oder Zeilen erstrecken.
colspan –>
Zellen horizontal (spaltenübergreifend) verbinden
rowspan –>
Zellen vertikal (zeilenübergreifend) verbinden
<table border="1">
<tr>
<th colspan="2"> Singular </th>
</tr>
<tr>
<td> ich </td>
<td> bin </td>
</tr>
<tr>
<td> du </td>
<td> bist </td>
</tr>
<tr>
<td> er </td>
<td rowspan="3"> ist </td>
</tr>
<tr>
<td>sie</td>
</tr>
<tr>
<td>es</td>
</tr>
</table>