Aktuelle Zeit: 26. Sep 2017, 09:26

Alle Zeiten sind UTC + 1 Stunde [ Sommerzeit ]




Forum gesperrt Dieses Thema ist gesperrt. Du kannst keine Beiträge editieren oder weitere Antworten erstellen.  [ 4 Beiträge ] 
AutorNachricht
 Betreff des Beitrags: [Forum] Wie erstelle ich eine Tabelle?
Ungelesener BeitragVerfasst: 28. Dez 2010, 14:14 
Offline
Forenfee
Benutzeravatar

Registriert: 09.2010
Beiträge: 105
Geschlecht: weiblich
Da viele nicht wissen, wie sie in unserem Forum eine Tabelle erstellen können, werde ich mir nun hier die Zeit nehmen, euch die grundlegendsten Dinge dazu zu erklären.
Ich hoffe es ist für alle verständlich.

Inhalt:

1. Aufbau einer 08/15 Tabelle

2. Einbinden einer Tabelle

3. Formatierung einer Tabelle

A) Grundlegendes
B) Schriftfarbe
C) Schrift
D) Textausrichtung
E) Rahmen
F) Hintergrund
G) Breite
H) Höhe




Anmerkung: Irgendwie ist es mehr geworden als ich dachte xD'

_________________
Bild


Nach oben
 Profil Private Nachricht senden  
 
 Betreff des Beitrags: Re: [Forum] Wie erstelle ich eine Tabelle?
Ungelesener BeitragVerfasst: 28. Dez 2010, 18:07 
Offline
Forenfee
Benutzeravatar

Registriert: 09.2010
Beiträge: 105
Geschlecht: weiblich
Der grundlegende Aufbau einer 08/15 Tabelle

Mit weißem Rahmen zur besseren Ansicht:
Reihe 1 / Zelle 1Reihe 1 / Zelle 2Reihe 1 / Zelle 3
Reihe 2 / Zelle 1Reihe 2 / Zelle 2Reihe 2 / Zelle 3
Reihe 3 / Zelle 1Reihe 3 / Zelle 2Reihe 3 / Zelle 3

Normale Ansicht:
Reihe 1 / Zelle 1Reihe 1 / Zelle 2Reihe 1 / Zelle 3
Reihe 2 / Zelle 1Reihe 2 / Zelle 2Reihe 2 / Zelle 3
Reihe 3 / Zelle 1Reihe 3 / Zelle 2Reihe 3 / Zelle 3

Code:
[table=]
[tr=][td=]Reihe 1 / Zelle 1[/td][td=]Reihe 1 / Zelle 2[/td][td=]Reihe 1 / Zelle 3[/td][/tr]
[tr=][td=]Reihe 2 / Zelle 1[/td][td=]Reihe 2 / Zelle 2[/td][td=]Reihe 2 / Zelle 3[/td][/tr]
[tr=][td=]Reihe 3 / Zelle 1[/td][td=]Reihe 3 / Zelle 2[/td][td=]Reihe 3 / Zelle 3[/td][/tr]
[/table]


Wie ihr seht, besteht eine Tabelle aus Reihen [tr]. Innerhalb jeder Reihe befinden sich die Zellen [td]. Diese sind eingeschlossen zwischen den [table]-Tags.
Ein Tag (sprich täg) kommt immer als Paar, Anfangs- und Endtag. Sie werden verschachtelt und dürfen sich nicht kreuzen. (Genauso wie auch die Textformatierungen Fett , kursiv , Schriftfarbe usw.)

Funktioniert: [Tag 1] [Tag 2] [/Tag 2] [/Tag 1]
Funktioniert nicht: [Tag 1] [Tag 2] [/Tag 1] [/Tag 2]

Deshalb ist es wichtig, diese Verschachtelung immer einzuhalten, allerdings ist es auch möglich in einem Tag mehrere Tags nebeneinander zu setzen:

Beispiel: [Tag 1] [Tag 2] [/Tag 2] [Tag 3] [/Tag 3] [/Tag 1]


Die ' = ' Zeichen in den Anfangstag sind später zur Formatierung der Tabelle da, welche ich an einer späteren Stelle mit verschiedenen Beispielen erklären werde.
Zur besseren Ansicht habe ich zu Anfang nur um jede Zelle einen weißen Rahmen gelegt, da ansonsten die Zellen weniger Einsichtig sind.

Die Zellen und Reihe dehnen sich aus, je nachdem wie breit der Text in den Zellen ist. Wie man dies verändern kann, erkläre ich auch an einer späteren Stelle.


