Du bist hier:
· Home
· · Wiki




mercadia.de:mBB-Code/Tabellen

Alle KategorienSuchenLetzte ÄnderungenZufälliger Artikel
Artikel geschlossen • Artikelversionen


Bau einer Tabelle

Einleitung

Im Folgenden wird eine Beispieltabelle mit Hilfe des mBB-Codes immer wieder verändert.

Spalte 1, Zeile 1
Spalte 2, Zeile 1
Spalte 1, Zeile 2
Spalte 2, Zeile 2

Der zugehörige Code:


{| 
| Spalte 1, Zeile 1
| Spalte 2, Zeile 1 
|- 
| Spalte 1, Zeile 2 
| Spalte 2, Zeile 2 
|}

Hierbei sieht man folgendes:

  • Eine Tabelle wird mit "{|" eingeleitet und mit "|}" beendet.
  • Jede Tabellenspalte wird mit "|" begonnen.
  • Jede zusätzliche Zeile benötigt ein "|-", die erste muss nicht geöffnet werden.
  • Die Inhalte der Zellen stehen direkt nach dem Beginn der Spalten.

Rahmen

Im obrigen Beispiel wurde ein Rahmen verwendet (aber nicht im Quelltext gezeigt), damit die Tabelle sichtbarer wird.
Das geschieht über die Eigenschaft "border", welche in die Zeile geschrieben wird, in der auch die Tabelle eröffnet wird (damit ist die border-Eigenschaft für die ganze Tabelle gültig). Hierbei bedeutet der Wert "1" einen Rand von 1 Pixel. Demnach sind 0 Pixel gleichbedeutend mit keinem Rand.

Spalte 1, Zeile 1
Spalte 2, Zeile 1
Spalte 1, Zeile 2
Spalte 2, Zeile 2

Der zugehörige Code:


{| border="1"
| Spalte 1, Zeile 1
| Spalte 2, Zeile 1 
|- 
| Spalte 1, Zeile 2 
| Spalte 2, Zeile 2 
|}

Analog ist die Verwendung von:

  • cellspacing="5" -> 5 Pixel Rand zwischen den Zellen
  • cellpadding="5" -> 5 Pixel Rand zwischen Zellrand und Inhalt

Diese Angaben sind entsprechend hintereinander schreibbar:

Spalte 1, Zeile 1
Spalte 2, Zeile 1
Spalte 1, Zeile 2
Spalte 2, Zeile 2

Der zugehörige Code:


{| border="1" cellspacing="5" cellpadding="5"
| Spalte 1, Zeile 1
| Spalte 2, Zeile 1 
|- 
| Spalte 1, Zeile 2 
| Spalte 2, Zeile 2 
|}

Titelzeilen

Titelzeilen beginnen nicht mit "|" sondern mit "!" - ansonsten verhalten sie sich wie normale Zellen.

Überschrift 1
Überschrift 2
Spalte 1, Zeile 1
Spalte 2, Zeile 1
Spalte 1, Zeile 2
Spalte 2, Zeile 2

Der zugehörige Code:


{| border="1"
! Überschrift 1
! Überschrift 2
|-
| Spalte 1, Zeile 1
| Spalte 2, Zeile 1 
|- 
| Spalte 1, Zeile 2 
| Spalte 2, Zeile 2 
|}

Größenangaben - Breite

Man kann natürlich auch auf die Größe der Spalten Einfluss nehmen. Hierzu definiert man je nachdem, welche Größe man anpassen will folgendermassen:

Ganze Tabelle

Das folgende Beispiel erhöht die Breite ("width") einer Tabelle auf 100% - also der maximalen Größe die sie im Layout haben sollte um fehlerfrei dargestellt zu werden.
Man kann da auch statt der Prozentangaben Zahlenwerte mit der Endung px nutzen - diese geben dann die Breite in Pixeln an.

Überschrift 1
Überschrift 2
Spalte 1, Zeile 1
Spalte 2, Zeile 1
Spalte 1, Zeile 2
Spalte 2, Zeile 2

Der zugehörige Code:


