|
|
|
|
 Wegweiser:
Startseite >>
Übersicht HTML-Kurs
>>
Kapitel 5: Tabellen definieren
| HTML Kurs - Kapitel 5: Tabellen definieren |
Tabellen sind ein sehr wichtiges Element von HTML. Einerseits lassen sich Daten viel übersichtlicher darstellen und
andererseits, wenn Sie die Gitternetzlinien weglassen, haben Sie die Möglichkeit mit Hilfe von Tabellen den Text
im Browserfenster exakt zu plazieren.
Zunächst werden wir uns dem grundsätzlichen Aufbau von Tabellen in HTML.
Beispiel:
<table border>
<tr>
<th>Überschrift 1</h1>
<th>Überschrift 2</h2>
</tr>
<tr>
<td>2. Zeile; 1. Spalte</td>
<td>2. Zeile; 2. Spalte</td>
</tr>
<tr>
<td>3. Zeile; 1. Spalte</td>
<td>3. Zeile; 2. Spalte</td>
</tr>
</table>
|
<< So sieht`s aus >>
Mit <table border> leiten Sie die Definition einer Tabelle mit Gitternetzlinien ein, wollen Sie auf die
Gitternetzlinien verzichten, dann müssen Sie lediglich das Attribut border weglassen. Die Inhalte der Zellen
werden Zeilenweise eingegeben, wobei <tr> die Zeilen und <td> die Inhalte der Datenzellen festlegt.
<th> erzeugt die Überschriften der Spalten, die fett ausgegeben werden.
Ihnen ist vielleicht aufgefallen, dass wir im letzten Beispiel keine Angaben über die Größe der Zellen gemacht haben,
dass wollen wir in diesem Abschnitt nachholen.
Der Befehl zu Definition der Spalten heißt <colgroup>. Mit ihm können ie sowohl Tabellen definieren, deren
Spalten alle die gleiche Breite aufweisen, als auch spalten mit unterschiedlichen Breiten.
Im volgenden Beispiel sehehn Sie eine Tabelle, die drei Spalten umfasst, deren Breite identisch ist.
Die Breite der Splaten legen Sie über das Attribut width fest, die Anzahl der Spalten über span.
Beispiel:
<table border>
<tr>
<colgroup width="250" span="3">
</colgroup>
</tr>
<tr>
<td>Text 1</td>
<td>Text 2</td>
<td>Text 3</td>
</tr>
</table>
|
<< So sieht`s aus >>
Sie können die Größe der Spalten auch einzeln festlegen.
Beispiel:
<table border>
<tr>
<colgroup >
<col width="60">
<col width="120">
<col width="180">
</colgroup>
</tr>
<tr>
<td>Text 1</td>
<td>Text 2</td>
<td>Text 3</td>
</tr>
</table>
|
<< So sieht`s aus >>
Bitte beachten Sie jedoch, dass <col>-Tags kein Abschluss-Tag haben dürfen. Das abschließende </colgroup>-Tag ist dagegen optional.
Es ist auch erlaubt, mehrere <colgroup>-Tags zu notieren. So können Sie beispielsweise mit
<colgroup width="100" span="2"> und <colgroup width="50" span="3"> hintereinander notiert insgesamt
5 Spalten für die Tabelle definieren, wobei die ersten zwei Spalten eine
Breite von 100 Pixeln erhalten und die nachfolgenden drei Spalten eine Breite von 50 Pixeln.
|
|
|
