Die Anfänger ebay Seite, Teil II, Desing

Aufrufe 4 Mal bewertet mit „Gefällt mir” Kommentare Kommentar
Mag ich anklicken, wenn dieser Ratgeber hilfreich war
Nach meinem letzten Artikel über die Grundlagen von HTML " Die Anfänger ebay Seite, ohne Angst vor HTML ", möchte ich heute das Desing und Formatierungselement Tabelle etwas näherbringen!

Das Element " <table>" ist ein sehr vielseitiges Tag aus der HTML Elementeliste.
Es dient der einfachen Struckturrierung und für ein übersichtliches Layout.

            Wir wollen eine Einfache Tabelle erstellen!


Quellcode:

<table width="250px" height="100px" border="4px" bgcolor="#C8E6DD" bordercolor="#000066" >
<tr><th colspan="2">Überschrift<th></tr>
<tr><td>Zeile 1, Spalte 1</td><td>Zeile 1, Spalte 2</td>
</tr><tr>
<td>Zeile 2, Spalte 1</td><td>Zeile 2, Spalte 2</td>
</tr><tr>
<td  colspan="2" align="center">Zeile 3, Spalte 1<br />verbunden mit <br />Zeile 3, Spalte 2</td>
</tr><tr>
<td rowspan="2">Zeile 4, Spalte 1<br />verbunden mit<br /> Zeile 5, Spalte 1</td><td>Zeile 4, Spalte 2</td>
</tr><tr>
<td>Zeile 5, Spalte 2</td>
</tr></table>

Erläuterung:

Am Anfang muss das Tabellen einleitende Element <table> stehen, welches diverse Zusatzinformationen erhalten kann. (diese müssen in dem <table ...> stehen.)

Ich zeige ihnen hier die häufigsten: 

  • width="250px"                  bestimmt die Gesamtbreite der Tabelle, in Pixel oder %
  • height="100px"                  bestimmt die Gesamthöhe der Tabelle, in Pixel oder %
  • border="4px"                     bestimmt die Breite des Rahmens
  • bgcolor="#C8E6DD"         bestimmt die Farbe des Hintergrundes der Tabele
  • bordercolor="#000066"     bestimmt die Farbe der Tabellen Gitterlinien
Formatierungselemente der Tabelle:

<tr>  leitet den Anfang einer Zeile ein </tr>
<td> leitet den Anfang einer Spalte ein, doch es muss erst eine Zeile definiert sein! </td>
<th> anstelle eines <td> kann auch <th> stehen, um eine Überschrift zu erstellen </th>

In den Tags <td> und <th> kann man die folgenden Elemente einbinden:

<td  colspan="2" > bestimmt das diese Zelle mit der daneben Verbunden wird, "2" Bestimmt die Anzahl der Zellen die verbunden werden sollen! </td>
<td  rowspan="2"> bestimmt das diese Zelle mit der darunter liegenden Verbunden wird </td>
<td  align="center"> bestimmt das die Textinhalte mittig liegen, möglich: "left", "center", "right" </td>
( in den Tags können natürlich mehrere Elemente stehen!!! )

</table> Beendet die Tabelle, und wir sind schon fertig ;)

Die hier benannten Elemente sind bei weiten nicht alle Möglichkeiten welche in diesen Tags verwandt werden können.
Möchten Sie Ihr Wissen weitergeben? Erstellen Sie Ihren eigenen Ratgeber… Verfassen Sie einen Ratgeber
Weitere Ratgeber erkunden