{| border="1" style="width:100%;"
! Überschrift 1
! Überschrift 2
|-
| Spalte 1, Zeile 1
| Spalte 2, Zeile 1 
|- 
| Spalte 1, Zeile 2 
| Spalte 2, Zeile 2 
|}

Spalten

Für Spalten verläuft das Ganze anders. Hier gebt ihr die Breite in die Zelle, die ihr verändern wollt. Dies geschieht indem ihr statt der üblichen Einleitung "|" die Zeile ändert zu: "| style="width:angabe" | ". Die "angabe" ist hierbei immer eine Zahl mit Prozentzeichen oder mit der Endung px = Breite in Pixel.
Hierbei erkennt Ihr, dass Zellenoptionen immer in der Zelle definiert werden - aber eben gerade in einem Zwischenraum vor dem Text.

Beachtet, dass alle Zellen einer Spalte auf die Breite der größten Zeile ausgedehnt werden - also ist die Angabe unterschiedlicher Breiten innerhalb der Zellen einer Spalte nicht möglich.
Daher ist die Angabe der Breite einer Zelle auch nur 1x nötig.

Überschrift 1
Überschrift 2
Spalte 1, Zeile 1
Spalte 2, Zeile 1
Spalte 1, Zeile 2
Spalte 2, Zeile 2

Der zugehörige Code:


{| border="1"
! Überschrift 1
! Überschrift 2
|-
| style="width:150px;" | Spalte 1, Zeile 1
| style="width:250px;" | Spalte 2, Zeile 1 
|- 
| Spalte 1, Zeile 2 
| Spalte 2, Zeile 2 
|}

Hierbei sind auch Prozentangaben möglich - diese Beziehen sich aber auf die maximale Breite der Tabelle, welche im Kopf definiert wurde. Daher kann man entsprechend zuerst im Kopf eine Breite definieren und diese dann in den Tabellenzeilen verteilen.

Größenangaben - Höhe

Höhenangaben sind identisch zu den Breitenangaben. Hierbei nutzt ihr nur statt "width" den Wert "height".
Ihr könnt bei dem Attribut "style" mehrere Werte nutzen - es sind also Kombinationen mit width, height usw. möglich - die Abtrennung findet eben mit dem Sekikolon statt.

Ausrichtung

Den Inhalt der Zellen kann man natürlich auch ausrichten.

Horizontal

Für eine horizontale Ausrichtung nutzt man am einfachsten das Attribut "style", welches Ihr ja aus dem vorherigen Beispiel kennt. Für die Ausrichtung bietet es die folgenden Werte an:

  • style="text-align:left;" -> Links
  • style="text-align:center;" -> Zentriert
  • style="text-align:right;" -> Rechts
Überschrift 1
Überschrift 2
Spalte 1, Zeile 1
Spalte 2, Zeile 1
Spalte 1, Zeile 2
Spalte 2, Zeile 2

Der zugehörige Code:


{| border="1"
! style="text-align:center;" | Überschrift 1
! style="text-align:left;" | Überschrift 2
|-
| style="width:150px; text-align:center;" | Spalte 1, Zeile 1
| style="width:250px; text-align:right;" | Spalte 2, Zeile 1 
|- 
| style="text-align:right;" | Spalte 1, Zeile 2 
| style="text-align:left;" | Spalte 2, Zeile 2 
|}

Vertikal

Für eine vertikale Ausrichtung nutzt man am einfachsten "vertical-align" als style-Wert. Dieses bietet die folgenden Unterwerte:

  • style="vertical-align:top;" -> Oben
  • style="vertical-align:middle;" -> Zentriert
  • style="vertical-align:bottom;" -> Unten

Die Anwendung ist identisch zu der mit text-align.

Sie ist weiterhin hintereinander ausführbar - also es ist möglich einen Text vertikal nach oben zu setzen und horizontal zu zentrieren:


style="text-align:right; vertical-align:top;"

Farben

Man kann weiterhin einzelne Zellen oder eine ganze Tabelle mit beliebigen Farben verändern.

Hintergrundfarben

Hintergrundfarben sind am einfachsten mittels der style-Eigenschaft "background" zu setzen. Hierbei existieren viele Werte, einige hier als Beispiel:

  • style="background:red;" - Rot
  • style="background:blue;" - Blau

