HTML Grundlagen - Teil II

Index

Tabellen in HTML

Oft ist es hilfreich, oder gar unerläßlich, Informationen in Form einer Tabelle darzustellen. Dadurch wird die Übersichtlichkeit gewahrt, und dem Benutzer die Navigation vereinfacht.

Dieses Beispiel zeigt den grundsätzliche Aufbau einer Tabelle
<table border="Wert" width="Wert" cellspacing="Wert" cellpadding="Wert">
    <tr>
        <th>Überschrift Spalte 1</th>
        <th>Überschrift Spalte 2</th>
    </tr>
    <tr>
        <td>'Zeile1 Spalte 1'</td>
        <td>'Zeile1 Spalte 2'</td>
    </tr>
    <tr>
        <td>'Zeile2 Spalte 1'</td>
        <td>'Zeile2 Spalte 2'</td>
    </tr>
<table>
Wie Sie im Beispiel erkennen können, wird die gesamte Tabelle vom <table> Element umschlossen. Zeilen in der Tabelle werden Mithilfe des <tr> (Table Row) Elementes gebildet. Zum erzeugen von Spalten innerhalb einer Zeile kann das <td> Element, oder das <th> (Table Header) Element genuzt werden. Der Text inerhalb eines <th> Elementes wird fett hervorgehoben.

border Rahmendicke in Pixel
width die Breite der Tabelle in Pixel oder Prozent
cellspacing Abstand der Zellen untereinander (in Pixel)
cellpadding Abstand des Zelleninhaltes zum Zellenrand (in Pixel)

Weitere wichtige Attribute des <table> Elementes

<table bgcolor="#xxxxxx">

<table background="URI">

<table border="Wert" frame="Typ">

<table border="Wert" rules="Typ">


bgcolor Zweisung einer Hintergrundfarbe
background Zuweisung eines Hintergrundbildes

frame Bestimmt das Aussehe des Außerahmens rules Bestimmt das Aussehe des Gitternetzes
box Rahme rund herum
 none keine Linien
above Rahmen nur oben rows Linien nur zwischen den Zeilen
below Rahmen nur unten cols Linien nur zwischen Spalten
lhs Rahmen nur links all komplettes Gitternetz
rhs Rahmen nur rechts    
hsides Rahmen nur oben und unten    
vsides Rahmen nur links und rechts    

Attribute der Elemente <tr>, <td> und <th>

<tr bgcolor="#xxxxxx">
<td bgcolor="#xxxxxx">
<th bgcolor="#xxxxxx">

<tr background="URI">
<td background="URI">
<th background="URI">

<th width="Wert" height="Wert">
<td width="Wert" height="Wert">

<th align="Ausrichtung" valign="Ausrichtung">
<td align="Ausrichtung" valign="Ausrichtung">

<th colspan="Spalten" rowspan="Zeilen">
<td colspan="Spalten" rowspan="Zeilen">


bgcolor Zweisung einer Hintergrundfarbe
background Zuweisung eines Hintergrundbildes

width Zellenbreite in Pixel oder Prozent
height Zellenhöhe in Pixel oder Prozent
align Horizontale Ausrichtung des Zelleninhaltes (left, center, right, justify)
valign Vertikale Ausrichtung des Zelleninhaltes (top, middle, bottom)

colspan Mehrere Spalten verbinden
rowspan Mehrere Zeilen verbinden

Das folgende Beispiel zeigt, wie Verbundene Zellen aussehen:
<table border="1" width="40%">
    <tr>
        <th colspan="2">Kategorie &Uuml;berschrift<th>
    </tr>
    <tr>
        <td>Zelle 1</td>
        <td>Zelle 2</td>
    </tr>
</table>
Kategorie Überschrift
Zelle 1 Zelle 2

nach oben ↑

Formulare in HTML

