Alles klar soweit !?

Sie befinden sich hier:

Kommen wir in diesem Teil unseres Html-Tutoriums zu den Tabellen.

Jede Tabelle beginnt und endet mit einem Table-Tag.

<table></table>

Es gibt verschiedene Attribute, die ihr fĂŒr Tabellen verwenden könnt. Setzt ihr keine Attribute, werden die Standardwerte angezeigt (in der unteren Auflistung zu finden).
Eine Zeile wird eingeleitet durch ein “<tr>“-Tag und endet mit einem “</tr>“-Tag.
Spalten werden durch “<th>”-Tags und “<td>”-Tags eingeleitet. Der Unterschied liegt darin, dass “<th>” Überschriften darstellt und “<td>” den Tabellentext.

Dieses Beispiel ist eine drei spaltige und drei zeilige Tabelle mit einer Rahmendicke von einem Pixel (1px”). Es verdeutlicht den Unterschied zu den einzelnen Tags. (Beispiel 1)

<table border="1px">
  <tr>
    <th>Überschrift1</th>
    <th>Überschrift2</th>
    <th>Überschrift3</th>
  </tr>

  <tr>
    <td>Beispieltext</td>
    <td>Beispieltext</td>
    <td>Beispieltext</td>
  </tr>

  <tr>
    <td>Beispieltext</td>
    <td>Beispieltext</td>
    <td>Beispieltext</td>
  </tr>
</table>

Ihr könnt die RahmengrĂ¶ĂŸe auch auf 0px stehen lassen. Somit werden die formatierungen ĂŒbernommen, aber man sieht von der Tabelle selber nichts! (Beispiel 2)

Hier eine Auflistung der Attribute:

RahmengrĂ¶ĂŸe: Standardwert = 0px

<table border="1px">

Zellenabstand: Standardwert = 0px (Beispiel 3)

<table cellspacing="15px">

Innenabstand: Standardwert = 0px (Beispiel 3)

<table cellpadding="5px">

Spaltenbreite festlegen: Standardwert = Die Spaltenbreite wird ermittelt, nachdem der Inhalt geladen wurde und ist somit von Spalte zu Spalte unterschiedlich. FĂŒr jede Spalte wird ein Wert angegeben (Beispiel 4)

<table>
<colgroup>
<col width="400px">
<col width="100px">
<col width="520px">
</colgroup>
<tr>
...

Zellenbreite: Standardwert = 0px (Beispiel 5)

<th width="200px">Spalte mit 200px breite</th>
<td width="400px">Spalte mit 400px breite</td>

Zellenhöhe: Standardwert = 0px (Beispiel 5)

<th height="200px">Spalte mit 200px höhe</th>
<td height="400px">Spalte mit 400px höhe</td

Ausrichtung der Zelle (Horizontale): Das “align" Attribut kann in allen Tags verwendet werden. (Beispiel 6)

<th align="left">linksbĂŒndig</th>
<td align="center">zentriert</td>
<td align="right">rechtsbĂŒndig</td>

Ausrichtung der Zelle (Vetikale): Das “valign" Attribut kann in allen Tags verwendet werden. (Beispiel 6)

<th valign="top">oben</th>
<td valign="middle">mitte</td>
<td valign="bottom">unten</td>

Hintergrundfarbe: Standardwert = transparent (Beispiel 6)

Die Farben können als Namen oder im Hexadezimalformat angegeben werden.

<td bgcolor="blue"> hintergrundfarbe blau</td>
<td bgcolor="#000099"> hintergrundfarbe blau</td>

Zellen verbinden (zeilenweise): “colspan” gibts die grĂ¶ĂŸe an, wie viele Zellen verbunden werden sollen.     (Beispiel 7)

<td colspan="3"> drei Zellen wurden verbunden</td>

Zellen verbinden (spaltenweise): “rowspan ” gibts die grĂ¶ĂŸe an, wie viele Zellen verbunden werden sollen.  (Beispiel 7)

<td rowspan ="3"> drei Zellen wurden verbunden</td>

Tabellenbeschriftung: Duch den “caption”-Tag könnt ihr eurer Tabelle eine Überschrift erstellen. (Beispiel 7)

<table>
  <caption>TabellenĂŒberschrift</caption>
  <tr>
  ...

Ihr habt noch Fragen oder Anregungen, dann schreibt uns einfach eine E-Mail ĂŒber unser Kontaktformular oder kommentiert diesen Beitrag!

Alles klar soweit !?

 

vorheriger Artikel: nÀchster Artikel:
» «

Geschrieben am: 27. Mai 2013 um 12:38 // Thema: HTML //  Kommentar verfassen

Auf dieses Thema gibt es noch keine Reaktion

Hinterlasse eine Antwort

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind markiert *




Impressum // KlaroBox // die kostenlose Lernkiste