Code:
<html>
<head>
<title> Blinde Tabellen </title>
</head>
<body>
<table>
<tr>
<th>
Überschrift
</th>
</tr>
<tr>
<td>
Hier steht der Text
</td>
</tr>
</table>
</body>
</html>
Beispiel
Im 1. Beispiel seht ihr eine blinde Tabelle. Das heißt eine Tabelle ohne einen Rahmen.
Die Tabelle beginnt mit dem Einführungstag <table> (table = Tabelle). Danach wird durch <tr> die 1. Zeile geöffnet.
Mit <th> (tableheader = Tabellenkopf) wird die Kopfzeile eingefügt! Sie wird meistens fett und zentriert dargestellt.
<td> (tabledata = Tabellendaten) beginnt eine neue Spalte. Zwischen diesem Tag wird dann der Text, das Bild... eingefügt.
Code:
<html>
<head>
<title> Tabellen </title>
</head>
<body>
<table border="1">
<tr>
<td>
1.Zeile, 1. Spalte
</td>
<td>
1. Zeile, 2. Spalte
</td>
</tr>
<tr>
<td>
2.Zeile, 1. Spalte
</td>
<td>
2.Zeile, 2. Spalte
</td>
</tr>
</table>
</body>
</html>
Beispiel
Hier seht ihr jetzt eine Tabelle mit 2 Zeilen und jeweils 2 Spalten.
Durch das Element <table border="x"> border kann man jetzt auch den Rahmen der Tabelle sehen. Die Rahmendicke wird dann durch die Zahl bestimmt.
Code:
<html>
<head>
<title> Tabellen </title>
</head>
<body>
<table border="1">
<tr>
<td rowspan="2">
1. Spalte
</td>
<td colspan="2">
1. Zeile
</td>
<tr>
<td>
2.Zeile, 1. Spalte
</td>
<td>
2.Zeile, 2. Spalte
</td>
</tr>
</tr>
</table>
</body>
</html>
Beispiel
<td rowspan="x"> bestimmt wieviele Zeilen hinter einer Spalte untereinander angezeigt werden sollen.
Und <td colspan="x"> gibt dann an wieviele Spalten unter einer Spalte angezeigt werden sollen. Folglich sollte der Mindestwert immer bei 2 liegen.
Probiert ruhig mal mit verschiedenen Werten rum!
|