HTML Tabellen Zellen verbinden

Lösungen HTML Tabellen 4:
Zellen verbinden

HTML, Webdesign

Auf dieser Seite findest du die kompletten Lösungen für die Aufgaben zum Thema Zellen verbinden mit rowspan und colspan in HTML Tabellen. Hier kannst du nachlesen, wie man Zellen verbindet.

  1. Zellen über mehrere Spalten verbinden
    1. <table>
      <tr>
      <td>Zelle 1.1</td>
      <td>Zelle 1.2</td>
      <td>Zelle 1.3</td>
      <td>Zelle 1.4</td>
      </tr>
      <tr>
      <td colspan="4">Zelle 2.1 + Zelle 2.2 + Zelle 2.3 + Zelle 2.4</td>
      </tr>
      </table>

      Zelle 1.1 Zelle 1.2 Zelle 1.3 Zelle 1.4
      Zelle 2.1 + Zelle 2.2 + Zelle 2.3 + Zelle 2.4
    2. <table>
      <tr>
      <td>Zelle 1.1</td>
      <td>Zelle 1.2</td>
      <td>Zelle 1.3</td>
      <td>Zelle 1.4</td>
      </tr>
      <tr>
      <td colspan="2">Zelle 2.1 + Zelle 2.2</td>
      <td colspan="2">Zelle 2.3 + Zelle 2.4</td>
      </tr>
      </table>

      Zelle 1.1 Zelle 1.2 Zelle 1.3 Zelle 1.4
      Zelle 2.1 + Zelle 2.2 Zelle 2.3 + Zelle 2.4
    3. <table>
      <tr>
      <td>Zelle 1.1</td>
      <td colspan="2">Zelle 1.2 + Zelle 1.3</td>
      <td>Zelle 1.4</td>
      </tr>
      <tr>
      <td>Zelle 2.1</td>
      <td colspan="3">Zelle 2.2 + Zelle 2.3 + Zelle 2.4</td>
      </tr>
      </table>

      Zelle 1.1 Zelle 1.2 + Zelle 1.3 Zelle 1.4
      Zelle 2.1 Zelle 2.2 + Zelle 2.3 + Zelle 2.4
  2.  Zellen über mehrere Zeilen verbinden
    1. <table>
      <tr>
      <td>Zelle 1.1</td>
      <td>Zelle 1.2</td>
      </tr>
      <tr>
      <td>Zelle 2.1</td>
      <td rowspan="3">Zelle 2.2<br>Zelle 3.2<br>Zelle 4.2</td>
      </tr>
      <tr>
      <td>Zelle 3.1</td>
      </tr>
      <tr>
      <td>Zelle 4.1</td>
      </tr>
      </table>

      Zelle 1.1 Zelle 1.2
      Zelle 2.1 Zelle 2.2
      Zelle 3.2
      Zelle 4.2
      Zelle 3.1
      Zelle 4.1
    2. <table>
      <tr>
      <td>Zelle 1.1</td>
      <td>Zelle 1.2</td>
      </tr>
      <tr>
      <td rowspan="2">Zelle 2.1<br>Zelle 3.1</td>
      <td>Zelle 2.2</td>
      </tr>
      <tr>
      <td>Zelle 3.2</td>
      </tr>
      <tr>
      <td>Zelle 4.1</td>
      <td>Zelle 4.2</td>
      </tr>
      </table>

      Zelle 1.1 Zelle 1.2
      Zelle 2.1
      Zelle 3.1      		 Zelle 2.2
      Zelle 3.2
      Zelle 4.1 Zelle 4.2
  3. Zellen über Zeilen und Spalten verbinden
    <table>
    <tr>
    <td>Zelle 1.1</td>
    <td>Zelle 1.2</td>
    <td>Zelle 1.3</td>
    </tr>
    <tr>
    <td>Zelle 2.1</td>
    <td colspan="2" rowspan="2">Zelle 2.2 + Zelle 2.3<br>Zelle 3.2 + Zelle 3.3</td>
    </tr>
    <tr>
    <td rowspan="2">Zelle 3.1<br>Zelle 4.1</td>
    </tr>
    <tr>
    <td>Zelle 4.2</td>
    <td>Zelle 4.3</td>
    </tr>
    </table>

    Zelle 1.1 Zelle 1.2 Zelle 1.3
    Zelle 2.1 Zelle 2.2 + Zelle 2.3
    Zelle 3.2 + Zelle 3.3
    Zelle 3.1
    Zelle 4.1
    Zelle 4.2 Zelle 4.3

Hier findet ihr eine Übersicht über alle Beiträge zum Thema html.

Ähnliche Beiträge