[Tut] Tabellen

  • 4. Tabellen


    4.1. Einführung


    Im 3. Kapitel hatte ich vorgehabt euch zu erklären wie man Tabellen erstellen kann mit HTML.
    Tabellen sind wirklich sehr praktisch wenn man einen Inhalt in Form einer Tabelle anzeigen möchte.
    Auch sehr praktisch für die sogenannten Tabellen Navigationen.
    Aber Tabellen sind nicht dafür da um WebSeite Layouts zu erstellen !
    Ja man sieht ab und zu Tabellen die missbraucht werden als WebSeiten Layouts xD
    Mann kann sie auch benutzen aber sie eigentlich sind sie nicht dafür da!
    Dafür sollte man eigentlich Divs benutzen ^^ Aber jedem seine Meinung ^^



    4.2. Aufbau von Tabellen


    Zuerst muss man den <table> Tag benutzen.
    Dieser Tag sagt aus dass man nun eine Tabelle erstellen möchte. Logisch oder ? xD
    Nun kommt ein <tr> Tag. Dieses steht für eine Reihe.
    Dann folgt ein <td> Tag. Dieses steht für die Anzahl an Kollonen.


    Wenn man also 1 Reihe haben möchte mit 2 Kollonnen.
    Würde der Code also folgender Massen aussehen.


    <table>
    <tr>
    <td>Inhalt</td>
    <td>Inhalt</td>
    </tr>
    </table>


    Wie man sieht muss man die <td> Tags sofort nach eurem Inhalt schliessen.
    Wenn ihr den <tr> Tag schliesst bedeutet es das eure Reihe auch beendet wird.


    Wenn ihr also 2 Reihen mit jeweils 2 Kollonen wollt würde der Code so aussehen.



    <table>
    <tr>
    <td>Inhalt</td>
    <td>Inhalt</td>
    </tr>


    <tr>
    <td>Inhalt</td>
    <td>Inhalt</td>
    </tr>


    </table>
    Hier ein andere Beispiel.
    Eine Tabelle mit 5 Reihen un 6 Kollonen.



    Mit dieser Methode kann man auch Navigationen Coden. Ihr könnt auch eine Liste in einer Tabelle tun.
    Ihr müsste nur aufpassen dass ihr die End Tags auch richtig schliesst.
    So würde der Code einer Tabelle aussehen die eine Liste enthaltet.


    <table>
    <tr>
    <td>INHALT</td>
    <td>
    <ul>
    <li>INHALT</li>
    <li>INHALT</li>
    </ul>
    </td>
    </tr>
    </table>


    Ich denke die meisten Fehler die auftretten werden oder überhaupt auftretten werden sind
    das man irgendwo ein EndTag vergiesst. Oder ein Endtag zu spät schliesst!


    4.2.1 Collspan || Rowspan


    Nun denn man sieht auch oft Tabellen die bsp.: 4 Reihen 6 Kollonnen enthalten.
    Wo aber dann verschiedene Zellen miteinander "verschmolzen" wurden.


    Um dies zu tun muss man die Attribute collspan und rowspan benutzen.


    4.2.2. Collspan


    Fangen wir also mit Collspan an ^^ Denn ich finde das ist das einfachste von den beiden.
    Collspan benutzt man um Zellen die nebeneinander sind miteinander zu verschmelzen.
    Und zwar NUR zellen die nebeneinander sind.
    Bsp.:


    <table>
    <tr>
    <td>INHALT</td>
    <td>INHALT</td>
    </tr>


    <tr>
    <td collspan="2"> INHALt </td>
    </tr>
    </table>


    Diese Tabelle hat nun in der ersten Reige 2 Zellen und die 2. Reihe hat eine Zelle.
    Aber muss man unbedingt Collspan benutzen ?
    Kann man nicht einfach oben 2 tds machen und unten eins ?
    Ganz einfach nein ^^


    Wenn man dies machen würde dann hätte man zwar in der 2. Reihe auch nur eine Zelle.
    Aber sie wäre genau so breit wie eine Zelle der 1. Reihe.
    Beim Rest ist auch keine Zelle sondern weiss oder wie auch immer eure Tabelle formatiert wurde ^^


    Die 2 nach dem collspan bedeutet einfach wieviele Zellen miteinander "verschmolzen" werden sollen.


    Hier wieder ein Beispiel:



    4.2.3 Rowspan


    Man kann also horizontal die Kollonen miteinder verschmelzen.
    Also müsste man logischerweise auch Reihen miteinfach verschmelzen können ^^
    Und ja das kann man auch mit Rowspan ^^
    Da kommen auch manche auf die geniale Idee, ja wenn man Collspan im <td> tag benutzt.
    Dann muss man Rowspan bestimmt im <tr> Tag benutzen !?
    Nein das ist Falsch den rowspan benutzt man auch im <td> Tag ^.^


    Auch von der Logik her, ich mein wenn man den Rowspan als Attribut im <tr> Tag einfügen würde !?
    Wie soll man so bestimmen in welcher Kollone das sein soll ?
    Nun ja ^^ Und so könnte ein Code aussehen :


    Vor dem Rowspan :


    <table>
    <tr>
    <td>INHALT</td>
    <td>INHALT</td>
    </tr>


    <tr>
    <td>INHALT</td>
    <td>INHALT</td>
    </tr>
    </table>


    Jetzt mit Rowspan


    <table>
    <tr>
    <td rowspan="2"> INHALT </td>
    <td>INHALT</td>
    </tr>


    <tr>
    <td>INHALT</td>
    </tr>
    </table>


    So nun zur Erklärung xD
    Wir haben nun in der ersten Kollone ein Rowspan benutzt. Was bedeutet diesmal
    werden die Zellen nicht horizontal sondern vertikal verschmolzen.
    In diesem Fall hat nun die erste Zelle die Länge von 2 Zellen der 2. Kollone.
    Hier muss man aber darauf achten dass man nicht das td im gleichen tr löscht sondern den td des nächsten tr Tags !!


    Beispiel:



    Ja dieses rowspan und collspan kann am Anfang richtig verwirrend sein ^^
    Aber mit ein bisschen Übung geht das ^.^


    4.2.4 Colspan & Rowspan


    Man kann beides einzeln benutzen. Man kann aber auch beides gleichzeitig benutzen.
    Wie zum Beispiel so :


    <table >
    <tr>
    <td colspan="4" rowspan="3">Inhalt</td>
    <td>Inhalt</td>
    <td>Inhalt</td>
    </tr>
    <tr>
    <td>Inhalt</td>
    <td>Inhalt</td>
    </tr>
    <tr>
    <td>Inhalt</td>
    <td>Inhalt</td>
    </tr>
    <tr>
    <td>Inhalt</td>
    <td>Inhalt</td>
    <td>Inhalt</td>
    <td>Inhalt</td>
    <td>Inhalt</td>
    <td>Inhalt</td>
    </tr>
    <tr>
    <td>Inhalt</td>
    <td>Inhalt</td>
    <td>Inhalt</td>
    <td>Inhalt</td>
    <td>Inhalt</td>
    <td>Inhalt</td>
    </tr>
    </table>


    Beispiel:



    4.3 Formatierungen


    Man kann nun eure Tabelle mit CSS Verschönern. Aber auch im <table> Tag kann man einiges einfügen.


    Wie zum Beispiel.


    <table border="1px"> Dies bewirkt das eure Tabelle einen Rahmen von 1px hat.


    <table background="#FFFFFF"> Somit kann man eine Hintergrund Farbe bestimmen.



    - Fortsetzung Folgt xP (bald xD) -