<html>
<head>
<title>Tutorial 1 || Tabellen</title>
</head>
<style type="text/css">
<!--
body
{
background-color: #F5F5F5;
}
u1
{
font-size: 28;
font-family: Comic Sans MS;
}
th
{
font-size: 15;
font-weight: bold;
font-color: #FFFFFF;
text-align: left;
border-style: solid;
border-width: 1px;
}
td
{
font-size: 12;
font-weight: normal;
font-style: normal;
font-color: #FFFFFF;
background-color: #FFFFFF;
border-style: solid;
border-width: 1px;
}
div.code
{
border-style: solid;
border-width: 1px;
font-size: 14;
font-weight: normal;
font-style: italic;
background-color: #F8F8FF;
}
C
{
font-size: 12px;
font-family: Courir New;
}
-->
</style>
<body>
<table border="0" width="800" align="center">
<tr><th><u1><div align="center">Tutorial 01 - Tabellen</div></u1></th></tr>
<tr>
<th>Wie beginne ich am besten?</th>
</tr>
<tr>
<td>
Zunächst sollten wird logischerweise dem Browser sagen das wir eine Tabelle beginnen wollen.<br>
Dies tun wir in dem wir den "<table>" tag in unseren Quellcode schreiben.<br>
<b>Code:</b>
<div class="code">
<table boder"1"> <!-- Sagt dem Browser wo die Tabelle beginnt. -->
</div><br>
Hierbei spielen verschiedene Faktoren eine rolle.<br>
Einige hiervon sind z.B.
<ul>
<li>boder</li>
<li>width</li>
<li>height</li>
</ul>
Diese können in den Tabellentag eingefügt und mit werten ausgestattet werden.<br>
<b>Code:</b>
<div class="code">
<table boder"1" width="800" height="50%"> <!-- Verschiedene neue Eigenschaften -->
</div>
Boder gibt an wie breit der Rahmen der Tabelle sein soll.<br>
Width und Height geben an wie breit und hoch die Tabelle sein soll. Hierbei kann zwischen einer angabe in Pixeln und Prozent gewählt werden.
</td>
</tr>
<tr>
<th>Was ist <tr>?</th>
</tr>
<tr>
<td>
Das "tr" im "<tr>" tag steht für Table-Row und erklärt sich somit fast schon selbst.<br>
"<tr>" gibt also an, an welcher Stelle in der Tabelle sich eine neue Zeile befinden soll.<br>
<b>Code:</b>
<div class="code">
<table boder"1"><br>
<tr> <!-- Erzeugt an dieser Stelle eine neue Zeile --> <br>
<br>
<!-- Hier befindet sich der Inhalt der Zeile --> <br>
<br>
</tr> <!-- Schliesst an dieser Stelle die neue Zeile --> <br>
</table>
</div>
Der Inhalt der Zeile wird also dementsprechend zwischen den "<tr>" tag geschrieben.
</td>
</tr>
<tr>
<th>Was ist <th>?</th>
</tr>
<tr>
<tr>
<td>
Das "th" im "<th>" tag steht für Table-Head und erklärt sich ebenso wie "<tr>" fast schon selbst.<br>
"<th>" gibt also an, an welcher Stelle in der Tabelle sich eine Spalte mit den Eigenschaften einer Übeschrift befinden soll.<br>
<b>Code:</b>
<div class="code">
<table boder"1"><br>
<tr> <br>
<th> <br>
<!-- Hier befindet sich der Inhalt der Überschriftenspalte --> <br>
</th> <br>
</tr> <br>
</table>
</div>
Hierbei gibt es einige Dinge die zu beachten sind. Bei Table Head gibt es einige automatische Eigenschaften.<br>
Einige davon sind z.B.:
<ul>
<li>Autom. Zentriert</li>
<li>Autom. Fett</li>
</ul>
</td>
</tr>
<tr>
<th>Was ist <td>?</th>
</tr>
<tr>
<td>"td" Steht für Table-Data. zwischen diesen tag kommt also ganz normaler Tabelleninhalt.<br>
<b>Code:</b>
<div class="code">
<table boder"1"><br>
<tr> <br>
<td> <br>
<!-- Hier befindet sich der Inhalt der Datenspalte --> <br>
</td> <br>
</tr> <br>
</table>
</div>
Der Inhalt der Datenspalte kann alles sein. Also Text, Bilder oder noch eine weitere Tabelle.
</td>
</tr>
<tr>
<th>Ein Tabellen Beispiel.</th>
</tr>
<tr>
<td>
Wir möchten eine Tabelle erzeugen mit 3 Zeilen und 3 Spalten. Die oberste Zeile soll mit überschriftenspalten gefüllt sein.<br>
<b>Code:</b>
<div class="code">
<table boder"1"><br>
<tr> <br>
<th>
Überschrift
</th>
<th>
Überschrift
</th>
<th>
Überschrift
</th> <br>
</tr> <br>
<tr> <br>
<td>
Table Data
</td>
<td>
Table Data
</td>
Table Data
<td>
Table Data
</td> <br>
</tr> <br>
<tr> <br>
<td>
Table Data
</td>
<td>
Table Data
</td>
Table Data
<td>
Table Data
</td> <br>
</tr> <br>
</table>
</div>
<b>Ansicht:</b>
<div class="code">
<table boder="1" width="100" height="100">
<tr>
<th>Überschrift</th>
<th>Überschrift</th>
<th>Überschrift</th>
</tr>
<tr>
<td>Table Data</td>
<td>Table Data</td>
<td>Table Data</td>
</tr>
<tr>
<td>Table Data</td>
<td>Table Data</td>
<td>Table Data</td>
</tr>
</table>
</div>
</td>
</tr>
<tr>
<th>Colspan & Rowspan</th>
</tr>
<tr>
<td>
Wir wollen nun "Colspan & Rownspan" bearbeiten. Diese beiden Eigenschaften sind sehr nützlich und werden häufig gebraucht.<br>
Wenn wir z.B. ein Bild einfügen wollen das sich über zwei Spalten erstreckt benötigen wir "colspan" da colspan für die "cols" also die Spalten verantwortlich ist.<br>
Rowspan hingegen beeinflusst den aufbau der Zeilen.<br>
<b>Code</b>
<div class="code">
<table boder="1"><br>
<tr><br>
<td colspan="2">
Eine 2 Spaltige spalte
</td><br>
</tr><br>
<tr><br>
<td>
Einspaltige Spalte
</td><br>
<td>
Einspaltige Spalte
</td><br>
</tr><br>
</table>
</div>
Zu beachten ist dabei die Rangfolge von links nach rechts und von oben nach unten.<br>
<b>Ansicht:</b>
<div class="code">
<table border="1" width="100" height="100">
<tr>
<td colspan="2">
Eine 2 Spaltige spalte
</td>
</tr>
<tr>
<td>
Einspaltige Spalte
</td>
<td>
Einspaltige Spalte
</td>
</tr>
</div>
</td>
</tr>
</table>
</div>
<br>
Hier ein Beispiel zu "rowspan".<br>
<b>Code:</b><br>
<div class="code">
<table border="1"><br>
<tr><br>
<td rowspan="2"> Mehrzeilige Spalte </td><br>
<td>Einzeilige Spalte</td><br>
</tr><br>
<tr><br>
<td>Einzeilige Spalte</td><br>
</tr><br>
</table><br>
</div>
<br>
Dazu die
<br><b>Ansicht:</b>
<div class="code">
<table border="1" width="100" height="100">
<tr>
<td rowspan="2">Mehrzeilige Spalte</td>
<td>Einzeilige Spalte</td>
</tr>
<tr>
<td>Einzeilige Spalte</td>
</tr>
</table>
</div>
</tr>
<tr>
<td align="center"><c>(C) by Shoebox 2006</c></td>
</tr>
</body>
</html>