Zur besseren Übersicht kann man sich den Code auch ein wenig anders hinformatieren (per Hand! zwar ein wenig mehr Aufwand aber bei größeren Tabellen durchaus sinnvoll)
Meine persönliche angenehmere Formatierung : (mit Leerzeichen und Absätzen)
Code:
[table=]
[tr=]
   [td=]Reihe 1 / Zelle 1[/td]
   [td=]Reihe 1 / Zelle 2[/td]
   [td=]Reihe 1 / Zelle 3[/td]
[/tr]
[tr=]
   [td=]Reihe 2 / Zelle 1[/td]
   [td=]Reihe 2 / Zelle 2[/td]
   [td=]Reihe 2 / Zelle 3[/td]
[/tr]
[tr=]
   [td=]Reihe 3 / Zelle 1[/td]
   [td=]Reihe 3 / Zelle 2[/td]
   [td=]Reihe 3 / Zelle 3[/td]
[/tr]
[/table]


Desweiteren kann neben einer Tabelle kein weiterer Text stehen, sondern nur darunter, darüber oder halt in der Tabelle.

_________________
Bild


Nach oben
 Profil Private Nachricht senden  
 
 Betreff des Beitrags: Re: [Forum] Wie erstelle ich eine Tabelle?
Ungelesener BeitragVerfasst: 28. Dez 2010, 18:07 
Offline
Forenfee
Benutzeravatar

Registriert: 09.2010
Beiträge: 105
Geschlecht: weiblich
Einbindung einer Tabelle

In unserem Forum findet ihr bei den ganzen Formatierungen das Zeichen für Tabelle Bild, wenn ihr darauf klickt öffnet sich ein extra Fenster: Tabelle einfügen

Bild

Wie ihr seht, wird da schon nachgefragt wie die Tabelle formatiert werden soll. Dies ist besonders sehr nützlich, wenn für jede Reihe oder Zelle die gleiche oder zumindest änhliche Formatierung erfolgen soll. Ansonsten kann man auch später per Hand alles selber eintragen.

Zunächst aber tragen wir nur die Anzahl der Reihen und der Zellen ein. Wenn wir z.B. Reihen 4 und Zellen 3 eintragen, dann kriegen wir eine Tabelle wie folgt dargestellt:


Code:
[table=]
[tr=][td=][/td][td=][/td][td=][/td][/tr]
[tr=][td=][/td][td=][/td][td=][/td][/tr]
[tr=][td=][/td][td=][/td][td=][/td][/tr]
[tr=][td=][/td][td=][/td][td=][/td][/tr]
[/table]


In diese können nun die Werte eingetragen werden. Aber dabei ist stets zu bedenken, dass es nach Reihe geht, wenn also es nach Spalten gehen soll muss immer in die richtige Zelle eingetragen werden.

z.B.
Reihe 1 Zelle 3
Reihe 2 Zelle 3
Reihe 3 Zelle 3
usw.

Wenn man später feststellt, dass man zu wenig oder zu viel Reihen bzw. Zellen hat, können per Hand natürlich welche eingefügt oder entfernt werden. Dabei ist aber zu bedenken, dass in jeder Reihe immer die gleiche Anzahl von Zellen sich befinden müssen.

Für alle fortgeschrittenen HTMLer und CSSler, Zellen zu verbinden ist nicht möglich.

_________________
Bild


Nach oben
 Profil Private Nachricht senden  
 
 Betreff des Beitrags: Re: [Forum] Wie erstelle ich eine Tabelle?
Ungelesener BeitragVerfasst: 28. Dez 2010, 18:08 
Offline
Forenfee
Benutzeravatar

Registriert: 09.2010
Beiträge: 105
Geschlecht: weiblich
Formatierung einer Tabelle

Die Formatierung der Tabelle erfolgt auf der Grundlage von CSS.

Die Eingabe der Formatierung erfolgt unmittelbar nach dem ' = ' -Zeichen:
Beispiel:
Code:
[td=border:white solid 1px;][/td]

Mit diesem Code hätte ich nun um eine Zelle einen 1 Pixel (px) breiten, durchgehenden (solid), weißen (white) Rahmen (border) gelegt.

Dazu wird zuerst festgelegt worauf sich die Formatierung beziehen soll:
Rahmen : border
Hintergrund : background
Schriftfarbe : color
Schrift : font
Breite : width
Höhe : height
Textausrichtung : text-align

Danach erfolgt ein ' : ' (Doppelpunkt) und die Formatierung dafür beginnt.
Nach jedem Abschluß der Festlegung für eine Formatierung (z.B. Rahmen, Hintergrund oder Schrift) erfolgt das Trennzeichen ' ; ' (Semikolon) und für einen neuen Bereich kann die Formatierung beginnen.

