Tabellen in HTML – Teil 1
Tabellen in HTML – Tutorial Teil 1
Heute möchte ich damit beginnen Euch zu erklären, wie Ihr Tabellen in HTML erstellen könnt.
Das ist ein sehr umfangreiches Thema. Deshalb werde ich dieses Tutorial splitten.
Um in HTML eine Tabelle zu erstellen, verwendet man table-Tags:
Beispielcode HTML:
<pre><html>
<body>
<table>
</table>
</body>
</html></pre>
Zwischen beide Table Tags müssen nun für jede Zeile td-Tags gesetzt werden.
Wenn man eine Tabelle mit beispielsweise drei Zeilen erstellen möchte, muss man dreimal tr-Tags einsetzen. tr ist die Abkürzung von table row. Hierfür sollte der Aufbau folgendermaßen aussehen:
Beispielcode HTML:
<pre><html>
<body>
<table>
<tr></tr>
<tr></tr>
<tr></tr>
</table>
</body>
</html></pre>
Das ist allerdings noch nicht alles: Zuletzt müssen wir noch festlegen, wieviele Spalten nun in den einzelnen Zeilen vorhanden sein sollen. Das machen wir mit td-Tags. td ist die Abkürzung von table data… also Datenzellen.
Beispielcode HTML:
<pre><html>
<body>
<table>
<tr>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<tr>
</table>
</body>
</html></pre>
Doch was ist nun das? Ein paar schmale Kästchen? Das liegt daran, daß wir der Tabelle weder eine Breite vorgegeben, noch Inhalte in die Zellen eingefügt haben. Als leeren Inhalt kann man ein nehmen.:
Beispielcode HTML:
<pre><html>
<body>
<table width="100%">
<tr>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<tr>
</table>
</body>
</html></pre>
Wir können nun auch die Höhe einzelner Spalten festlegen:
Beispielcode HTML:
<pre><html>
<body>
<table width="100%">
<tr>
<td> </td>
<td> </td>
</tr>
<tr height="70">
<td> </td>
<td> </td>
</tr>
<tr height="170">
<td> </td>
<td> </td>
<tr>
</table>
</body>
</html></pre>
Wir können die Farben jeder einzelnen Zelle in der Tabelle ändern:
Beispielcode HTML:
<pre><html>
<body>
<table width="100%">
<tr>
<td bgcolor="#ff0000"> </td>
<td> </td>
</tr>
<tr height="70">
<td> </td>
<td> </td>
</tr>
<tr height="170">
<td> </td>
<td bgcolor="#00ff00"> </td>
<tr>
</table>
</body>
</html></pre>
Wir können auch die Rahmendicke ändern. Dazu verwenden wir das border Element:
Beispielcode HTML:
<pre><html>
<body>
<table width="100%" border="5">
<tr>
<td bgcolor="#ff0000"> </td>
<td> </td>
</tr>
<tr height="70">
<td> </td>
<td> </td>
</tr>
<tr height="170">
<td> </td>
<td bgcolor="#00ff00"> </td>
<tr>
</table>
</body>
</html></pre>
Tabellen sollten in der Regel auch eine Überschriften-Zeile haben, also eine Zeile, die die Inhalte beschreibt. Dazu ersetzen wir die ersten tds mit th. Th ist die Abkürzung von table heading.
Beispielcode HTML:
<pre><html>
<body>
<table width="100%" border="5">
<tr>
<th>Überschrift 1</th>
<th>Überschrift 2</th>
</tr>
<tr height="70">
<td> </td>
<td> </td>
</tr>
<tr height="170">
<td> </td>
<td bgcolor="#00ff00"> </td>
<tr>
</table>
</body>
</html></pre>
Im nächsten Tutorial erkläre ich Euch die verschiedenen Gestaltungsmöglichkeiten einer Tabelle.
Author: Andreas Lang
Andreas Lang hat im Alter von 12 Jahren begonnen, auf einem Atari ST 1040 STFM in Omikron und STOS Basic zu programmieren.
Spiele interessierten ihn nicht so sehr.
Die Welt der Bits und Bytes hat ihn gefangen.
Programmierertechnisch folgten auf dem ersten 486er Turbo Pascal, Visual Basic.
Mit dem ersten Internet Anschluss per 56k Modem folgten HTML, Javascript, CSS und Macromedia Flash.
Die Website www.wizzquiz.de wurde geboren.
Eine Flash Online-Gaming Plattform mit Quiz Spielen, Memory, Sokoban etc.
Später entwickelte er Software unter anderem für Continentale und Siemens AG.
Seit zwei Jahrzehnten konzentriert er sich auf die Webentwicklung und Webdesign mit dem Schwerpunkt PHP, Laravel und Javascript und betreut seine Kunden mit Herz und Seele in allen Bereichen von Entwicklung, Design, Suchmaschinenoptimierung, IT-Recht, IT-Sicherheit etc.
