{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üher das Design auf Homepages</h2>
<p>Sicher haben Sie sich bisher schon gefragt, wie kam das Design früher ohne CSS auf
Homepages? – Normalerweise über Tabellen, die unsichtbar sind. Dazu
später mehr. Nun erstmals zu Tabellen, die sichtbar sind und damit
einfacher zu verstehen.</p>
<p>HTML Tabellen werden auch heute noch angewendet, wenn die Inhalte sinnvoll in Tabellen dargestellt werden können, sprich wenn man auch im normalen Alltag eine Tabelle dafür hernehmen würde. Z.B. für Fahrpläne usw. – HTML Tabellen werden bei aktuellem HTML-Einsatz nicht mehr für Design genutzt!</p>
<h2 id=“bestandteile_tabelle“>Bestandteile einer Tabelle – Tabellenaufbau</h2>
<p>Tabellen bestehen aus Reihen und Spalten. Diese werden wir nun
schrittweise aufbauen (zum besseren Verständnis) bis hin zur
kompletten Tabelle.</p>
<p>Für eine Tabelle werden auf jeden Fall 3 verschiedene HTML-TAGs benötigt. Diese HTML-Befehle sind:</p>
<ul>
<li><table></li>
<li><tr></li>
<li><td></li>
</ul>
<p>Grundlage ist der HTML-TAG <table>. Damit fängt jede Tabelle
an und mit dem entsprechenden END-TAG hö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.</p>
<pre>
<table>
</table>
</pre>
<p>Mit diesem Code passiert noch gar nichts, da weder eine Anzahl der Spalten noch die Anzahl der Zeilen angegeben wurde.</p>
<h2 id=“tabellen_zeile“>Tabellenzeile erstellen – <tr></h2>
<p>Als nächsten Schritt legen wir eine Zeile mit <tr> an. Das tr steht für engl. <b>t</b>able <b>r</b>ow = Tabellen Reihe</p>
<pre>
<table>
<tr>
</tr>
</table>
</pre>
<p>Wieviele Zellen in der Tabellenzeile angezeigt werden, wird über den nun folgenden HTML-Befehl bewirkt.</p>
<h2 id=“tabellen_zelle“>Tabellenzelle erstellen</h2>
<p>Auch jetzt wird noch nichts angezeigt – es fehlen die
Tabellendatenzellen – also der HTML-TAG <td>, das für das
engl. <b>t</b>able <b>d</b>ata = Tabellen Daten steht</p>
<pre>
<table>
<tr>
<td>
</td>
</tr>
</table>
</pre>
<h2 id=“tabelle_mit_inhalt_fuellen“>Inhalt in Tabelle</h2>
<p>Auch jetzt wird noch herzhaft wenig angezeigt, da kein Inhalt da ist. Tragen wir als Inhalt in unsere Tabelle:</p>
<pre>
<table>
<tr>
<td>
Inhalt 1
</td>
</tr>
</table>
</pre>
<div class=“browserfenster“>
<table>
<tbody>
<tr>
<td> INHALT 1 </td>
</tr>
</tbody></table>
</div>
<h2 id=“rahmen_der_tabelle“>Rahmen der Tabelle anzeigen</h2>
<p>Irgendwie sieht es auch noch nicht anders aus als unsere bisherigen
HTML-Seiten – also soll der <b>Rahmen der Tabelle</b> noch angezeigt werden. </p>
<pre>
<table <b>border=“1″</b>>
<tr>
<td>
Inhalt 1
</td>
</tr>
</table>
</pre>
<div class=“browserfenster“>
<table border=“1″>
<tbody><tr>
<td> INHALT 1 </td>
</tr>
</tbody></table>
</div>
<p>Und nun kommen noch <b>mehr Spalten</b> in Form von <td> hinzu</p>
<pre>
<table border=“1″>
<tr>
<td>
Inhalt 1
</td>
<b> <td>
Inhalt 2
</td></b>
</tr>
</table>
</pre>
<div class=“browserfenster“>
<table border=“1″>
<tbody><tr>
<td> INHALT 1 </td>
<td> INHALT 2 </td>
</tr>
</tbody></table>
</div>
<p>So, das gleiche mit noch <b>mehr Zeilen</b> – beides kann nach Belieben variiert werden. </p>
<pre>
<table border=“1″>
<tr>
<td> INHALT ZELLE 1 </td>
<td> INHALT ZELLE 2 </td>
</tr>
<tr>
<td> INHALT ZELLE 3 </td>
<td> INHALT ZELLE 4 </td>
</tr>
</table>
</pre>
<p>Achte auf die Einrückungen, die die einzelnen Zellen verdeutlichen.</p>
<h3>Tipp: zum Fehler bei Tabellen vermeiden</h3>
<p>Wegen der Übersichtlichkeit und um Probleme zu umgehen, sollte besonders
bei Tabellen auf sauberen Code geachtet werden. Also auf jeden Fall mit
Einrückungen zur besseren Übersicht arbeiten!</p>
<p>Beim Arbeiten mit Tabellen solltest du das Attribut border setzen, also:
<table border=“1″></p><!– /edit:inhalt —><!– omlement:vgw —><img src=“http://vg09.met.vgwort.de/na/b1c5b5b67b694d3b8f5061a6b08bd7c6″ width=“1″ height=“1″ alt=““ /><!– /omlement:vgw —>
{/source}
Aufgabe:
Erstelle das Verzeichnis /ai/html/tabellen
Erstelle in diesem Verzeichnis die Datei tabelle11.html und erstelle eine Tabelle mit nur einer Zeile und einer Spalte.
Aufgabe
Erstelle die Datei tabelle13.html.
Erstelle den code, der eine Tabelle mit 3 Zeilen erzeugt.
Aufgabe
Erstelle die Datei tabell51.html.
Erstelle den code, der eine Tabelle mit 5 Spalten erzeugt.
Schreibe einen Kommentar