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 können Sie Tabellenzellen mithilfe der Attribute rowspan und colspan über mehrere Zeilen oder Spalten erstrecken lassen. Diese Attribute ermöglichen es Ihnen, komplexere Tabellenlayouts zu erstellen, indem Zellen zusammengeführt werden.

Das Attribut colspan wird verwendet, um die Anzahl der Spalten anzugeben, die eine Zelle überspannen soll. Es wird dem <td>- oder <th>-Tag der Zelle hinzugefügt, die Sie erweitern möchten.

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 Kopfzeilenzelle mit dem Text „Name“ über zwei Spalten. Dies ist nützlich, um eine Kopfzeile zu erstellen, die mehrere Spalten abdeckt. So sieht es aus:

Das rowspan-Attribut wird verwendet, um die Anzahl der Zeilen anzugeben, die eine Zelle überspannen soll. Es wird ebenfalls zum <td>- oder <th>-Tag der Zelle hinzugefügt, die Sie erweitern möchten.

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 die Morgen- als auch die Abendschicht arbeitet, ohne den Namen zu wiederholen. 

Sie können sowohl colspan als auch rowspan in derselben Tabelle verwenden, um komplexe Layouts zu erstellen. Denken Sie nur daran, die Anzahl der Zellen in jeder Zeile entsprechend anzupassen, um die überspannten Zellen zu berücksichtigen.

challenge icon

Aufgabe

Einfach

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

  1. Ein <table>-Tag, um die Tabelle zu definieren, wobei das Attribut border für die Sichtbarkeit auf "1" gesetzt ist.
  2. Eine Tabellenzeile (<tr>) mit einer Kopfzeile (<th>), die sich über zwei Spalten erstreckt und den Text "Student Information" enthält.
  3. Eine weitere Tabellenzeile (<tr>) mit einer Kopfzeile (<th>), die "Name" sagt, und einer Datenzelle (<td>), die sich über zwei Zeilen erstreckt und den Text "John Doe" enthält.
  4. Eine weitere Tabellenzeile (<tr>) mit einer Kopfzeile (<th>), die "Age" sagt.
  5. Eine letzte Tabellenzeile (<tr>) mit einer Datenzelle (<td>), die "Jane Smith" sagt, und einer Datenzelle (<td>), die "25" sagt.

Spickzettel

Verwenden Sie colspan, um eine Zelle über mehrere Spalten zu strecken:

<th colspan="2">Name</th>

Verwenden Sie rowspan, um eine Zelle über mehrere Zeilen zu strecken:

<td rowspan="2">John</td>

Beispiel-Tabelle mit beiden Spanning-Attributen:

<table border="1">
  <tr>
    <th rowspan="2">Name</th>
    <th colspan="2">Exams</th>
  </tr>
  <tr>
    <th>Math</th>
    <th>Science</th>
  </tr>
  <tr>
    <td>Kim</td>
    <td>A</td>
    <td>B+</td>
  </tr>
</table>

Probier es selbst

<!DOCTYPE html>
<html>
    <body>
        <table border="1">
            <!-- Schreibe Code hier -->
        </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