HTML Grundkurs: Tabellen erstellen

In diesem Tutorial zeigen wir dir, wie du Tabellen im HTML erstellst.

Play Video

Die Grundlagen

Für Tabellen verwenden wir im HTML das Table-Tag. Wie du sicher weißt, besteht eine Tabelle aus einzelnen Zellen, die zusammen eine Zeile oder eine Spalte ergeben.

Für die einzelnen Zellen verwendet man im HTML das Td-Tag. Die einzelnen Zellen werden dann wiederum durch das Tr-Tag zu einer Zeile zusammengefasst.

In der folgenden Grafik haben wir das ganze nochmal zusammengefasst.

Eine Tabelle erstellen

Öffne als erstes deine tabelle-erstellen.html Datei und tippe den folgenden Code unter die H1-Überschrift.

<table> <tr> <td>1. Zelle</td> <td>2. Zelle</td> <td>3. Zelle</td> </tr> <tr> <td>4. Zelle</td> <td>5. Zelle</td> <td>6. Zelle</td> </tr> <tr> <td>7. Zelle</td> <td>8. Zelle</td> <td>9. Zelle</td> </tr> </table>

Um der Tabelle und den Zellen der Tabelle einen Rand zu geben, tippe den folgenden CSS Befehl in den Kopf deiner HTML-Datei.

Speichere dann deine HTML-Datei ab und öffne Sie in einem Browser.

Zellen verbinden (colspan)

Jetzt möchten wir dir noch zeigen, wie du einzelne Zellen miteinander verbinden kannst.

Gehe dazu zurück in deinen Code Editor und erstelle eine Kopie deiner Tabelle.

Beginnen wir damit einzelne Zellen einer Zeile miteinander zu verbinden. Hierfür verwendet man im HTML das Attribut „colspan“.

Um nun die 1. und die 2. Zelle deiner Tabelle miteinander zu verbinden, lösche als erstes die 2. Zelle und ändern den Text der 1. Zelle. Tippe dann in das öffnende Td-Tag der Zelle das Attribut „colspan“ und vergebe ihm den Wert „2“.

<table> <tr> <td colspan="2">1. + 2. Zelle</td> <td>3. Zelle</td> </tr> <tr> <td>4. Zelle</td> <td>5. Zelle</td> <td>6. Zelle</td> </tr> <tr> <td>7. Zelle</td> <td>8. Zelle</td> <td>9. Zelle</td> </tr> </table>

Speicher dann deine HTML-Datei ab und öffne sie in einem Browser.

Zellen verbinden (rowspan)

Jetzt machen wir das Gleiche noch mit 3 Zellen einer Spalte.

Gehe dazu wieder zurück in deinen Editor und lösche die 6. und die 9. Spalte der Tabelle. Ändere dann den Text der 3. Zelle und vergebe den Td-Tag das Attribut „rowspan“ und den Wert „3“.

<table> <tr> <td colspan="2">1. + 2. Zelle</td> <td rowspan="3">3. + 6. + 9. Zelle</td> </tr> <tr> <td>4. Zelle</td> <td>5. Zelle</td> </tr> <tr> <td>7. Zelle</td> <td>8. Zelle</td> </tr> </table>

Speicher dann deine HTML-Datei ab und öffne sie in einem Browser.

Die tabellen-erstellen.html Datei:

<!DOCTYPE html> <html lang="de"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.3, user-scalable=yes"> <meta name="description" content="Das ist die index.html Datei aus dem SIFA Digital HTML Grundkurs."> <meta name="keywords" content="html, grundkurs, tutorial, youtube, sifa digital"> <title>Index - HTML Grundkurs</title> <style> table, td { border: 1px solid; } </style> </head> <body> <header> <ul> <li> <a href="./index.html">Startseite</a> </li> <li> <a href="./text-formatieren.html">Text formatieren</a> </li> <li> <a href="./bilder-hinzufuegen.html">Bilder hinzufügen</a> </li> <li> <a href="./links-erstellen.html">Links erstellen</a> </li> <li> <a href="./listen-erstellen.html">Listen erstellen</a> </li> <li> <a href="./tabellen-erstellen.html">Tabellen erstellen</a> </li> <li> <a href="./formulare-erstellen.html">Formulare erstellen</a> </li> </ul> </header> <div> <h1>Tabellen erstellen</h1><br> <table> <tr> <td>1. Zelle</td> <td>2. Zelle</td> <td>3. Zelle</td> </tr> <tr> <td>4. Zelle</td> <td>5. Zelle</td> <td>6. Zelle</td> </tr> <tr> <td>7. Zelle</td> <td>8. Zelle</td> <td>9. Zelle</td> </tr> </table><br><br> <table> <tr> <td colspan="2">1. + 2. Zelle</td> <td rowspan="3">3. + 6. + 9. Zelle</td> </tr> <tr> <td>4. Zelle</td> <td>5. Zelle</td> </tr> <tr> <td>7. Zelle</td> <td>8. Zelle</td> </tr> </table> </div> <footer></footer> </body> </html>

Im nächsten Video des HTML Grundkurs zeigen wir dir, wie du Formulare erstellst.

HTML Grundkurs: Tabellen erstellen

Die Grundlagen

Eine Tabelle erstellen

Zellen verbinden (colspan)

Zellen verbinden (rowspan)

Die tabellen-erstellen.html Datei:

Verpasse keine neuen Inhalte!

E-Mail Newsletter:

Social Media:

Modernes Webdesign

Gezieltes Online-Marketing

Professionelles Grafikdesign