Tabelle: Unterschied zwischen den Versionen

Aus WKwiki
Zur Navigation springen Zur Suche springen
K (Begriffe verlinkt)
 
(13 dazwischenliegende Versionen von 3 Benutzern werden nicht angezeigt)
Zeile 1: Zeile 1:
{| class="prettytable"
Auf Internetseiten nutzt man Tabellen um Seiten oder Daten strukturiert anzuzeigen.
! Inhaltsverzeichnis
 
==HTML-Codes zum erstellen einer Tabelle==
 
Um eine Tabelle in einer HTML-Seite zu ertellen braucht man die folgenden Tags:
{| border="1" style="border:2px dotted #666; border-collapse:collapse; caption-side:top;"  
! Tag || Bedeutung
|-
|-
=== A ===
!  colspan="2" | notwendig
|-
|-
| [[Ankündigung]], allgemein
|<nowiki><table></nowiki>
|Tabelle
|-
|-
| [[Ankündigung]], Moderatoren
|<nowiki><tr></nowiki>
|Tabellenzeile
|-
|-
=== B ===
|<nowiki><td></nowiki>
|Tabellenzelle
|-
|-
| [[Bedienungshilfe]]
! colspan="2" | optional
|-
|-
| [[Befehle|Befehlsliste]]
|<nowiki><th></nowiki>
|Tabellen-&Uuml;berschrift
|-
|-
=== C ===
|<nowiki><thead></nowiki>
|Tabellen-Kopf
|-
|-
| [[Chatbot|Chatbot]], eigenständiges Programm (WKBot)
|<nowiki><tbody></nowiki>
|Tabellen-K&ouml;rper
|-
|-
| [[Chatroboter|Chatroboter]], implementiertes Botsystem (Chat-Bot = Systemmeldungen)
|<nowiki><tfoot></nowiki>
|Tabellen-Fu&szlig;
|}
 
Der Aufbau einer Tabelle in HTML kann so aussehen:
<code>
  <nowiki><table border="1" style="border-collapse:collapse;">
    <tr>
      <th>
        Spaltenüberschrift 1
      </th>
      <th>
        Spaltenüberschrift 2
      </th>
    </tr>
    <tr>
      <td>
        Text in Zelle 1
      </td>
      <td>
        Text in Zelle 2
      </td>
    </tr>
    <tr>
      <td>
        Text in Zelle 3
      </td>
      <td>
        Text in Zelle 4
      </td>
    </tr>
  </table></nowiki>
</code>
 
<nowiki><table> und </table></nowiki> umschließen die gesamte Tabelle. Von <nowiki><tr> bis </tr></nowiki> geht jeweils eine Zeile, also alles was nebeneinander steht. Tabellenüberschriften stehen dann jeweils direkt zwischen <nowiki><th> und </th></nowiki>. Normale Zellen werden genauso definiert wie Tabellenüberschriften. Verwendet wird hier nur <nowiki><td> und </td> statt <th> und </th></nowiki>. Gruppen von Zeilen (tr) kann man dann noch in thead, tbody oder tfoot zusammenfassen, was man aber zumindest für den Anfang noch nicht braucht, da es auch optisch keinen Unterschied macht (für XML/XHTML, [[Javascript]] und/oder [[CSS]] unter Umständen von Bedeutung).
Die Angaben  border="1" und style="border-collapse:collapse;" bewirken den Rahmen, der hier nur zur Verdeutlichung dienen soll. Man kann sie auch weglassen wenn man keinen Rahmen will.
 
Die Tabelle würde dann so aussehen:
{| border="1" style="border-collapse:collapse;"
!Spaltenüberschrift 1
!Spaltenüberschrift 2
|-
|-
=== E ===
|Text in Zelle 1
|Text in Zelle 2
|-
|-
| [[Eigene_Loginseite|eigene Loginseite]]
|Text in Zelle 3
|-
|Text in Zelle 4
=== F ===
|}
|-
 
| [[Flüstern]]
== Tabellen im Wk-Chat ==
|-
 
=== G ===
Im Chat kommen an mehreren Stellen Tabellen vor. Zum Beispiel die [[Smilies]] oder auch die [[Topliste]] werden in Tabellen dargestellt. Auch die User in der [[Onlineliste]] und die gesendeten Texte im [[Chatstream]] stehen in Tabellen, was man aber &auml;ußerlich nicht sieht.
|-
Interesannter ist allerdings die Ausrichtung eigener Inhalte in Tabellen, wie zum Beispiel die Eingabefelder auf einer [[Eigene Loginseite|eigenen Loginseite]]. So können trotz unterschiedlich langer Beschreibungen der Felder (Name, Passwort, Gast) die Eingabefelder auf einer Linie untereinander angezeigt werden.
| [[Status|Gast]]
 
|-
==Tabellen im Wiki==
=== H ===
Hier im Wiki kann man auch Inhalte strukturiert in Tabellen anzeigen, wie zum Beispiel die obige Übersicht der möglichen HTML-Tags für eine Tabelle. Ein recht umfangreiches Anwendungsbeispiel ist der Artikel [[Inhalt]].
|-
Die gesamte Tabelle wird durch <nowiki>{| und |}</nowiki> umschlossen (Vergleich <nowiki><table> und </table></nowiki> bei [[HTML]]).
| [[Status|Hauptadministrator]]
 
|-
Tabellenzeilen (Vergleich <nowiki><tr> und </tr></nowiki>) werden jeweils durch |- eingeleitet.
=== L ===
 
|-
Eine Tabellenzelle (Vergleich <nowiki><td> und </td></nowiki>) beginnt immer jeweils mit | am Zeilenanfang des Codes oder || ohne Zeilenumbruch.
| [[Eigene_Loginseite|Loginseite]], eigene
 
|-
Tabellenüberschriften (Vergleich <nowiki><th> und </th></nowiki>) können statt | durch (normale Zelle) ! am Zeilenanfang, bzw. !! in der gleichen Codezeile eingeleitet werden.
=== M ===
 
|-
Damit sieht der Wiki-Code für die obige Beispieltabelle so aus:
| [[Admin_Menü|Menü]], Admin-
<nowiki>
|-
{| border="1" style="border-collapse:collapse;"
| [[Status|Moderator]]
|Text in Zelle 1
|-
|Text in Zelle 2
=== N ===
|-
| [[Neue Seite]]
|-
=== P ===
|-
| [[Profil]]
|-
=== R ===
|-
| [[Rechte]]
|-
=== S ===
|-
| [[Scripting-Engine]]
|-
| [[Neue Seite|Seite]], neu
|-
=== T ===
|-
| [[Tabelle]]
|-
| [[Team]]
|-
| [[Timeout]]
|-
=== U ===
|-
| [[Ungültige ID]]
|-
| [[Status|User]]
|-
=== W ===
|-
| [[Chatbot|WKbot]], eigenständiges Programm (WKBot)
|-
| [[Team|Webkicksteam]]
|-
|-
|Text in Zelle 3
|Text in Zelle 4
|}
|}
</nowiki>


