Tabellen

temo

[SIZE="6"][COLOR="Red"]Tabellen[/COLOR][/SIZE]

[FELD="<Table>-Tag"][COLOR="DarkOrchid"]<table>erzeugt eine Tablle. Alles was zwischend
den zwei Tags steht gehört zur Tabelle.[/COLOR]

Code

<table>
<tr>
<td>Das ist der Inhalt der Zelle</td>
</tr>

[/FELD]
[FELD="Zeilen,Spalten,Kopfzeilen"][COLOR="DarkOrchid"][COLOR="Yellow"]<tr> sind die Tabellen Zeilen und <td> teilt
die tablle dann in Zellen ein. Alles was
zwischen den <td>Tags steht wird in der Tabellenzelle erscheinen.</td>

Um eine tabellen Kopfzeile zu machen verwendet man <th></th>.
Diese müssen wie die <td> tags zwischen den <tr> Tags stehen.[/COLOR][/COLOR]

Code

<table>
<tr>
<th>Das ist der Inhalt der Kopfzeile.</th>
</tr>

[/FELD]

[FELD="Tabellen Rahmen, <br/>-Tag,Nowrap"][COLOR="DarkOrchid"]Wenn ihr dies austestet wundert ihr euch sicherlich das man bei der tabelle
garkeine Striche zu sehen sind. Dies kann man ganz einfach beheben.[/COLOR]

Code

<table border="Hier beliebige Zahl eingeben jeh nach gewünschter dicke des Tabllen Rahmens">
<tr>
 <th>Kopfzeile 1<br/> Zeilenumbruch1</th>
 <th>Kopfzeile 2<br/> Zeilenumbruch2</th>
</tr>
<tr>
 <th nowrap="nowrap">Zelle 1 Zeilenumbruch3</th>
 <th nowrap="nowrap">Zelle 2 Zeilenumbruch4</th>
</tr>

[COLOR="Lime"]Das <br/> tag sorgt für einen Zeilenumbruch
denn man auch außerhalb von Tabellen verwenden kann.
Man kann zwar auch <br> Verwenden aber empfehlenswert
ist es die andere Variante zu wählen da nur sie in
XHTML funktioniert. Nowrap verhindert einen automatischen
Zeilensprung.[/COLOR]
[/FELD]

[FELD="Tabellen Rahmen anpassen"][COLOR="DeepSkyBlue"]
Du willst z.B. nur den Rahmen der Tabelle oben sehen?
Kein problem.[/COLOR]

Code

<table border="1" frame="above">
<tr>
 <th>Kopfzeile 1<br/> Zeilenumbruch1</th>
 <th>Kopfzeile 2<br/> Zeilenumbruch2</th>
</tr>
<tr>
 <th>Zelle 1<br/> Zeilenumbruch3</th>
 <th>Zelle 2<br/> Zeilenumbruch4</th>
</tr>

[COLOR="Purple"]Durch das frame="above" ist nur der obere Rahmen der Tabelle sichtbar.
Statt "above"kann man auch andere verwenden Um z.B. nur den untern Rahmen sichtbar zu machen.

above = oberer Rahmen
void = Keine Ausenrahmen
below = unter Rahmen
hsides= oberer und unterer Rahmen
vsides= linker und rechter Rahmen
lhs = linker Rahmen
rhs = rechter Rahmen[/COLOR]
[/FELD]
[FELD="Tabellen Inhalt formatieren"][COLOR="DarkOrange"]Um den Abstand zwischen dem Tabellennrahmen und dem Zelleninhalt zu ändern
verwendet man cellpadding= "Zahl".

Um die Abstände zwischen den Tabellen Rahmen zu verändern verwendet man cellspacing="Zahl".[/COLOR]

Code

<table border="1" cellpadding="Zahl" cellspacing="Zahl">
<tr>
 <th>Kopfzeile 1<br/> Zeilenumbruch1</th>
 <th>Kopfzeile 2<br/> Zeilenumbruch2</th>
</tr>
<tr>
 <th>Zelle 1<br/> Zeilenumbruch3</th>
 <th>Zelle 2<br/> Zeilenumbruch4</th>
</tr>

[/FELD]
[FELD="Breite,Höhe der Tabelle ändern"][COLOR="Red"]Breite der Tabelle änden.
width ist die Breite der Tabelle und hight die Höhe.
Man kann die Breite der Tabelle z.B. in Pixel angeben.[/COLOR]

Code

<table border="5" width="Prozentzahl oder nur Zahl" hight="Prozentzahl oder nur Zahl" >
<tr>
 <th>Kopfzeile 1<br/> Zeilenumbruch1</th>
 <th>Kopfzeile 2<br/> Zeilenumbruch2</th>
</tr>
<tr>
 <th>Zelle 1<br/> Zeilenumbruch3</th>
 <th>Zelle 2<br/> Zeilenumbruch4</th>
</tr>

[/FELD]

[FELD="Ausrichtung des Inhalts der Zellen"][COLOR="Blue"]Um den Zelleninhalt rechtsbündig ... auszurichten verwendet an align.

