HTML: Tabellen

13. April 2016 von | Kategorie(n): Programmierung
Schlagwörter: // // //

Bilder und Texte sind zwar schön, aber viele, komplexe Informationen lassen sich einfach besser in einer Tabelle darstellen. Oder hast du schon Mal eine Bundesligatabelle durch reine Beschreibung wiedergegeben? 😀 Tabellen sind im Gegensatz zu AbsĂ€tzen, Überschriften und Bildern etwas anders. Allerdings brauchst du dir keine Sorgen machen. Auch diese sind leicht zu erlernen!
tabellen-artikelbild

Wie sieht eine Tabelle in HTML aus?

In HTML wird die Tabelle in Reihen (<tr> </tr>) und Zellen (<td> </td>) unterteilt. Die Zellen sind jeweils der Inhalt der Zeilen. Das ganze wird in die öffnenden und schließenden table-Tags eingebettet.

Jo… Das war die Kurzform. Falls es schon einer verstanden hat (wahrscheinlich nicht; bei den „BeschreibungskĂŒnsten“ :D), dann reicht das folgende Beispiel schon. Aber selbstverstĂ€ndlich gibt’s da auch noch ne ErklĂ€rung anschließend.

Bisschen Quellcode:

<html>
<body>
     <title> Tabellen in HTML </title>
</body>
<body>
     <table border="1">
          <tr>
	       <th> Platz </th>
	       <th> Name </th>
	       <th> Punkte </th>
	  </tr>
	  <tr> 
	       <td> 1 </td>
	       <td> Rick </td>
	       <td> 28 </td>
	  </tr>
	  <tr> 
	       <td> 2 </td>
	       <td> Daryl </td>
	       <td> 25 </td>
	  </tr>
	  <tr> 
	       <td> 3 </td>
	       <td> Michonne </td>
	       <td> 18 </td>
          </tr>
     </table>
</body>
</html>

Ansehen

ErklÀrung: Wie bereits erwÀhnt, beginnt eine Tabelle mit <table> und endet mit </table> (wie man es so kennt aus HTML :D).

  • tr-Tag: Bildet eine Reihe der Tabelle.
  • td-Tag: Bildet eine Zelle der Tabelle und dort kommt auch der Inhalt einer Zelle rein.
  • Je mehr Zellen in einer Zeile, desto mehr Spalten.
  • th-Tag: Tabellen-Kopf (eine Zelle mit fetter Schrift).
  • border-Attribut: Kommt mit in den table-Tag (z.B. <table border=“1″). Sorgt fĂŒr einen Rahmen der n breit ist.

Oh Gott 😀 Die ErklĂ€rung hab ich verkackt, oder ? Fragen einfach in die Kommentare 😉

 

<Tim Poerschke />

Was denkst du ĂŒber diesen Post?
  • Gut (0)
  • Hilfreich (0)
  • Nicht gut (0)
  • Lustig 😀 (0)
Diesen Post teilen:
Facebooktwittergoogle_plusredditpinterestlinkedinmail

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.

89 − = 81