HTML Grundlagen: Tabellen erstellen mit <table>, <tr>, <td>
- Text fett drucken (STRONG vs. B)
- Text kursiv drucken (EM vs. I)
- Text unterstreichen (INS vs. U)
- Text durchstreichen (DEL vs. S)
- Text tiefstellen oder hochstellen (SUB vs. SUP)
- Text kleiner oder größer anzeigen (SMALL oder BIG)
- Zitate erstellen (BLOCKQUOTE vs. Q)
- Tabellen erstellen
- Listen erstellen (UL vs. OL)
- Bereiche festlegen (DIV vs. SPAN)
Inhaltsübersicht HTML Grundlagen
Text formatieren
Tabellen erstellen mit TABLE, TR und TD
Zu Zeiten als HTML gerade das Laufen lernte, stand CSS noch nicht bzw. nur sehr eingeschränkt zur Verfügung. Damals, das heißt Anfang der 2000er Jahre, wurden Tabellen ohne Rahmen zur Gestaltung von Webseiten benutzt. Tabellen werden heute nicht mehr für das Layout einer Webseite verwendet, da sie nicht so flexibel sind wie z.B. div-Container.
Tabellen sollten nur zur Darstellung tabellarischer Daten oder Texte verwendet werden.Grundstruktur einer HTML Tabelle
Es werden mindestens drei HTML Elemente benötigt, um eine Tabelle zu erstellen. Dies sind:
table – Eine Tabelle wird immer mit <table>
(Englisch »table« = Tabelle) eingeleitet und mit </table> abgeschlossen. Ohne weitere Angaben gehört alles, was zwischen <table> und </table> steht zum Tabellenkörper tbody.tr – Jede Zeile der Tabelle wird mit <tr>
(tr für Englisch »table row« = Tabellenzeile) eingeleitet und mit </tr> abgeschlossen.td – Jede Zelle der Tabelle wird mit <td>
(td für Englisch »table data« = Tabellendaten) eingeleitet und mit </td> abgeschlossen.th – Jede Kopfzelle der Tabelle wird mit <th>
(th für Englisch »table header« = Tabellenkopf) eingeleitet und </th> abgeschlossen.
Eine einfache HTML Tabelle
<table border="1">
<tr>
<td> Zeile 1 <br> Spalte 1 </td>
<td> Zeile 1 <br> Spalte 2 </td>
<td> Zeile 1 <br> Spalte 3 </td>
</tr><tr>
<td> Zeile 2 <br> Spalte 1 </td>
<td> Zeile 2 <br> Spalte 2 </td>
<td> Zeile 2 <br> Spalte 3 </td>
</tr><tr>
<td> Zeile 3 <br> Spalte 1 </td>
<td> Zeile 3 <br> Spalte 2 </td>
<td> Zeile 3 <br> Spalte 3 </td>
</tr>
</table>Ausgabe des HTML Codes| Zeile 1 Spalte 1 | Zeile 1 Spalte 2 | Zeile 1 Spalte 3 |
| Zeile 2 Spalte 1 | Zeile 2 Spalte 2 | Zeile 2 Spalte 3 |
| Zeile 3 Spalte 1 | Zeile 3 Spalte 2 | Zeile 3 Spalte 3 |
Tabellenzellen verbinden
Mit den Attributen »colspan« und »rowspan« können Tabellenzellen verbunden werden. Mit colspan werden nebeneinander liegende Zellen verbunden. Mit rowspan werden übereinander liegende Zellen verbunden. Diese beiden Attribute können nur für Tabellenzellen angegeben werden, d.h. td und th.
Das Attribut »colspan« erlaubt es, eine Tabellezelle nach rechts mit mehreren benachbarten Zellen der gleichen Zeile zu verbinden.
Das Attribut »rowspan« erlaubt es, eine Tabellenzelle nach unten mit mehreren benachbarten Zellen der gleichen Spalte zu verbinden.
Die gleichzeitige Anwendung von »colspan« und »rowspan« erlaubt es, eine Tabellenzelle nach rechts und nach unten mit mehreren benachbarten Zellen zu verbinden.
Die folgenden drei Tabellen demonstrieren die Anwendung von colspan und rowspan.
| 11 | 12 | 13 | 14 |
| 21 | 22 | 23 | 24 |
| 31 | 32 | 33 | 34 |
| 41 | 42 | 43 | 44 |
| 11, 12 | 13 23 33 43 | 14 | |
| 21 | 22 | 24 | |
| 31 | 32 | 34 | |
| 41 | 42 | 44 | |
| 11 | 12 | 13 | 14 24 |
| 21 | 22 | 23 | |
| 31, 32 41, 42 | 33 | 34 | |
| 43 | 44 | ||
Mit dem Attribut colspan kann
Mit dem Attribut rowspan kann
Die Attribute colspan und rowspan können auch gemeinsam angegeben werden. Vgl. die Tabellenzelle mit dem Inhalt 31, 32, 41, 42 in der dritten Tabelle.
Beispiel für eine etwas komplexere HTML Tabelle
<table border="1">
<tr>
<th colspan="3" bgcolor="#cccccc">Rechnung #123456789</th>
<th>21. März 2023</th>
</tr><tr>
<td colspan="2">
<strong>zahlbar an:</strong><br>
Beispiel GmbH<br>
Musterstraße 13<br>
12345 Muster City
</td>
<td colspan="2">
<strong>Kunde:</strong><br>
Max Mustermann<br>
Musterweg 123<br>
98765 Musterhausen
</td>
</tr><tr>
<th bgcolor="#cccccc">Name / Beschreibung</th>
<th bgolor="#cccccc">Menge</th>
<th bgcolor="#cccccc">Preis pro Stück</th>
<th bgcolor="#cccccc">Preis</th>
</tr><tr>
<td bgcolor="#ffff90">Büroklammern</td>
<td bgcolor="#ffff90">1000</td>
<td bgcolor="#ffff90" align="right">0,01 €</td>
<td bgcolor="#dddd60" align="right">10,00 €</td>
</tr><tr>
<td bgcolor="#ffff90">Heftklammern (Packung)</td>
<td bgcolor="#ffff90">100</td>
<td bgcolor="#ffff90" align="right">1,00 €</td>
<td bgcolor="#dddd60" align="right">100,00 €</td>
</tr><tr>
<th colspan="3" bgcolor="#cccccc">Zwischensumme</th>
<td bgcolor="#dddd60" align="right">110,00 €</td>
</tr><tr>
<th colspan="2" bgcolor="#cccccc">Umsatzsteuer</th>
<td>19%</td>
<td bgcolor="#dddd60" align="right">20,90 €</td>
</tr><tr>
<th colspan="3" bgcolor="#cccccc">Gesamtbetrag</th>
<td bgcolor="#00dd00" align="right">130,90 €</td>
</tr>
</table>Ausgabe des HTML Codes| Rechnung #123456789 | 21. März 2023 | ||
|---|---|---|---|
| zahlbar an: Beispiel GmbH Musterstraße 13 12345 Muster City | Kunde: Max Mustermann Musterweg 123 98765 Musterhausen | ||
| Name / Beschreibung | Menge | Preis pro Stück | Preis |
| Büroklammern | 1000 | 0,01 € | 10,00 € |
| Heftklammern (Packung) | 100 | 1,00 € | 100,00 € |
| Zwischensumme | 110,00 € | ||
| Umsatzsteuer | 19% | 20,90 € | |
| Gesamtbetrag | 130,90 € | ||
Diese HTML Tabelle kann man auch semantisch in mehrere logische Abschnitte gliedern. Dazu gibt es die HTML Elemente TBODY
<table border="1">
<thead>
<tr>
<th colspan="3" bgcolor="#cccccc">Rechnung #123456789</th>
<th>21. März 2023</th>
</tr><tr>
<td colspan="2">
<strong>zahlbar an:</strong><br>
Beispiel GmbH<br>
Musterstraße 13<br>
12345 Muster City
</td>
<td colspan="2">
<strong>Kunde:</strong><br>
Max Mustermann<br>
Musterweg 123<br>
98765 Musterhausen
</td>
</tr>
</thead>
<tbody>
<tr>
<th bgcolor="#cccccc">Name / Beschreibung</th>
<th bgolor="#cccccc">Menge</th>
<th bgcolor="#cccccc">Preis pro Stück</th>
<th bgcolor="#cccccc">Preis</th>
</tr><tr>
<td bgcolor="#ffff90">Büroklammern</td>
<td bgcolor="#ffff90">1000</td>
<td bgcolor="#ffff90" align="right">0,01 €</td>
<td bgcolor="#dddd60" align="right">10,00 €</td>
</tr><tr>
<td bgcolor="#ffff90">Heftklammern (Packung)</td>
<td bgcolor="#ffff90">100</td>
<td bgcolor="#ffff90" align="right">1,00 €</td>
<td bgcolor="#dddd60" align="right">100,00 €</td>
</tr>
</tbody>
<tfoot>
<tr>
<th colspan="3" bgcolor="#cccccc">Zwischensumme</th>
<td bgcolor="#dddd60" align="right">110,00 €</td>
</tr><tr>
<th colspan="2" bgcolor="#cccccc">Umsatzsteuer</th>
<td>19%</td>
<td bgcolor="#dddd60" align="right">20,90 €</td>
</tr><tr>
<th colspan="3" bgcolor="#cccccc">Gesamtbetrag</th>
<td bgcolor="#00dd00" align="right">130,90 €</td>
</tr>
</tfoot>
</table>Standardmäßig haben die HTML Elemente »THEAD«, »TBODY« und »TFOOT« keinen Einfluss auf die Darstellung der Tabelle. Mit CSS können die Eigenschaften dieser HTML Elemente jedoch geändert werden.
Beachte, dass THEAD und TFOOT in einer Tabelle nur maximal einmal vorkommen dürfen und TBODY mindestens einmal vorkommen muss. Wenn THEAD, TBODY und TFOOT im HTML nicht angegeben werden, fügen die Browser das fehlende TBODY automatisch ein.