Wie Sie möglicherweise beim surfen im Web bereits gesehen haben, gibt es in HTML die Möglichkeit, Formlare zu erstellen. Die Inhalte der Formulare können Sie dann beispielsweise per eMail versenden, oder Mithilfe eines PHP Scriptes auswerten. In diesem Kapitel werden kurz die wichtigsten Elemente bezüglich Formulare vorgestellt.

1. Das <form> Element

<form action="URI" method="Methode" enctype="MIME-Typ" >
    <!-- Inhalt des Formulars -->
</form>


action Zieladresse, die die Daten des Formulars verarbeitet (z.b. ein PHP oder CGI Script).
Zum Versand der Formulardaten per Mail: action="mailto: user@adresse.tdl" (siehe: Links)
action Übertragngsart der Daten (GET oder POST)
bei action="mailto:" immer POST
enctype Für MIME-Type einen entsprechenden Typ einsetzen.
bei action="mailto:" immer text/plain

2. Einzeiliges Eingabefeld / Passwortfeld

<form action="" method="POST">
    <input type="text" size="Wert" maxlength="Wert" name="Name" value="Wert" readonly />
    <input type="password" size="Wert" maxlength="Wert" name="Name" />
</form>


type Typ des Feldes (text oder password)
password bedeutet, daß nur * angezeigt wird.
size Länge des Eingabefeldes in Zeichen
maxlength maximale Länge des Eingabefeldes in Zeichen
name Name des Eingabefeldes (relevant für die Weiterverarbeitung)
value Vorbelegung des Feldes mit einem Wert
readonly keine Änderungen im Feld zulassen

3. Mehrzeiliges Eingabefeld

<form action="" method="POST">
    <textarea cols="Spalten" rows="Zeilen" name="Name" wrap="Wert" value="Wert" readonly >
        optionale Textvorbelegung
    </textarea>
</form>


cols Spalten (Breite in Zeichen)
rows Höhe in Zeichen
name Name des Textfeldes
wrap Art der automatischen Zeilenumbrüche
soft = automatischer Zeilenumbruch nur bei Eingabe
hard = automatischer Zeilenumbruch bei Eingabe wird zu Zeilenumbrüchen bei Formularversand
value Vorbelegung des Feldes mit einem Wert
readonly keine Änderungen im Feld zulassen

4. Auswahllisten

<form action="" method="POST">
    <select size="Höhe" name="Name" >
        <option value="Wert" selected>Eintrag 1</option>
        <option value="Wert" >Eintrag 2</option>
        <option value="Wert" >Eintrag 3</option>
    </select>
</form>


size Höhe der Liste (1 für 'Dropdown Menü')
name Name des Feldes
value Absendewert
selected Vorauswahl eines Eintrages

5. Radio Buttons

<form action="" method="POST">
    <input type="radio" name="Name" value="Wert" checked /> Auswahltext 1
    <input type="radio" name="Name" value="Wert" /> Auswahltext 2
</form>


type radio für Radio-Buttons
name Name des RadioButtons
value Absendewert
checked Vorauswahl eines Eintrages

6. Checkboxes

<form action="" method="POST">
    <input type="checkbox" name="Name" value="Wert" checked /> Auswahltext 1
    <input type="checkbox" name="Name" value="Wert" /> Auswahltext 2
</form>


type checkbox für Checkboxes
name Name der Checkbox
value Absendewert
checked Vorauswahl eines Eintrages

7. Buttons

<form action="" method="POST">
    <input type="button" name="Name" value="Beschriftung" onClick="" />
    <button type="button" name="Name" value="Alternativbeschriftung"> Beschriftung </button>
</form>


Buttons können mit den Elementen <input> und <button> erzeugt werden.
type button für Buttons
name Name des Buttons
value Beschriftung / Alternativbeschriftung des Buttons
onClick Angabe eines JavaScript Ereignisses

8. Datei Upload

<form action="" method="POST">
    <input type="file" name="Name" maxlength="Größe" accept="MIME-Typ" />
</form>


