{"id":61,"date":"2012-08-20T18:16:41","date_gmt":"2012-08-20T18:16:41","guid":{"rendered":"https:\/\/ai.hasebox.de\/index.php\/2012\/08\/20\/16-2-zellen-verbinden\/"},"modified":"2025-11-21T07:30:58","modified_gmt":"2025-11-21T07:30:58","slug":"16-2-zellen-verbinden","status":"publish","type":"post","link":"https:\/\/ai.hasebox.de\/index.php\/2012\/08\/20\/16-2-zellen-verbinden\/","title":{"rendered":"16.2 Zellen verbinden"},"content":{"rendered":"\n

Hier der Screenshot vom Kalenderblatt Dezember:<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

Hier noch ein paar einfache \u00dcbungen zu colspan und rowspan:<\/h3>\n\n\n\n

<\/p>\n\n\n\n

(Achtung! Kann Fehler enthalten durch Umzug der Webseite)<\/p>\n\n\n\n

<\/p>\n\n\n\n

Wenn wir nun Tabellenzellen miteinander verbinden m\u00f6chten, dass z.B. anstatt 3 Zellen nur eine vorhanden ist, funktioniert das \u00fcber colspan und rowspan.<\/p>\n\n\n\n

Im folgenden Beispiel sollen das Feld A, B, C miteinander verbunden werden, damit nur der Inhalt von A bleibt.<\/p>\n\n\n\n

So sieht normalerweise die Tabelle aus:<\/p>\n\n\n\n

<\/p>\n\n\n\n

\n

<<\/span>table border=“1″><\/span>
<<\/span>tr><\/span>
<<\/span>td><\/span> A <<\/span>\/td><\/span>
<<\/span>td><\/span> B <<\/span>\/td><\/span>
<<\/span>td><\/span> C <<\/span>\/td><\/span>
<<\/span>\/tr><\/span><\/p>\n\n\n\n

<<\/span>tr><\/span>
<<\/span>td><\/span> 1 <<\/span>\/td><\/span>
<<\/span>td><\/span> 2 <<\/span>\/td><\/span>
<<\/span>td><\/span> 3 <<\/span>\/td><\/span>
<<\/span>\/tr><\/span>
<<\/span>\/table><\/span><\/p>\n\n\n\n

<\/p>\n\n\n\n

<\/p>\n<\/div>\n\n\n\n

Beispiel 1: <\/span>Nun kommt der Befehl colspan zum Einsatz – nachdem wir die Zellen A, B und C verbinden , also colspan=“3″<\/p>\n\n\n\n

<\/p>\n\n\n\n

\n

<<\/span>table border=“1″><\/span>
<<\/span>tr><\/span>
<<\/span>td colspan=“3″><\/span> A <<\/span>\/td><\/span>
<<\/span>td><\/span> B <<\/span>\/td><\/span>
<<\/span>td><\/span> C <<\/span>\/td><\/span>
<<\/span>\/tr><\/span><\/p>\n\n\n\n

<<\/span>tr><\/span>
<<\/span>td><\/span> 1 <<\/span>\/td><\/span>
<<\/span>td><\/span> 2 <<\/span>\/td><\/span>
<<\/span>td><\/span> 3 <<\/span>\/td><\/span>
<<\/span>\/tr><\/span>
<<\/span>\/table><\/span><\/p>\n\n\n\n

<\/p>\n\n\n\n

<\/p>\n<\/div>\n\n\n\n

<\/p>\n\n\n\n

Beispiel 2:\u00a0<\/span>Die Zelle B und C werden nach rechts hinausgeschoben, also einfach die entsprechenden l\u00f6schen, und gut ist<\/p>\n\n\n\n


<\/p>\n\n\n\n

Beispiel 3: <\/span>Das gleiche klappt auch in der Vertikalen mit <<\/span>b><\/span>rowspan<<\/span>\/b><\/span>. Wir wollen anstatt ABC nun B und 2 verbinden.<<\/span>\/p><\/span><\/p>\n\n\n\n

<\/p>\n\n\n\n

 <\/p>\n\n\n\n

Aufgabe 1<\/p>\n\n\n\n

Erstelle die Datei ai\/html\/tabellen\/beispiel1.html<\/p>\n\n\n\n

Kopiere den Code aus Beispiel 1<\/p>\n\n\n\n

 <\/p>\n\n\n\n

Aufgabe 2<\/p>\n\n\n\n

Erstelle die Datei ai\/html\/tabellen\/beispiel2.html<\/p>\n\n\n\n

Kopiere den Code aus Beispiel 2<\/p>\n\n\n\n

 <\/p>\n\n\n\n

Aufgabe 3<\/p>\n\n\n\n

Erstelle die Datei ai\/html\/tabellen\/beispiel3.html<\/p>\n\n\n\n

Kopiere den Code aus Beispiel 3<\/p>\n\n\n\n

 <\/p>\n\n\n\n

Aufgabe 4<\/p>\n\n\n\n

Erstelle die Datei ai\/html\/tabellen\/verbinden1.html<\/p>\n\n\n\n

Erstelle eine Tabelle mit 3 Zeilen und 4 Spalten.<\/p>\n\n\n\n

Verbinde in der obersten Zeile alle 4 Zellen.<\/p>\n\n\n\n

 <\/p>\n\n\n\n

Aufgabe 5<\/p>\n\n\n\n

Erstelle die Datei ai\/html\/tabellen\/verbinden2.html<\/p>\n\n\n\n

Erstelle eine Tabelle mit 2 Zeilen und 2 Spalten.<\/p>\n\n\n\n

Verbinde in der linken Spalte die beiden Zellen.<\/p>\n","protected":false},"excerpt":{"rendered":"

Hier der Screenshot vom Kalenderblatt Dezember: Hier noch ein paar einfache \u00dcbungen zu colspan und rowspan: (Achtung! Kann Fehler enthalten durch Umzug der Webseite) Wenn wir nun Tabellenzellen miteinander verbinden m\u00f6chten, dass z.B. anstatt 3 Zellen nur eine vorhanden ist, funktioniert das \u00fcber colspan und rowspan. Im folgenden Beispiel sollen das Feld A, B, C […]<\/p>\n","protected":false},"author":3,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_crdt_document":"","footnotes":""},"categories":[9,47],"tags":[],"class_list":["post-61","post","type-post","status-publish","format-standard","hentry","category-html","category-html2"],"_links":{"self":[{"href":"https:\/\/ai.hasebox.de\/index.php\/wp-json\/wp\/v2\/posts\/61","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/ai.hasebox.de\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/ai.hasebox.de\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/ai.hasebox.de\/index.php\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/ai.hasebox.de\/index.php\/wp-json\/wp\/v2\/comments?post=61"}],"version-history":[{"count":9,"href":"https:\/\/ai.hasebox.de\/index.php\/wp-json\/wp\/v2\/posts\/61\/revisions"}],"predecessor-version":[{"id":2404,"href":"https:\/\/ai.hasebox.de\/index.php\/wp-json\/wp\/v2\/posts\/61\/revisions\/2404"}],"wp:attachment":[{"href":"https:\/\/ai.hasebox.de\/index.php\/wp-json\/wp\/v2\/media?parent=61"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/ai.hasebox.de\/index.php\/wp-json\/wp\/v2\/categories?post=61"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/ai.hasebox.de\/index.php\/wp-json\/wp\/v2\/tags?post=61"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}