Horizontale Ausrichtung. (Wagerecht)[/COLOR]

Code

<table border="5" width="Prozentzahl oder nur Zahl" hight="Prozentzahl oder nur Zahl" >
<tr>
 <th align="center|right|left">Kopfzeile 1<br/> Zeilenumbruch1</th>
 <th align="center|right|left">Kopfzeile 2<br/> Zeilenumbruch2</th>
</tr>
<tr>
 <th align="center|right|left">Zelle 1<br/> Zeilenumbruch3</th>
 <th align="center|right|left">Zelle 2<br/> Zeilenumbruch4</th>
</tr>

[COLOR="Olive"]Vertikale Ausrichtung.(Senkrecht)[/COLOR]

Code

<table border="5" width="Prozentzahl oder nur Zahl" hight="Prozentzahl oder nur Zahl" >
<tr>
 <th valign="bottom|top|middle">Kopfzeile 1<br/> Zeilenumbruch1</th>
 <th valign="bottom|top|middle">Kopfzeile 2<br/> Zeilenumbruch2</th>
</tr>
<tr>
 <th valign="bottom|top|middle">Zelle 1<br/> Zeilenumbruch3</th>
 <th valign="bottom|top|middle">Zelle 2<br/> Zeilenumbruch4</th>
</tr>

[/FELD]

[FELD="Hintergrundfarbe,Bilder"][COLOR="DarkOrange"]Hintergundfarbe/bilder[/COLOR]

[COLOR="DarkOrange"]Für hintergrundfarben verwendet man bgcolor.
Man kann damit die ganze tabelle oder einzellnde Zeilen oder Zellen definieren.[/COLOR]

Code

<table border="5" bgcolor="Farbcode">
<tr bgcolor="Farbcode">
 <th bgcolor="Farbcode">Kopfzeile 1<br/> Zeilenumbruch1</th>
 <th valign="bottom|top|middle">Kopfzeile 2<br/> Zeilenumbruch2</th>
</tr>
<tr>
 <th valign="bottom|top|middle">Zelle 1<br/> Zeilenumbruch3</th>
 <th valign="bottom|top|middle">Zelle 2<br/> Zeilenumbruch4</th>
</tr>

[COLOR="Indigo"]Hintergrund Bild[/COLOR]

Code

<table border="5" background="test.jpg">
<tr bgcolor="Farbcode">
 <th bgcolor="Farbcode">Kopfzeile 1<br/> Zeilenumbruch1</th>
 <th valign="bottom|top|middle">Kopfzeile 2<br/> Zeilenumbruch2</th>
</tr>
<tr>
 <th valign="bottom|top|middle">Zelle 1<br/> Zeilenumbruch3</th>
 <th valign="bottom|top|middle">Zelle 2<br/> Zeilenumbruch4</th>
</tr>

[/FELD]

[FELD="Tabellen Zusammenfassung"][COLOR="Navy"]Tabellen Überschriften

Man verwendet dafür <caption>.
Mit align kann man wieder ausrichten wo die Überschrift stehen soll.[/COLOR]

Code

<table border="5" bgcolor="Farbcode">
<caption align="center|right|left">Eine kleine Überschrift.</caption>
<tr bgcolor="Farbcode">
 <th bgcolor="Farbcode">Kopfzeile 1<br/> Zeilenumbruch1</th>
 <th valign="bottom|top|middle">Kopfzeile 2<br/> Zeilenumbruch2</th>
</tr>
<tr>
 <th valign="bottom|top|middle">Zelle 1<br/> Zeilenumbruch3</th>
 <th valign="bottom|top|middle">Zelle 2<br/> Zeilenumbruch4</th>
</tr>

[COLOR="Sienna"]Wenn man eine Kurze Zusammenfassung der Tabelle erstellen möchte Verwendet man das
Attribut "summary" und "abbr". Abbr ist für eine Zusammenfassung von Zellen/Zeilen.
Wenn man auf die Tabelle rechts klickt(im Browser) und auf eigenschaften geht kann
man die Zusammenfassung lesen. Dies ist besonders Vorteilhaft bei großen Tabellen.[/COLOR]

Code

<table border="5" summary="Zusammenfassung">
<caption align="center|right|left">Eine kleine Überschrift.</caption>
<tr abbr="Zusammenfassung" >
 <th >Kopfzeile 1<br/> Zeilenumbruch1</th>
 <th valign="bottom|top|middle">Kopfzeile 2<br/> Zeilenumbruch2</th>
</tr>
<tr>
 <th >Zelle 1<br/> Zeilenumbruch3</th>
 <th >Zelle 2<br/> Zeilenumbruch4</th>
</tr>

[/FELD]

[FELD="Colspan/Rowspan"]colspan/rowspan

Zitat von Tsakuya;18237

[COLOR="Red"]Colspan:
Ist das überspringen/zusammenfassen von Spalten mit einer Einzelnen Reihe.
Rowspan:
Das überspringen/zusammenfassen von Reihen in einer einzelnen Spalte[/COLOR]

