HTML Grundkurs: Tabellen erstellen
In diesem Tutorial zeigen wir dir, wie du Tabellen im HTML erstellst.
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.
1. Zelle | 2. Zelle | 3. Zelle |
4. Zelle | 5. Zelle | 6. Zelle |
7. Zelle | 8. Zelle | 9. Zelle |
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“.
1. + 2. Zelle | 3. Zelle | |
4. Zelle | 5. Zelle | 6. Zelle |
7. Zelle | 8. Zelle | 9. Zelle |
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“.
1. + 2. Zelle | 3. + 6. + 9. Zelle | |
4. Zelle | 5. Zelle | |
7. Zelle | 8. Zelle |
Speicher dann deine HTML-Datei ab und öffne sie in einem Browser.
Die tabellen-erstellen.html Datei:
Tabellen erstellen
1. Zelle | 2. Zelle | 3. Zelle |
4. Zelle | 5. Zelle | 6. Zelle |
7. Zelle | 8. Zelle | 9. Zelle |
1. + 2. Zelle | 3. + 6. + 9. Zelle | |
4. Zelle | 5. Zelle | |
7. Zelle | 8. Zelle |
Im nächsten Video des HTML Grundkurs zeigen wir dir, wie du Formulare erstellst.