HTML: Tabellen

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:

<br />
&lt;html&gt;<br />
&lt;body&gt;<br />
     &lt;title&gt; Tabellen in HTML &lt;/title&gt;<br />
&lt;/body&gt;<br />
&lt;body&gt;<br />
     &lt;table border=&quot;1&quot;&gt;<br />
          &lt;tr&gt;<br />
	       &lt;th&gt; Platz &lt;/th&gt;<br />
	       &lt;th&gt; Name &lt;/th&gt;<br />
	       &lt;th&gt; Punkte &lt;/th&gt;<br />
	  &lt;/tr&gt;<br />
	  &lt;tr&gt;<br />
	       &lt;td&gt; 1 &lt;/td&gt;<br />
	       &lt;td&gt; Rick &lt;/td&gt;<br />
	       &lt;td&gt; 28 &lt;/td&gt;<br />
	  &lt;/tr&gt;<br />
	  &lt;tr&gt;<br />
	       &lt;td&gt; 2 &lt;/td&gt;<br />
	       &lt;td&gt; Daryl &lt;/td&gt;<br />
	       &lt;td&gt; 25 &lt;/td&gt;<br />
	  &lt;/tr&gt;<br />
	  &lt;tr&gt;<br />
	       &lt;td&gt; 3 &lt;/td&gt;<br />
	       &lt;td&gt; Michonne &lt;/td&gt;<br />
	       &lt;td&gt; 18 &lt;/td&gt;<br />
          &lt;/tr&gt;<br />
     &lt;/table&gt;<br />
&lt;/body&gt;<br />
&lt;/html&gt;</p>
<p>

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)

von | Kategorie: Programmierung
Schlagwörter: // // //

Schreibe einen Kommentar

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

− 1 = 3