Weiterhin sind sog. Hex-Werte möglich mit denen viel feinere Abstimmungen machbar sind:

  • style="background:#FF0000;" - Rot
  • style="background:"#0000FF;" - Blau

Weitere Werte:  http://de.selfhtml.org/helferlein/farben.htm

Überschrift 1
Überschrift 2
Spalte 1, Zeile 1
Spalte 2, Zeile 1
Spalte 1, Zeile 2
Spalte 2, Zeile 2

Der zugehörige Code:


{| border="1"
! style="background:#FF0000;" | Überschrift 1
! style="background:#0000FF;" | Überschrift 2
|-
| Spalte 1, Zeile 1
| Spalte 2, Zeile 1 
|- 
| Spalte 1, Zeile 2 
| Spalte 2, Zeile 2 
|}

Es ist natürlich auch möglich, dass Ganze für die gesamte Tabelle zu definieren:

Überschrift 1
Überschrift 2
Spalte 1, Zeile 1
Spalte 2, Zeile 1
Spalte 1, Zeile 2
Spalte 2, Zeile 2

Der zugehörige Code:


{| border="1" style="background:#0000FF;"
! Überschrift 1
! Überschrift 2
|-
| Spalte 1, Zeile 1
| Spalte 2, Zeile 1 
|- 
| Spalte 1, Zeile 2 
| Spalte 2, Zeile 2 
|}

Textfarben

Das Ganze verläuft analog für Textfarben - hier ist nur statt "background" der Wert "color" anzugeben.
Hierzu ein kurzes Beispiel:

Überschrift 1
Überschrift 2
Spalte 1, Zeile 1
Spalte 2, Zeile 1
Spalte 1, Zeile 2
Spalte 2, Zeile 2

Der zugehörige Code:


{| border="1"
! Überschrift 1
! Überschrift 2
|-
| style="color:#FF0000;" | Spalte 1, Zeile 1
| style="color:#0000FF;" | Spalte 2, Zeile 1 
|- 
| Spalte 1, Zeile 2 
| Spalte 2, Zeile 2
|}

Das ist ebenso auch global verwendbar:

Überschrift 1
Überschrift 2
Spalte 1, Zeile 1
Spalte 2, Zeile 1
Spalte 1, Zeile 2
Spalte 2, Zeile 2

Der zugehörige Code:


{| border="1" style="color:#0000FF;"
! Überschrift 1
! Überschrift 2
|-
| Spalte 1, Zeile 1
| Spalte 2, Zeile 1 
|- 
| Spalte 1, Zeile 2 
| Spalte 2, Zeile 2
|}

Verbinden von Zellen

Es ist möglich innerhalb einer Tabelle beliebig Zellen miteinander zu verbinden. Dies kann über eine Zeile oder eine Spalte hin gemacht werden.

Horizontal

Über das Attribut "colspan" lassen sich Zellen horizontal miteinander verbinden.
Hierbei gebt ihr die Zahl der Zellen, die ihr verbinden wollt als Wert an. Beachtet, dass ihr deswegen diese Zellen nicht mehr mit "|" einleiten dürft - weil ja keine Zellen mehr da ist, wenn sie verbunden sind.

Überschrift 1
Überschrift 2
Spalte 1, Zeile 1
Spalte 2, Zeile 1
Spalte 1 und 2, Zeile 2

Der zugehörige Code:


{| border="1"
! Überschrift 1
! Überschrift 2
|-
| style="width:150px;" | Spalte 1, Zeile 1
| style="width:250px;" | Spalte 2, Zeile 1 
|- 
| colspan="2" | Spalte 1 und 2, Zeile 2
|}

Vertikal

Über das Attribut "rowspan" lassen sich Zellen vertikal miteinander verbinden.
Hierbei gebt ihr die Zahl der Zellen, die ihr verbinden wollt als Wert an. Beachtet, dass ihr deswegen diese Zellen nicht mehr mit "|" einleiten dürft - weil ja keine Zellen mehr da ist, wenn sie verbunden sind.

Überschrift 1
Überschrift 2
Spalte 1, Zeile 1
Spalte 2, Zeile 1
Spalte 1, Zeile 2
Spalte 2, Zeile 2 und 3
Spalte 1, Zeile 2

