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:
<html>
<body>
<table>
</table>
</body>
</html>
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:
<html>
<body>
<table>
<tr></tr>
<tr></tr>
<tr></tr>
</table>
</body>
</html>
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:
<html>
<body>
<table>
<tr>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<tr>
</table>
</body>
</html>
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:
<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>
Wir können nun auch die Höhe einzelner Spalten festlegen:
Beispielcode HTML:
<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>
Wir können die Farben jeder einzelnen Zelle in der Tabelle ändern:
Beispielcode HTML:
<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>
Wir können auch die Rahmendicke ändern. Dazu verwenden wir das border Element:
Beispielcode HTML:
<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>
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:
<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>
Im nächsten Tutorial erkläre ich Euch die verschiedenen Gestaltungsmöglichkeiten einer Tabelle.
Related posts:
- Tabellen in HTML – Tutorial 2 der Rahmen ...Im letzten Tutorial habe ich erklärt, wie man die Rahmendicke...
- Tabellen in HTML – Teil 3 Cellpadding und Cellspacing In diesem Tutorial möchte ich mich mit Abständen innerhalb der...
- HTML Tabellen tbody scrollen und korrekt ausdrucken Teil 2 In unserem vorherigen Tutorial hatten wir zuletzt mehrere Probleme: Opera...
- Tabellen in HTML – Teil 4 thead, tbody, tfoot ...Heute möchte ich Euch erklären, wie Ihr größere Tabellen in...
- HTML Tabellen tbody scrollen und korrekt ausdrucken Teil 1 Im letzten Tutorial habe ich Euch gezeigt, wie man bei...
Ähnliche Artikel bereitgestellt von Yet Another Related Posts Plugin.
