1. #1
    Permanent gesperrt

    Registriert seit
    18.11.2011
    Beiträge
    773
    Thanked 752 Times in 362 Posts

    Standard [HTML Tutorial] #5 - Tabellen


    #5 - Tabellen


    Wir haben ja nun bereits schon in den letzten Teilen des Tutorials eine Menge Tags dazu gelernt. Der mit Abstand (neben den Formularen sowie div Boxen) schwierigste Tag ist der, der eine Tabelle enthält.

    Denn wir haben anfangs ein Problem: Wir können das ganze nicht wie in Excel optisch betrachten sondern müssen und das ganze von Anfang an logisch aufbauen. Den einen Leuten fällt es einfacher, den anderen schwerer.

    Aber bevor wir zu Reihen in einer Tabelle kommen oder einzelnen Zellen, legen wir erst einmal unser HTML-Dokument sowie den Tabellen Tag an. Auch hier kann man wieder aus dem Englischen übersetzen. "Timetable" => "Stundenplan/Stundentabelle".

    In unserem Fall lautet der Tag für eine Tabelle also tatsächlich einfach <table>.

    HTML-Code:
    <html>
    <head>
     <title> Eine einfache Tabelle </title>
    </head>
    <body>
      <h1> Unsere erste Tabelle </h1>
      <table>
      </table>
    </body>
    </html>
    Nun weiß HTML schon einmal, dass wir eine Tabelle erzeugen wollen. In unserem Fall ist die Tabelle aber leer, da wir keinen Inhalt eingefügt haben.

    Nun wollen wir anfangen in dem wir unsere erste Tabellenreihe anlegen. Eine Tabellenreihe besteht wie in Excel aus mehreren Zellen. Wie die Tabellenreihe in Excel aussieht:

    BILD ANZEIGEN [Warum wird das Bild nicht angezeigt?]

    Wie sie in HTML aussieht:

    HTML-Code:
    <table>
    <tr>
    </tr>
    </table>
    Genau! Du hast es schon richtig erkannt. Eine Tabellenreihe wird auch wieder mithilfe von Tags innerhalb der Tabelle an sich definiert. In unserem Fall, mithilfe des <tr> Tags (Table Row = Tabellenreihe) haben wir nun unsere erste Reihe in der Tabelle erstellt.

    Wollen wir nun weitere Reihen dranhängen, ist das ganz einfach. Wir setzen einfach nach und nach immer wieder <tr>'s aneinander, damit wir einzelne Reihen erhalten.

    Aufgabe: Erstelle eine einfache Tabelle mit 3 Reihen. Es geht in dieser Aufgabe vor allem um die Logik, wie solche Tabellen aufgebaut sind.
    Spoiler:Lösung

    HTML-Code:
    <table>
    
    <tr>
    </tr>
    
    <tr>
    </tr>
    
    <tr>
    </tr>
    
    </table>


    Ich habe das in dem Lösungscode bewusst außeinander gesetzt. Normalerweise fügt man die Tags einfach nach und nach zusammen. So ist es jedoch um einiges verständlicher, wie diese Reihen nun zustande kommen.

    Nun wollen wir unsere "Felder" in die Tabelle einfügen. Diese Felder kennt man ebenfalls aus Excel, sie sehen so aus:

    BILD ANZEIGEN [Warum wird das Bild nicht angezeigt?]

    In HTML sieht das ganze so aus:

    HTML-Code:
    <table>
    <tr>
     <td> TEXT </td>
    </tr>
    </table>
    Was haben wir nun da oben in dem Code gemacht? Wir haben erst einmal unsere Tabelle an sich angelegt, danach eine neue Reihe erstellt und in dieser Reihe ein Feld angelegt. Dieses Feld definiert man mit <td> (Table Data = Datensatz). Im Grunde findet sich diese Verschachtelung nun immer wieder. Ebenfalls ist es hier Möglich, mehrere "Zellen" innerhalb einer Tabellenreihe zu haben. Dazu hängen wir die ganzen <td>'s auch wieder nur aneinander:

    HTML-Code:
    <tr>
     <td> TEXT </td>
     <td> TEXT2 </td>
     <td> TEXT3 </td>
    </tr>
    Dieses Beispiel oben, würde folgende Ausgabe erzeugen:

    BILD ANZEIGEN [Warum wird das Bild nicht angezeigt?]
    (Anmerkung: Ich habe hier das Attribut border="1" verwendet. (<table border="1"). Dieses ist veraltet und wird heutzutage durch CSS ersetzt. Es dient nur dazu um den Rand zu sehen, da er sonst nicht sichtbar wäre.)

    Um nun oben unsere Lösung zu erweitern, in der wir mehrere Tabellenreihen angelegt haben, wir nun wissen dass das ganze Logisch immer aufeinanderfolgt und ineinander verschachtelt ist, können wir uns nun ganz einfach 3 Tabellenreihen mit je 3 Zeilen zaubern:

    HTML-Code:
    <table>
    <tr>
     <td> TEXT </td>
     <td> TEXT2 </td>
     <td> TEXT3 </td>
    </tr>
    <tr>
     <td> TEXT4 </td>
     <td> TEXT5 </td>
     <td> TEXT6 </td>
    </tr>
    <tr>
     <td> TEXT7 </td>
     <td> TEXT8 </td>
     <td> TEXT9 </td>
    </tr>
    </table>
    Das ganze sieht dann am Ende so aus:

    BILD ANZEIGEN [Warum wird das Bild nicht angezeigt?]

    Es gibt nun noch diverse Methoden und andere Tags die man dazu lernen kann. Diese kommen aber alle mit der Zeit wenn man sich mit so etwas mehr beschäftigt. Ebenfalls hat man die Möglichkeit eine Tabellenzelle an sich über mehrere andere laufen zu lassen (also das man quasi anstatt 3 <td> 1 <td> hat, dieses aber so breit ist wie die 3 anderen ).

    Dieses kommt aber entweder in meinem CSS Tutorial, oder man kann sich erweitert mit Tabellen beschäftigen, dort wir das ganze (beispielsweise beim W3C) gut erklärt.

  2. The Following 2 Users Say Thank You to Comu For This Useful Post:

    Disturbed (26.07.2012), Snees (26.07.2012)

Ähnliche Themen

  1. [HTML Tutorial] #6 - Formulare
    Von Comu im Forum HTML
    Antworten: 0
    Letzter Beitrag: 12.08.2012, 11:59
  2. [HTML Tutorial] Übersicht
    Von Comu im Forum HTML
    Antworten: 0
    Letzter Beitrag: 17.07.2012, 12:07
  3. Antworten: 0
    Letzter Beitrag: 17.07.2012, 11:57
  4. Antworten: 7
    Letzter Beitrag: 16.07.2012, 22:59
  5. HTML Video Tutorial
    Von Comu im Forum Webentwicklung
    Antworten: 9
    Letzter Beitrag: 17.11.2011, 01:49
Diese Seite nutzt Cookies, um das Nutzererlebnis zu verbessern. Klicken Sie hier, um das Cookie-Tracking zu deaktivieren.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191