[COLOR="Olive"]Sry ganz genau weiß ich nicht was ses bewirkt. Hier mal einpaar Bilder was passiert.[/COLOR]

[COLOR="Red"]ohne row/colspan[/COLOR]

Code

<TABLE BORDER=2 CELLPADDING=4>
<TR> <TH>GL</TH> </TR>
<TR> <TD >Godlikerz1</TD>      <TD>Godlikerz7</TD> </TR>
<TR> <TD >Godlikerz2</TD>     <TD>Godlikerz8</TD> </TR>
<TR> <TD >Godlikerz3</TD>      <TD>Godlikerz9</TD> </TR>
<TR> <TH>Godlikerz1</TH> </TR>
<TR> <TD >Godlikerz4</TD>      <TD>Godlikerz10</TD> </TR>
<TR> <TD >Godlikerz5</TD>       <TD>Godlikerz11</TD> </TR>
<TR> <TD >Godlikerz6</TD>       <TD>Godlikerz12</TD> </TR>
</TABLE>

[COLOR="Red"]mit rowspan[/COLOR]

code

Code

<TABLE BORDER=2 CELLPADDING=4>
<TR> <TH colspan="2"  >GL</TH> </TR>
<TR> <TD >Godlikerz1</TD>      <TD>Godlikerz7</TD> </TR>
<TR> <TD >Godlikerz2</TD>     <TD>Godlikerz8</TD> </TR>
<TR> <TD >Godlikerz3</TD>      <TD>Godlikerz9</TD> </TR>
<TR> <TH colspan="2" >Godlikerz1</TH> </TR>
<TR> <TD >Godlikerz4</TD>      <TD>Godlikerz10</TD> </TR>
<TR> <TD >Godlikerz5</TD>       <TD>Godlikerz11</TD> </TR>
<TR> <TD >Godlikerz6</TD>       <TD>Godlikerz12</TD> </TR>
</TABLE>

[COLOR="Red"]mit colspan[/COLOR]

code

<TABLE BORDER=2 CELLPADDING=4>
<TR> <TH rowspan="2" >GL</TH> </TR>
<TR> <TD >Godlikerz1</TD> <TD>Godlikerz7</TD> </TR>
<TR> <TD >Godlikerz2</TD> <TD>Godlikerz8</TD> </TR>
<TR> <TD >Godlikerz3</TD> <TD>Godlikerz9</TD> </TR>
<TR> <TH rowspan="2" >Godlikerz1</TH> </TR>
<TR> <TD >Godlikerz4</TD> <TD>Godlikerz10</TD> </TR>
<TR> <TD >Godlikerz5</TD> <TD>Godlikerz11</TD> </TR>
<TR> <TD >Godlikerz6</TD> <TD>Godlikerz12</TD> </TR>
</TABLE>

[/FELD]

[COLOR="PaleGreen"]Wenn euch mein Guide gefallen hat drückt doch pls auf den thanks Button.[/COLOR]

[COLOR="RoyalBlue"]Mfg Temo[/COLOR]

Tsakuya

Würde noch die Befehle Row/Colspan ergänzen, ansonsten guter Guide.

Colspan:

Ist das überspringen/zusammenfassen von Spalten mit einer Einzelnen Reihe

Zitat

Feldaufteilung:
1 1
2|3

Rowspan:

Das überspringen/zusammenfassen von Reihen in einer einzelnen Spalte

Zitat

Feldaufteilung:
1|2
1|3

Glaube so war's richtig.
Denke das wäre noch erwähnenswert.

Mfg,
Tsakuya

temo

Habs hinzugefügt ;-)
Danke für deinen Hinweis.

Tsakuya

Rowspan ist leider noch nicht so ganz richtig:

HTML

<html>
<body>
<table border="1">
  <tr>
    <th rowspan="2">Godlikerz</th>
    <td>Reihe 1.1</td>
  </tr>
  <tr>
    <td>Reihe 1.2</td>
  </tr>
  <tr>
    <th rowspan="2">Godlikerz</th>
    <td>Reihe 2.1</td>
  </tr>
  <tr>
    <td>Reihe 2.2</td>
  </tr>
</table>
</body>
</html>

Alles anzeigen

Ergibt dann folgendes:

temo

[COLOR="Yellow"]B[/COLOR]ring
[COLOR="Yellow"]U[/COLOR]p
[COLOR="Yellow"]M[/COLOR]y
[COLOR="Yellow"]P[/COLOR]ost

Da können noch mehr posts. :<

Airdevil

ich find den guide ganz nett :D
hab mich entlich wieder erinnert, wie es nochma geht ordentliche tabbel zu erstellen xD

xDrago

Ich weiss auch wie tabellen gehen aber hab ise noch nieeee gebraucht, Guter Guide ;)

Tabellen

Jetzt mitmachen!

SCHNELLZUGRIFF

HILFE & COMMUNITY

RECHTLICHES