Tabellen

    Diese Seite verwendet Cookies. Durch die Nutzung unserer Seite erklären Sie sich damit einverstanden, dass wir Cookies setzen. Weitere Informationen

    • Tabellen

      [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]

      Quellcode

      1. <table>
      2. <tr>
      3. <td>Das ist der Inhalt der Zelle</td>
      4. </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]

      Quellcode

      1. <table>
      2. <tr>
      3. <th>Das ist der Inhalt der Kopfzeile.</th>
      4. </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]

      Quellcode

      1. <table border="Hier beliebige Zahl eingeben jeh nach gewünschter dicke des Tabllen Rahmens">
      2. <tr>
      3. <th>Kopfzeile 1<br/> Zeilenumbruch1</th>
      4. <th>Kopfzeile 2<br/> Zeilenumbruch2</th>
      5. </tr>
      6. <tr>
      7. <th nowrap="nowrap">Zelle 1 Zeilenumbruch3</th>
      8. <th nowrap="nowrap">Zelle 2 Zeilenumbruch4</th>
      9. </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]


      Quellcode

      1. <table border="1" frame="above">
      2. <tr>
      3. <th>Kopfzeile 1<br/> Zeilenumbruch1</th>
      4. <th>Kopfzeile 2<br/> Zeilenumbruch2</th>
      5. </tr>
      6. <tr>
      7. <th>Zelle 1<br/> Zeilenumbruch3</th>
      8. <th>Zelle 2<br/> Zeilenumbruch4</th>
      9. </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]

      Quellcode

      1. <table border="1" cellpadding="Zahl" cellspacing="Zahl">
      2. <tr>
      3. <th>Kopfzeile 1<br/> Zeilenumbruch1</th>
      4. <th>Kopfzeile 2<br/> Zeilenumbruch2</th>
      5. </tr>
      6. <tr>
      7. <th>Zelle 1<br/> Zeilenumbruch3</th>
      8. <th>Zelle 2<br/> Zeilenumbruch4</th>
      9. </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]

      Quellcode

      1. <table border="5" width="Prozentzahl oder nur Zahl" hight="Prozentzahl oder nur Zahl" >
      2. <tr>
      3. <th>Kopfzeile 1<br/> Zeilenumbruch1</th>
      4. <th>Kopfzeile 2<br/> Zeilenumbruch2</th>
      5. </tr>
      6. <tr>
      7. <th>Zelle 1<br/> Zeilenumbruch3</th>
      8. <th>Zelle 2<br/> Zeilenumbruch4</th>
      9. </tr>
      [/FELD]

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

      Horizontale Ausrichtung. (Wagerecht)[/COLOR]

      Quellcode

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


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

      Quellcode

      1. <table border="5" width="Prozentzahl oder nur Zahl" hight="Prozentzahl oder nur Zahl" >
      2. <tr>
      3. <th valign="bottom|top|middle">Kopfzeile 1<br/> Zeilenumbruch1</th>
      4. <th valign="bottom|top|middle">Kopfzeile 2<br/> Zeilenumbruch2</th>
      5. </tr>
      6. <tr>
      7. <th valign="bottom|top|middle">Zelle 1<br/> Zeilenumbruch3</th>
      8. <th valign="bottom|top|middle">Zelle 2<br/> Zeilenumbruch4</th>
      9. </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]

      Quellcode

      1. <table border="5" bgcolor="Farbcode">
      2. <tr bgcolor="Farbcode">
      3. <th bgcolor="Farbcode">Kopfzeile 1<br/> Zeilenumbruch1</th>
      4. <th valign="bottom|top|middle">Kopfzeile 2<br/> Zeilenumbruch2</th>
      5. </tr>
      6. <tr>
      7. <th valign="bottom|top|middle">Zelle 1<br/> Zeilenumbruch3</th>
      8. <th valign="bottom|top|middle">Zelle 2<br/> Zeilenumbruch4</th>
      9. </tr>


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

      Quellcode

      1. <table border="5" background="test.jpg">
      2. <tr bgcolor="Farbcode">
      3. <th bgcolor="Farbcode">Kopfzeile 1<br/> Zeilenumbruch1</th>
      4. <th valign="bottom|top|middle">Kopfzeile 2<br/> Zeilenumbruch2</th>
      5. </tr>
      6. <tr>
      7. <th valign="bottom|top|middle">Zelle 1<br/> Zeilenumbruch3</th>
      8. <th valign="bottom|top|middle">Zelle 2<br/> Zeilenumbruch4</th>
      9. </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]

      Quellcode

      1. <table border="5" bgcolor="Farbcode">
      2. <caption align="center|right|left">Eine kleine Überschrift.</caption>
      3. <tr bgcolor="Farbcode">
      4. <th bgcolor="Farbcode">Kopfzeile 1<br/> Zeilenumbruch1</th>
      5. <th valign="bottom|top|middle">Kopfzeile 2<br/> Zeilenumbruch2</th>
      6. </tr>
      7. <tr>
      8. <th valign="bottom|top|middle">Zelle 1<br/> Zeilenumbruch3</th>
      9. <th valign="bottom|top|middle">Zelle 2<br/> Zeilenumbruch4</th>
      10. </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]

      Quellcode

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

      [/FELD]

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

      Tsakuya;18237 schrieb:


      [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"

      Quellcode

      1. <TABLE BORDER=2 CELLPADDING=4>
      2. <TR> <TH>GL</TH> </TR>
      3. <TR> <TD >Godlikerz1</TD> <TD>Godlikerz7</TD> </TR>
      4. <TR> <TD >Godlikerz2</TD> <TD>Godlikerz8</TD> </TR>
      5. <TR> <TD >Godlikerz3</TD> <TD>Godlikerz9</TD> </TR>
      6. <TR> <TH>Godlikerz1</TH> </TR>
      7. <TR> <TD >Godlikerz4</TD> <TD>Godlikerz10</TD> </TR>
      8. <TR> <TD >Godlikerz5</TD> <TD>Godlikerz11</TD> </TR>
      9. <TR> <TD >Godlikerz6</TD> <TD>Godlikerz12</TD> </TR>
      10. </TABLE>


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


      "code"

      Quellcode

      1. <TABLE BORDER=2 CELLPADDING=4>
      2. <TR> <TH colspan="2" >GL</TH> </TR>
      3. <TR> <TD >Godlikerz1</TD> <TD>Godlikerz7</TD> </TR>
      4. <TR> <TD >Godlikerz2</TD> <TD>Godlikerz8</TD> </TR>
      5. <TR> <TD >Godlikerz3</TD> <TD>Godlikerz9</TD> </TR>
      6. <TR> <TH colspan="2" >Godlikerz1</TH> </TR>
      7. <TR> <TD >Godlikerz4</TD> <TD>Godlikerz10</TD> </TR>
      8. <TR> <TD >Godlikerz5</TD> <TD>Godlikerz11</TD> </TR>
      9. <TR> <TD >Godlikerz6</TD> <TD>Godlikerz12</TD> </TR>
      10. </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]

    • Werbung zur Unterstützung des Forums ( Bitte AddBlocker deaktivieren )

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

      Colspan:

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

      Feldaufteilung:

      1 1
      2|3


      Rowspan:

      Das überspringen/zusammenfassen von Reihen in einer einzelnen Spalte

      Feldaufteilung:

      1|2
      1|3


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

      Mfg,
      Tsakuya

    • Rowspan ist leider noch nicht so ganz richtig:

      HTML-Quellcode

      1. <html>
      2. <body>
      3. <table border="1">
      4. <tr>
      5. <th rowspan="2">Godlikerz</th>
      6. <td>Reihe 1.1</td>
      7. </tr>
      8. <tr>
      9. <td>Reihe 1.2</td>
      10. </tr>
      11. <tr>
      12. <th rowspan="2">Godlikerz</th>
      13. <td>Reihe 2.1</td>
      14. </tr>
      15. <tr>
      16. <td>Reihe 2.2</td>
      17. </tr>
      18. </table>
      19. </body>
      20. </html>
      Alles anzeigen


      Ergibt dann folgendes: