{"id":60,"date":"2012-08-17T13:42:44","date_gmt":"2012-08-17T13:42:44","guid":{"rendered":"https:\/\/ai.hasebox.de\/index.php\/2012\/08\/17\/16-2-tabellen\/"},"modified":"2025-11-11T11:04:29","modified_gmt":"2025-11-11T11:04:29","slug":"16-2-tabellen","status":"publish","type":"post","link":"https:\/\/ai.hasebox.de\/index.php\/2012\/08\/17\/16-2-tabellen\/","title":{"rendered":"16.1 Tabellen"},"content":{"rendered":"\n

{source}
<<\/span>!– You can place html anywhere within the source tags —><\/span><\/span><\/p>\n\n\n\n

<<\/span>script language=“javascript“ type=“text\/javascript“><\/span>
\/\/ You can place JavaScript like this<\/p>\n\n\n\n

<<\/span>\/script><\/span>
<<\/span>?php
\/\/ You can place PHP like this<\/p>\n\n\n\n

?><\/span><\/p>\n\n\n\n

<<\/span>h1><\/span>HTML Tabellen – Grundlagen<<\/span>\/h1><\/span><\/p>\n\n\n\n

<<\/span>h2><\/span>Wie kam fr&uuml;her das Design auf Homepages<<\/span>\/h2><\/span><\/p>\n\n\n\n

<<\/span>p><\/span>Sicher haben Sie sich bisher schon gefragt, wie kam das Design fr&uuml;her ohne CSS auf
Homepages? – Normalerweise &uuml;ber Tabellen, die unsichtbar sind. Dazu
sp&auml;ter mehr. Nun erstmals zu Tabellen, die sichtbar sind und damit
einfacher zu verstehen.<<\/span>\/p><\/span><\/p>\n\n\n\n

<<\/span>p><\/span>HTML Tabellen werden auch heute noch angewendet, wenn die Inhalte sinnvoll in Tabellen dargestellt werden k&ouml;nnen, sprich wenn man auch im normalen Alltag eine Tabelle daf&uuml;r hernehmen w&uuml;rde. Z.B. f&uuml;r Fahrpl&auml;ne usw. – HTML Tabellen werden bei aktuellem HTML-Einsatz nicht mehr f&uuml;r Design genutzt!<<\/span>\/p><\/span><\/p>\n\n\n\n

<<\/span>h2 id=“bestandteile_tabelle“><\/span>Bestandteile einer Tabelle – Tabellenaufbau<<\/span>\/h2><\/span><\/p>\n\n\n\n

<<\/span>p><\/span>Tabellen bestehen aus Reihen und Spalten. Diese werden wir nun
schrittweise aufbauen (zum besseren Verst&auml;ndnis) bis hin zur
kompletten Tabelle.<<\/span>\/p><\/span><\/p>\n\n\n\n

<<\/span>p><\/span>F&uuml;r eine Tabelle werden auf jeden Fall 3 verschiedene HTML-TAGs ben&ouml;tigt. Diese HTML-Befehle sind:<<\/span>\/p><\/span><\/p>\n\n\n\n

<<\/span>ul><\/span>
<<\/span>li><\/span>&lt;table&gt;<<\/span>\/li><\/span>
<<\/span>li><\/span>&lt;tr&gt;<<\/span>\/li><\/span>
<<\/span>li><\/span>&lt;td&gt;<<\/span>\/li><\/span>
<<\/span>\/ul><\/span><\/p>\n\n\n\n

<<\/span>p><\/span>Grundlage ist der HTML-TAG &lt;table&gt;. Damit f&auml;ngt jede Tabelle
an und mit dem entsprechenden END-TAG h&ouml;rt diese auf. Wichtig ist, dass beide gesetzt werden, da zwar bei fehlendem END-TAG der IE die halbfertige Tabelle
anzeigt, dagegen der Netscape u.U. je nach Version gar nichts anzeigt.<<\/span>\/p><\/span><\/p>\n\n\n\n

<<\/span>pre><\/span>
&lt;table&gt;
&lt;\/table&gt;
<<\/span>\/pre><\/span><\/p>\n\n\n\n

<<\/span>p><\/span>Mit diesem Code passiert noch gar nichts, da weder eine Anzahl der Spalten noch die Anzahl der Zeilen angegeben wurde.<<\/span>\/p><\/span><\/p>\n\n\n\n

<<\/span>h2 id=“tabellen_zeile“><\/span>Tabellenzeile erstellen – &lt;tr&gt;<<\/span>\/h2><\/span><\/p>\n\n\n\n

<<\/span>p><\/span>Als n&auml;chsten Schritt legen wir eine Zeile mit &lt;tr&gt; an. Das tr steht f&uuml;r engl. <<\/span>b><\/span>t<<\/span>\/b><\/span>able <<\/span>b><\/span>r<<\/span>\/b><\/span>ow = Tabellen Reihe<<\/span>\/p><\/span><\/p>\n\n\n\n

<<\/span>pre><\/span>
&lt;table&gt;
&lt;tr&gt;
&lt;\/tr&gt;
&lt;\/table&gt;
<<\/span>\/pre><\/span><\/p>\n\n\n\n

<<\/span>p><\/span>Wieviele Zellen in der Tabellenzeile angezeigt werden, wird &uuml;ber den nun folgenden HTML-Befehl bewirkt.<<\/span>\/p><\/span><\/p>\n\n\n\n

<<\/span>h2 id=“tabellen_zelle“><\/span>Tabellenzelle erstellen<<\/span>\/h2><\/span><\/p>\n\n\n\n

<<\/span>p><\/span>Auch jetzt wird noch nichts angezeigt – es fehlen die
Tabellendatenzellen – also der HTML-TAG &lt;td&gt;, das f&uuml;r das
engl. <<\/span>b><\/span>t<<\/span>\/b><\/span>able <<\/span>b><\/span>d<<\/span>\/b><\/span>ata = Tabellen Daten steht<<\/span>\/p><\/span><\/p>\n\n\n\n

<<\/span>pre><\/span>
&lt;table&gt;
&lt;tr&gt;
&lt;td&gt;
&lt;\/td&gt;
&lt;\/tr&gt;
&lt;\/table&gt;
<<\/span>\/pre><\/span><\/p>\n\n\n\n

<<\/span>h2 id=“tabelle_mit_inhalt_fuellen“><\/span>Inhalt in Tabelle<<\/span>\/h2><\/span><\/p>\n\n\n\n

<<\/span>p><\/span>Auch jetzt wird noch herzhaft wenig angezeigt, da kein Inhalt da ist. Tragen wir als Inhalt in unsere Tabelle:<<\/span>\/p><\/span><\/p>\n\n\n\n

<<\/span>pre><\/span>
&lt;table&gt;
&lt;tr&gt;
&lt;td&gt;
Inhalt 1
&lt;\/td&gt;
&lt;\/tr&gt;
&lt;\/table&gt;
<<\/span>\/pre><\/span><\/p>\n\n\n\n

<<\/span>div class=“browserfenster“><\/span><\/p>\n\n\n\n

<<\/span>table><\/span>
<<\/span>tbody><\/span>
<<\/span>tr><\/span>
<<\/span>td><\/span> INHALT 1 <<\/span>\/td><\/span><\/p>\n\n\n\n

<<\/span>\/tr><\/span>
<<\/span>\/tbody><\/span><<\/span>\/table><\/span><\/p>\n\n\n\n

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

<<\/span>h2 id=“rahmen_der_tabelle“><\/span>Rahmen der Tabelle anzeigen<<\/span>\/h2><\/span><\/p>\n\n\n\n

<<\/span>p><\/span>Irgendwie sieht es auch noch nicht anders aus als unsere bisherigen
HTML-Seiten – also soll der <<\/span>b><\/span>Rahmen der Tabelle<<\/span>\/b><\/span> noch angezeigt werden. <<\/span>\/p><\/span><\/p>\n\n\n\n

<<\/span>pre><\/span>
&lt;table <<\/span>b><\/span>border=“1″<<\/span>\/b><\/span>&gt;
&lt;tr&gt;
&lt;td&gt;
Inhalt 1
&lt;\/td&gt;
&lt;\/tr&gt;
&lt;\/table&gt;
<<\/span>\/pre><\/span><\/p>\n\n\n\n

<<\/span>div class=“browserfenster“><\/span>
<<\/span>table border=“1″><\/span>
<<\/span>tbody><\/span><<\/span>tr><\/span>
<<\/span>td><\/span> INHALT 1 <<\/span>\/td><\/span>
<<\/span>\/tr><\/span>
<<\/span>\/tbody><\/span><<\/span>\/table><\/span>
<<\/span>\/div><\/span><\/p>\n\n\n\n

<<\/span>p><\/span>Und nun kommen noch <<\/span>b><\/span>mehr Spalten<<\/span>\/b><\/span> in Form von &lt;td&gt; hinzu<<\/span>\/p><\/span><\/p>\n\n\n\n

<<\/span>pre><\/span>
&lt;table border=“1″&gt;
&lt;tr&gt;
&lt;td&gt;
Inhalt 1
&lt;\/td&gt;
<<\/span>b><\/span> &lt;td&gt;
Inhalt 2
&lt;\/td&gt;<<\/span>\/b><\/span>
&lt;\/tr&gt;
&lt;\/table&gt;
<<\/span>\/pre><\/span><\/p>\n\n\n\n

<<\/span>div class=“browserfenster“><\/span><\/p>\n\n\n\n

<<\/span>table border=“1″><\/span>
<<\/span>tbody><\/span><<\/span>tr><\/span><\/p>\n\n\n\n

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

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

<<\/span>p><\/span>So, das gleiche mit noch <<\/span>b><\/span>mehr Zeilen<<\/span>\/b><\/span> – beides kann nach Belieben variiert werden. <<\/span>\/p><\/span><\/p>\n\n\n\n

<<\/span>pre><\/span>
&lt;table border=“1″&gt;
&lt;tr&gt;
&lt;td&gt; INHALT ZELLE 1 &lt;\/td&gt;
&lt;td&gt; INHALT ZELLE 2 &lt;\/td&gt;<\/span>
&lt;\/tr&gt;
&lt;tr&gt;
&lt;td&gt; INHALT ZELLE 3 &lt;\/td&gt;
&lt;td&gt; INHALT ZELLE 4 &lt;\/td&gt;<\/span>
&lt;\/tr&gt;
&lt;\/table&gt;
<<\/span>\/pre><\/span><\/p>\n\n\n\n

<\/span>
<p>Achte auf die Einr&uuml;ckungen, die die einzelnen Zellen verdeutlichen.<\/p><\/p>\n\n\n\n

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

<<\/span>h3><\/span>Tipp: zum Fehler bei Tabellen vermeiden<<\/span>\/h3><\/span>
<<\/span>p><\/span>Wegen der &Uuml;bersichtlichkeit und um Probleme zu umgehen, sollte besonders
bei Tabellen auf sauberen Code geachtet werden. Also auf jeden Fall mit
Einr&uuml;ckungen zur besseren &Uuml;bersicht arbeiten!<<\/span>\/p><\/span><\/p>\n\n\n\n

<<\/span>p><\/span>Beim Arbeiten mit Tabellen solltest du das Attribut border setzen, also:
&lt;table border=“1″&gt;<<\/span>\/p><\/span><<\/span>!– \/edit:inhalt —><\/span><<\/span>!– omlement:vgw —><\/span><<\/span>img src=“http:\/\/vg09.met.vgwort.de\/na\/b1c5b5b67b694d3b8f5061a6b08bd7c6″ width=“1″ height=“1″ alt=““ \/><\/span><<\/span>!– \/omlement:vgw —><\/span>
{\/source}<\/p>\n\n\n\n

Aufgabe:<\/b><\/p>\n\n\n\n

Erstelle das Verzeichnis \/ai\/html\/tabellen
<\/b><\/p>\n\n\n\n

Erstelle in diesem Verzeichnis die Datei tabelle11.html und erstelle eine Tabelle mit nur einer Zeile und einer Spalte.
<\/b><\/p>\n\n\n\n

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

Aufgabe
<\/b><\/p>\n\n\n\n

Erstelle die Datei tabelle13.html.<\/b><\/p>\n\n\n\n

Erstelle den code, der eine Tabelle mit 3 Zeilen erzeugt.<\/b>
<\/b><\/p>\n\n\n\n

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

Aufgabe
<\/b><\/p>\n\n\n\n

Erstelle die Datei tabell51.html.<\/b><\/p>\n\n\n\n

Erstelle den code, der eine Tabelle mit 5 Spalten erzeugt.<\/b><\/p>\n\n\n\n

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

 <\/b><\/p>\n","protected":false},"excerpt":{"rendered":"

{source}<!– You can place html anywhere within the source tags —> <script language=“javascript“ type=“text\/javascript“> \/\/ You can place JavaScript like this <\/script><?php \/\/ You can place PHP like this ?> <h1>HTML Tabellen – Grundlagen<\/h1> <h2>Wie kam fr&uuml;her das Design auf Homepages<\/h2> <p>Sicher haben Sie sich bisher schon gefragt, wie kam das Design fr&uuml;her ohne CSS […]<\/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-60","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\/60","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=60"}],"version-history":[{"count":2,"href":"https:\/\/ai.hasebox.de\/index.php\/wp-json\/wp\/v2\/posts\/60\/revisions"}],"predecessor-version":[{"id":2390,"href":"https:\/\/ai.hasebox.de\/index.php\/wp-json\/wp\/v2\/posts\/60\/revisions\/2390"}],"wp:attachment":[{"href":"https:\/\/ai.hasebox.de\/index.php\/wp-json\/wp\/v2\/media?parent=60"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/ai.hasebox.de\/index.php\/wp-json\/wp\/v2\/categories?post=60"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/ai.hasebox.de\/index.php\/wp-json\/wp\/v2\/tags?post=60"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}