Der zugehörige Code:


{| border="1"
! Überschrift 1
! Überschrift 2
|-
| style="width:150px;" | Spalte 1, Zeile 1
| style="width:250px;" | Spalte 2, Zeile 1 
|- 
| Spalte 1, Zeile 2 
| rowspan="2" | Spalte 2, Zeile 2 und 3
|- 
| Spalte 1, Zeile 2 
|}

Verschachtelte Tabellen

Die Verwendung von verschachtelten Tabellen - also Tabellen innerhalb von Tabellen ist ebenso möglich. Hier beginnt ihr in einer Zelle einfach eine neue Zeile und schreibt eine neue Tabellendefinition.

Überschrift 1
Überschrift 2
Spalte 1, Zeile 1
Spalte 2, Zeile 1

Unterzelle 1
Unterzelle 2

Spalte 2, Zeile 2

Der zugehörige Code:


{| border="1"
! Überschrift 1
! Überschrift 2
|-
| style="width:150px;" | Spalte 1, Zeile 1
| style="width:250px;" | Spalte 2, Zeile 1 
|- 
| 
{| border="2" style="width:100%"
| Unterzelle 1
|-
| Unterzelle 2
|}
| Spalte 2, Zeile 2
|}

Komplexes Beispiel

Hier noch ein Beispiel, welches viele Dinge beinhaltet, die oben erklärt werden:

Überschrift 1
Überschrift 2
Spalte 1 und 2, Zeile 1

Unterzelle 1
Unterzelle 2

Spalte 1 und 2, Zeile 2 und 3
Spalte 1, Zeile 3

{| border="1" cellspacing="5" cellpadding="5" style="text-align:center;"
! style="width:150px;" | Überschrift 1
! style="width:250px;" | Überschrift 2
|-
| colspan="2" | Spalte 1 und 2, Zeile 1 
|- 
| 
{| border="2" style="width:100%; text-align:left;"
| Unterzelle 1
|-
| Unterzelle 2
|}
| rowspan="2" colspan="2" | Spalte 1 und 2, Zeile 2 und 3 
|-
| Spalte 1, Zeile 3
|}

Stylische Tabellen

Hier eine Tabelle, wie sie viele User im Gästebuch benutzen:

http://img379.imageshack.us/img379/8994/bild23ft.gif

Überschrift 1

Text 1


http://img478.imageshack.us/img478/4307/bild52va.gif

Und hier der Quelltext:

http://img379.imageshack.us/img379/8994/bild23ft.gif
{| border="0" cellpadding="0" cellspacing="0" 
style="border-collapse:collapse;"
!colspan="0" align=left bgcolor="#C1CFE3" width="9" | 
!colspan="0" align=right bgcolor="#C1CFE3" width="472" | Überschrift 1
!colspan="0" align=left bgcolor="#C1CFE3" width="9" | 
|- 
| align=left bgcolor="#E7EFF7" | || align=left bgcolor="#E7EFF7" |

Text 1

| align=left bgcolor="#E7EFF7" | || align=left bgcolor="#E7EFF7" |
|}http://img478.imageshack.us/img478/4307/bild52va.gif



Kategorien: Wiki

Version vom 12.10.06, 17:57, letzte Änderung von Manu 2



Wiki:

Oetzi - 09.02.06 - 03:58


inaktiv

Gästebuch 
Zitat:Hmm, wieso nutzt du für alles CSS-Anweisungen? "bgcolor", "width", etc gehen auch.


Das Problem ist, dass:
* bgcolor
* align
* td width

als "deprecated" (missbilligt) im aktuellen HTML-Standard gelten.
"td height" war nie beispielsweise auch nie HTML-Standard (obwohl das de facto jeder Browser konnte).

Sicherlich bleibt die Browser-Unterstützung für die "alten" Tags vorhanden - aber so gewöhnen sich gleich mal die Leute an die neuen CSS-Eigenschaften (die im übrigen ja auch mächtiger sind).
 Groove - 09.02.06 - 02:31


Admin



Gästebuch 
Hmm, wieso nutzt du für alles CSS-Anweisungen? "bgcolor", "width", etc gehen auch.