Beispiel:
Code:
[td=background:#ffff80; border:white solid 1px;][/td]


Die Auswirkungen beziehen sich immer auf den Bereich, auf denen sie zugeteilt worden sind. Also wenn es für die Tabelle angegeben ist bezieht es sich auf die ganze Tabelle (Außnahme border : ein Rahmen drumrum), wenn für Reihe, dann nur für die ganze Reihe und wenn Zelle dann ganz allein nur für diese eine Zelle.

Zudem überschreibt die Reihe die Tabelle (für ihren Bereich) und die Zelle die Reihe und die Tabelle.
Beispiel:
Reihe 1 / Zelle 1 Reihe 1 / Zelle 2 Reihe 1 / Zelle 3
Reihe 2 / Zelle 1 Reihe 2 / Zelle 2 Reihe 2 / Zelle 3
Reihe 3 / Zelle 1 Reihe 3 / Zelle 2 Reihe 3 / Zelle 3
Reihe 4 / Zelle 1 Reihe 4 / Zelle 2 Reihe 4 / Zelle 3

Code:
[table=background:cadetblue; color:black;]
[tr=;]
   [td=]Reihe 1 / Zelle 1[/td]
   [td=]Reihe 1 / Zelle 2[/td]
   [td=]Reihe 1 / Zelle 3[/td]
[/tr]
[tr=background:darkslateblue;]
   [td=background:darkkhaki;]Reihe 2 / Zelle 1[/td]
   [td=]Reihe 2 / Zelle 2[/td]
   [td=]Reihe 2 / Zelle 3[/td]
[/tr]
[tr=]
   [td=]Reihe 3 / Zelle 1[/td]
   [td=]Reihe 3 / Zelle 2[/td]
   [td=]Reihe 3 / Zelle 3[/td]
[/tr]
[tr=background:darkslateblue;]
   [td=]Reihe 4 / Zelle 1[/td]
   [td=]Reihe 4 / Zelle 2[/td]
   [td=]Reihe 4 / Zelle 3[/td]
[/tr][/table]


Schriftfarbe: color

Für die Festlegung der Schriftfarbe gibt es auch wie bei der normalen Formatierung verschiedene Möglichkeiten. Jeder kann die für sich angenehmste Weise nehmen.
Die Farbdefinierung gilt auch für die anderen Formatierungsbereiche (Ausnahme ' font ').

1. Hexadezimal (wie im Forum die Textformatierung)

Aus dem Forum (unter Schriftfarbe) können Schriftfarben genommen werden oder aus einem Bildprogramm (z.B. Photoshop), welcher einem auch Hexadezimalwerte gibt.
Dazu wird nach ' color: ' einfach nur ' # ' (Raute) und dann die entsprechende Hexadezimalzahl eingetragen, immer gefolgt vom ' ; ' (Semikolon).
Beispiel:
Code:
[td=color:#FFFF80;][/td]

Damit wäre die gesamte Schrift in dieser Zelle hellgelb.

2. rgb-Angabe

Da dies recht selten verwendet wird, möchte ich hier nicht größer darauf eingehen und einfach nur ein Beispiel dafür angeben.
Code:
[td=color:rgb(255,255,200);][/td]


3. Farbnamen

Eine Übersicht über die Farbnamen können auf folgender Seite entnommen werden: >>Link<<
Anwendungsbeispiel:
Code:
[td=color:lemonchiffon;][/td]


Schrift: font

Mit Hilfe der Formatierung Font kann die Schriftart, Schriftgröße, das Schriftgewicht und der Schriftstyle formatiert werden.
Reihenfolge ist wie folgt: Schriftstyle Schriftgewicht Schriftgröße Schriftart.

Beispiel:
Code:
[td=font:italic bold 12px Arial;][/td]


1. Schriftstyle

Mit Schriftstyle ist gemeint ob die Schrift kursiv gesetzt werden soll oder nicht.
Wenn ja dann wird dafür italic eingesetzt. Ansonsten wird es weggelassen.

2. Schriftgewicht

Mit Schriftgewicht ist gemeint ob die Schrift fett gesetzt werden soll oder nicht.
Wenn ja dann wird dafür bold eingesetzt. Ansonsten wird es weggelassen.

3. Schriftgröße

Diese Angabe bewirkt wie der Name schon sagt, wie groß die Schrift ist. Die Einheit dafür sind Pixel, abgekürzt ' px '.

4. Schriftart

Hiermit könnt ihr die Schrift verändern. Bitte benutzt dafür nur die Schriften, die in dem Forum implantiert sind. Siehe oben bei - Schriftart -.


Textausrichtung: text-align

Damit könnt ihr angeben ob der Text normal rechtsbündig, linksbündig oder zentriert innerhalb der Zellen ausgerichtet werden soll.

Dafür gibt es folgende Werte:
left = linksbündig (Voreinstellung).
center = zentriert
right = rechtsbündig
justify = als Blocksatz

Beispiel:
linksbündig zentriert rechtsbündig Blocksatz

Code:
[table=width:100%;]
[tr=]
   [td=border:white 1px solid; text-align:left;]linksbündig[/td]
   [td=border:white 1px solid; text-align:center;]zentriert[/td]
   [td=border:white 1px solid; text-align:right;]rechtsbündig[/td]
   [td=border:white 1px solid; text-align:justify;]Blocksatz[/td]
[/tr]
[/table]


Rahmen: border

Die Reihenfolge für die Rahmenformatierungs ist wie folgt: Farbe, Breite und Rahmentyp.
Beispiel:
Code:
[td=border:#FFFF80 1px solid;][/td]

1. Farbe

Die Farbdefinierung erfolgt wie bei der Schriftfarbe (allerdings erfolgt das Semikolon später nach den anderen Angaben).

2. Breite

Diese Angabe bewirkt wie der Name schon sagt, wie breit der Rahmen ist. Die Einheit dafür sind Pixel, abgekürzt ' px '.

3. Rahmentyp

Es gibt die folgenden Typen:
Bild

Hintergrund: background

Ähnlich wie die Schriftfarbe kann die Hintergrundfarbe geändert werden, nur wird anfangs statt ' color: ' halt ' background: ' geschrieben.

Beispiel:
Code:
[td=background:darkblue;][/td]


Für die Fortgeschrittenen: Hintergrundbilder funktionieren nicht.


Breite: width

Mit Hilfe dieser Angabe könnt ihr ändern wie weit entweder die ganze Tabelle ist oder nur eine Zelle (Spalte). Bei Zelle rechnet sich das natürlich auf die gesamte Tabellenbreite mit rauf. Und bei Tabelle werden die Zellen gleichmäßig gestreckt.

Erfolgen kann diese Angabe entweder in der Einheit Pixel, abgekürzt ' px ' oder auch in Prozenten, wobei dies sich auf die Breite des Postfensters immer bezieht. Also wenn ihr das Browserfenster schmaler zieht, wird auch die Spaltenbreite geringer.

Beispiel:
Zelle 1Zelle 2Zelle 3

Code:
[table=width:100%;]
[tr=][td=border:white 1px solid;]Zelle 1[/td][td=border:white 1px solid; width:50px;]Zelle 2[/td][td=border:white 1px solid;]Zelle 3[/td][/tr]
[/table]


Höhe: height

Mit Hilfe dieser Angabe könnt ihr ändern wie hoch entweder die ganze Tabelle ist oder nur eine Zelle (Spalte). Bei Zelle rechnet sich das natürlich auf die gesamte Tabellenhöhe mit rauf. Und bei Tabelle werden die Zellen gleichmäßig gestreckt.

Diese Angabe erfolgt in der Einheit Pixel, abgekürzt ' px '. Die Schrift wird dabei mittig gesetzt.

Beispiel:
Zelle 1Zelle 2Zelle 3

Code:
[table=height:50px;]
[tr=][td=border:white 1px solid;]Zelle 1[/td][td=border:white 1px solid;]Zelle 2[/td][td=border:white 1px solid;]Zelle 3[/td][/tr]
[/table]

_________________
Bild


Nach oben
 Profil Private Nachricht senden  
 
Beiträge der letzten Zeit anzeigen:  Sortiere nach  
Forum gesperrt Dieses Thema ist gesperrt. Du kannst keine Beiträge editieren oder weitere Antworten erstellen.  [ 4 Beiträge ] 

Alle Zeiten sind UTC + 1 Stunde [ Sommerzeit ]


Du darfst keine neuen Themen in diesem Forum erstellen.
Du darfst keine Antworten zu Themen in diesem Forum erstellen.
Du darfst deine Beiträge in diesem Forum nicht ändern.
Du darfst deine Beiträge in diesem Forum nicht löschen.

cron
© phpBB® Forum Software | phpBB3 Forum von phpBB8.de
» Kontakt & Rechtliches Support / Hilfe Forum Gooof Webdesign Kostenloses Forum Dein Forumo Forum web tracker