Menu
Coddy logo textTech
JETZT LERNEN
flag De iconDeutschdown icon

Zeilen und Spalten verbinden

Teil des Abschnitts Fundamentals der HTML-Journey von Coddy. Lektion 50 von 60.

In HTML kannst du Tabellenzellen mithilfe der Attribute rowspan und colspan über mehrere Zeilen oder Spalten erstrecken. Diese Attribute ermöglichen es dir, komplexere Tabellenlayouts zu erstellen, indem du Zellen zusammenführst.

Das Attribut colspan wird verwendet, um die Anzahl der Spalten anzugeben, die eine Zelle umfassen soll. Es wird zum <td>- oder <th>-Tag der Zelle hinzugefügt, die du erweitern möchtest.

Hier ist ein Beispiel für die Verwendung von colspan:

<table border="1">
	<tr>
		<th colspan="2">Name</th>
	</tr>
	<tr>
		<td>John</td>
		<td>Doe</td>
	</tr>
</table>

In diesem Beispiel erstreckt sich die Kopfzelle mit dem Text „Name“ über zwei Spalten. Dies ist nützlich, um eine Kopfzeile zu erstellen, die mehrere Spalten abdeckt. So sieht sie aus:

Das Attribut rowspan wird verwendet, um die Anzahl der Zeilen anzugeben, die eine Zelle umfassen soll. Es wird außerdem zum <td>- oder <th>-Tag der Zelle hinzugefügt, die du erweitern möchtest.

Hier ist ein Beispiel für die Verwendung von rowspan:

<table border="1">
  <tr>
    <th>Employee</th>
    <th>Shift</th>
  </tr>
  <tr>
    <td rowspan="2">Alex</td>
    <td>Morning</td>
  </tr>
  <tr>
    <td>Evening</td>
  </tr>
</table>

Hier wird rowspan verwendet, um zu zeigen, dass Alex sowohl in der Morning- als auch in der Evening-Schicht arbeitet, ohne den Namen zu wiederholen. 

Du kannst sowohl colspan als auch rowspan in derselben Tabelle verwenden, um komplexe Layouts zu erstellen. Denke nur daran, die Anzahl der Zellen in jeder Zeile entsprechend anzupassen, um die sich erstreckenden Zellen aufzunehmen.

challenge icon

Aufgabe

Einfach

Erstelle ein HTML-Dokument, das eine Tabelle mit Zellen enthält, die sich über mehrere Zeilen und Spalten erstrecken. Die Tabelle sollte folgende Struktur haben:

  1. Eine Tabellenzeile (<tr>) mit einer Kopfzelle (<th>), die sich über drei Spalten erstreckt und den Text "Student Report" enthält.
  2. Eine weitere Tabellenzeile (<tr>) mit einer Kopfzelle (<th>) mit dem Text "Name", einer Kopfzelle (<th>) mit dem Text "Subject" und einer Kopfzelle (<th>) mit dem Text "Grade".
  3. Eine weitere Tabellenzeile (<tr>) mit einer Datenzelle (<td>) mit dem Text "John Doe", einer Datenzelle (<td>) mit dem Text "Math" und einer Datenzelle (<td>) mit dem Text "A".
  4. Eine weitere Tabellenzeile (<tr>) mit einer Datenzelle (<td>), die sich über zwei Zeilen erstreckt und den Text "Jane Smith" enthält, einer Datenzelle (<td>) mit dem Text "Science" und einer Datenzelle (<td>) mit dem Text "B".
  5. Eine letzte Tabellenzeile (<tr>) mit einer Datenzelle (<td>) mit dem Text "History" und einer Datenzelle (<td>) mit dem Text "A".

Probier es selbst

<!DOCTYPE html>
<html>
    <body>
        <table border="1">
            <!-- Schreibe hier den Code -->
        </table>
    </body>
</html>
quiz iconTeste dich selbst

Diese Lektion enthält ein kurzes Quiz. Starte die Lektion, um es zu beantworten und deinen Fortschritt zu speichern.

Alle Lektionen in Fundamentals

1HTML-Grundlagen

Was ist HTML?Grundstruktur von HTMLTags und ElementeVerschachtelung und schließende TagsKommentare in HTML

4Rezeptkarte

ProjektübersichtRezepttitel und BeschreibungProjekt-LektionZutatenProjekt-LektionSchritteProjekt-Lektion

7Persönliche Profilseite

ProjektübersichtHeader-BereichProjekt-LektionProfilbildProjekt-LektionÜber-mich-BereichProjekt-LektionSocial LinksProjekt-Lektion

10Tabellen

Tabellen-GrundlagenBeschriftungen hinzufügenZeilen und Spalten verbindenZusammenfassung - Tabellen

2Text und Formatierung

ÜberschriftenAbsätzeZeilenumbrücheFetter und kursiver TextNochmals fett und kursivWiederholung – Formatierung

5Inhalte hinzufügen

HTML-AttributeLinksLinks zu neuen SeitenBilderBild-Attribute

8Formulare und Eingaben Teil 1

Formular-GrundlagenTexteingabenInput-AttributePasswortfeldLabels für EingabenZusammenfassung – Einfaches Formular

11Event-Registrierungsseite

ProjektübersichtHeader-BereichProjekt-LektionEvent-Details-BereichProjekt-LektionRegistrierungsformularProjekt-LektionFooter-BereichProjekt-Lektion

3Arbeiten mit Listen

Ungeordnete ListeGeordnete ListeVerschachtelte ListenZusammenfassung – Listen

6Seitenlayout

Bereiche (Divisions)Inline-SpansSemantische TagsSections und ArticlesZusammenfassung – Layout

9Formulare und Eingaben Teil 2

Radio-ButtonsCheckboxenDropdownsButtonsButtons in FormularenWiederholung - Formulare #1Wiederholung - Formulare #2

12Abschlussherausforderungen

Einfache ProfilkarteEvent-EinladungskarteEinfache ArtikelseiteLieblingsbücher-Liste

Übe selbstständig: Web-Playground