Mehr dazu auch unter [[WKwiki:Hilfe#Tabellen|WKwiki:Hilfe]].


--earl 19:07, 8. Mai. 2007 (CEST)
[[Kategorie:Programmieren und Webdesign]][[Kategorie:Sonstiges]][[Kategorie:WkWiki-Hilfe]]

Aktuelle Version vom 2. Oktober 2007, 23:58 Uhr

Auf Internetseiten nutzt man Tabellen um Seiten oder Daten strukturiert anzuzeigen.

HTML-Codes zum erstellen einer Tabelle

Um eine Tabelle in einer HTML-Seite zu ertellen braucht man die folgenden Tags:

Tag Bedeutung
notwendig
<table> Tabelle
<tr> Tabellenzeile
<td> Tabellenzelle
optional
<th> Tabellen-Überschrift
<thead> Tabellen-Kopf
<tbody> Tabellen-Körper
<tfoot> Tabellen-Fuß

Der Aufbau einer Tabelle in HTML kann so aussehen: 

 <table border="1" style="border-collapse:collapse;">
    <tr>
      <th>
        Spaltenüberschrift 1
      </th>
      <th>
        Spaltenüberschrift 2
      </th>
    </tr>
    <tr>
      <td>
        Text in Zelle 1
      </td>
      <td>
        Text in Zelle 2
      </td>
    </tr>
    <tr>
      <td>
        Text in Zelle 3
      </td>
      <td>
        Text in Zelle 4
      </td>
    </tr>
  </table>

<table> und </table> umschließen die gesamte Tabelle. Von <tr> bis </tr> geht jeweils eine Zeile, also alles was nebeneinander steht. Tabellenüberschriften stehen dann jeweils direkt zwischen <th> und </th>. Normale Zellen werden genauso definiert wie Tabellenüberschriften. Verwendet wird hier nur <td> und </td> statt <th> und </th>. Gruppen von Zeilen (tr) kann man dann noch in thead, tbody oder tfoot zusammenfassen, was man aber zumindest für den Anfang noch nicht braucht, da es auch optisch keinen Unterschied macht (für XML/XHTML, Javascript und/oder CSS unter Umständen von Bedeutung). Die Angaben border="1" und style="border-collapse:collapse;" bewirken den Rahmen, der hier nur zur Verdeutlichung dienen soll. Man kann sie auch weglassen wenn man keinen Rahmen will.

Die Tabelle würde dann so aussehen:

Spaltenüberschrift 1 Spaltenüberschrift 2
Text in Zelle 1 Text in Zelle 2
Text in Zelle 3 Text in Zelle 4

Tabellen im Wk-Chat

Im Chat kommen an mehreren Stellen Tabellen vor. Zum Beispiel die Smilies oder auch die Topliste werden in Tabellen dargestellt. Auch die User in der Onlineliste und die gesendeten Texte im Chatstream stehen in Tabellen, was man aber äußerlich nicht sieht. Interesannter ist allerdings die Ausrichtung eigener Inhalte in Tabellen, wie zum Beispiel die Eingabefelder auf einer eigenen Loginseite. So können trotz unterschiedlich langer Beschreibungen der Felder (Name, Passwort, Gast) die Eingabefelder auf einer Linie untereinander angezeigt werden.

Tabellen im Wiki

Hier im Wiki kann man auch Inhalte strukturiert in Tabellen anzeigen, wie zum Beispiel die obige Übersicht der möglichen HTML-Tags für eine Tabelle. Ein recht umfangreiches Anwendungsbeispiel ist der Artikel Inhalt. Die gesamte Tabelle wird durch {| und |} umschlossen (Vergleich <table> und </table> bei HTML).

Tabellenzeilen (Vergleich <tr> und </tr>) werden jeweils durch |- eingeleitet.

Eine Tabellenzelle (Vergleich <td> und </td>) beginnt immer jeweils mit | am Zeilenanfang des Codes oder || ohne Zeilenumbruch.

Tabellenüberschriften (Vergleich <th> und </th>) können statt | durch (normale Zelle) ! am Zeilenanfang, bzw. !! in der gleichen Codezeile eingeleitet werden.

Damit sieht der Wiki-Code für die obige Beispieltabelle so aus: {| border="1" style="border-collapse:collapse;" |Text in Zelle 1 |Text in Zelle 2 |- |Text in Zelle 3 |Text in Zelle 4 |}

Mehr dazu auch unter WKwiki:Hilfe.

Abgerufen von „http://wiki.webkicks.de/index.php?title=Tabelle&oldid=2665“