x

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.

Tabellen erstellen

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.

<style> table, td { border: 1px solid; } </style>


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.

Verpasse keine neuen Inhalte!

Um keine zukünftigen Inhalte zu verpassen, kannst du dich kostenlos in unseren E-Mail Newsletter eintragen. Als Mitglied des E-Mail Newsletter bekommst du exklusive Inhalte sowie eine Übersicht der neuen Tutorials von uns zugesendet.
Du kannst jederzeit deine E-Mail-Adresse aus dem Newsletter wieder austragen.

Für aktuelle Inhalte und Neuigkeiten findest du uns auch bei YouTube, Facebook und Instagram.

E-Mail Newsletter:

Aktuell ist unser Newsletter deaktiviert.

Social Media: