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 konzentriert sich seit zwei Jahrzehnten 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.