type file für Dateiupload
name Name des Feldes
maxlength maximale Größe der Datei
accept Akzeptierte Dateitylen (z.b. text/*)

9. Versteckte Elemente

<form action="" method="POST">
    <input type="hidden" name="Name" value="Wert" />
</form>


type hidden für versteckte Elemente
name Name des Elementes
value Wert des Elementes

10. Buttons zum Absenden

<form action="" method="POST">
    <input type="submit" value="Beschriftung" />
    <input type="image" src="URI" />
    <input type="reset" value="Beschriftung" />
</form>


type submit bzw image für Absenden-Buttons
reset für Rücksetzen-Button
value Beschriftung des Buttons
src Für URI die Adresse einer Bilddatei angeben

nach oben ↑

Frames in HTML

HTML bietet Ihnen die Möglichkeit, Frameseiten zu erstellen, also statt einer einzigen HTML Seite, mehrere Seiten, jeweils in einem Bestimmten bereich des Browserfensters darzustellen. Beispielsweise könnten Sie das Fenster in einen schmalen Men¨bereich (links) und einen Hauptbereich (rechts) teilen. Das folgende Beispiel zeigt den Grundaufbau einer Frameseite. Bitte beachten Sie, dass die Frameseite selbst kein <body> Element enthält.

<html>
    <head>
        <title>Titel</title>
    </head>

    <frameset cols="Spalten" rows="Zeilen">
        <frame src="URI Frame 1" name="Name" />
        <frame src="URI Frame 2" name="Name" />
        <noframes>
            <!-- Elemente und Informationen die Angezeigt werden,
                    falls der Browser keine Frames darstellen kann. -->
        </noframes>
    </frameset>
</html>
Wie Sie im Beispiel erkennen können, wird der gesamte Framebereich vom <frameset> Element eingeschlossen. Hier wird auch die Anzahl Spalten/Zeilen festgelegt, welche die Frameseite enthält. Die eigentlichen HTML Seiten werden Mithilfe des <frame> Elementes festgelegt. Um die Kompatibilität zu Browsern, die keine Frames darstellen können, zu wahren, dient das <noframes> Element.

cols Angabe der Spalten in Pixel oder Prozent (z.b. cols="30%, 70%")
rows Angabe der Zeilen in Pixel oder Prozent (z.b. rows="120, *, 80")

Weiteres zum <frame> Element
<frame src="URI" name="Name" scrolling="Wert" frameborder="Wert" noresize/>

<frame src="URI" name="Name" marginwidth="Wert" marginheight="Wert" />

<frame src="URI" name="Name" border="Wert" framespacing="Wert" />


src die Adresse der jeweiligen HTML Datei
name der Name des Frames (vergleiche target Attribut bei Links)
scrolling Anzeigen einer Scrollbar (yes, no, auto)
frameborder Dicke der Framerahmens in Pixel
noresize Ändern der Framegröße verbieten
marginwidth Abstand des Fensterinhalts zum Rahmen in Pixel (links/rechts)
marginheight Abstand des Fensterinhalts zum Rahmen in Pixel (oben/unten)
border Dicke des Rahmens in Pixel
framespacing Abstand der Frames untereinander

Folgendes Beispiel soll das ganze verdeutlichen
<html>
    <head>
        <title>Titel</title>
    </head>

    <frameset rows="25%, 75%">
        <frame src="top.html" name="oben" />
        <frameset cols="200, *">
            <frame src="left.html" name="links" />
            <frame src="right.html" name="rechts" />
        </frameset>

        <noframes>
            <p>Leider kann Ihr Browser keine Frames darstellen</p>
        </noframes>
    </frameset>
</html>


In etwa so würde die Seite dann aussehen

Hier wird die Datei top.html angezeigt.



Hier wird die Datei left.html angezeigt.


Hier wird die Datei right.html angezeigt.


nach oben ↑

Validation Info

Dieses Dokument entspricht den aktuellen HTML / CSS Standards.   Valid HTML 4.01!   Valid CSS!

Verwandte Themen


Stoppt die Vorratsdatenspeicherung! Jetzt klicken &handeln!