Professionelle HTML Tabellen erzeugen

Du möchtest wissen wie du professionelle HTML Tabellen erzeugst, dann bist du hier sowas von richtig! 🙂

Tabellen in HTML werden oft genutzt und deshalb ein absoluter Muss, das man sie kennt und weiß wie man sie richtig einsetzt.

Ich möchte dir hiermit ein sehr guten Überblick geben und werde dir in den nächsten Kapiteln einiges beibringen.

Let’s go…

Grundgerüst einer Tabelle

Ich möchte dir zuerallerst das Grundgerüst einer Tabelle vorstellen und danach es haargenau erklären, damit du es in der Tiefe verstehst:

<table>
<tr>
<td>Spalte 1</td><td>Spalte 2</td>
</tr>
<tr>
<td>Spalte 1</td><td>Spalte 2</td>
</tr>
</table>
  • Du fängst mit einem <table> Tag an, um eine Tabelle einzuleiten.
  • Danach folgt ein <tr>, dass für „Tablerow“ steht und eine Zeile in einer table darstellt.
  • Zuletzt noch ein <td>, dass die Spalte darstellt.

Natürlich kannst du mehrere <tr> und <td> nutzen, aber es ist wichtig, dass du die Tags auch wieder schließt.

Glaub mir schließen von Tags ist immer eine Fehlerquelle, die gerne mal dich zu Weißglut bringen kann. Vertrau mir ich hab es schon einigemale erlebt 😀

Abstände innerhalb deiner Tabelle

Da du jetzt hoffentlich weißt, wie das Grundgerüst aussieht, können wir anfangen die Tabelle anzupassen

Wenn du Abstände in deiner table benötigst, dann gibt es generell zwei Parameter, die du kennen solltest:

  1. cellspacing
  2. cellpadding

Mit cellspacing kannst du den Außenabstand deiner table bestimmen und mit cellpadding, den Innenabstand.

Du fragst dich jetzt bestimmt, wie das ganze in HTML Code aussieht:

<table cellspacing="8" cellpadding="6">
<tr>
<td>Spalte 1</td><td>Spalte 2</td>
</tr>
<tr>
<td>Spalte 1</td><td>Spalte 2</td>
</tr>
</table>

Einfach die zwei Parameter in dem <table> Tag nutzen und fertig sind die Abstände.

Verändere den Rahmen

Der nächste Anpassungtrick ist im Rahmen deiner Tabelle versteckt. Natürlich kannst du auch den Rahmen verändern und das zeigt ich dir jetzt:

<table border="3">
<tr>
<td>Spalte 1</td><td>Spalte 2</td>
</tr>
<tr>
<td>Spalte 1</td><td>Spalte 2</td>
</tr>
</table>

Du kennst bereits jetzt schon 2 Parameter und der nächste ist „border“. Mit „border“ kannst du die Dicke des Rahmens verändern.

Als kleine Ergänzung meinerseits, standardmäßig hat eine Tabelle immer einen Rahmen, aber oft passt es nicht zum Rest der Webseite.

Um diesen Rahmen einfach unsichtbar zu machen, setzt du den Parameter einfach auf „0“

Setze eine Hintergrundfarbe ein

Ab und zu muss ja auch etwas Farbe auf die Website 😉

Um das zu erreichen kannst du deiner Tabelle einfach eine Hintergrundfarbe verpassen.

Es wird eher seltener genutzt, aber man sollte es mal gehört haben:

<table bgcolor="blue">
<tr>
<td>Spalte 1</td><td>Spalte 2</td>
</tr>
<tr>
<td>Spalte 1</td><td>Spalte 2</td>
</tr>
</table>

In diesem Beispiel verpasse ich der Tabelle einen schönes blau.

Mit dem Parameter „bgcolor“ gibst du der Tabelle eine Hintergrundfarbe. Wie immer als Wort (z.B. blue) oder als Hex-code (z.B. #0000ff).

Zentriere es

Zum Schluss noch eine Hilfe, um deine Tabelle zentrieren zu können.

<table align="center">
<tr>
<td>Spalte 1</td><td>Spalte 2</td>
</tr>
<tr>
<td>Spalte 1</td><td>Spalte 2</td>
</tr>
</table>

„align“ ist der letzte Parameter, den ich dir zeigen werde. Damit kannst du die Ausrichtung verändern.

Es gibt 3 Möglichkeiten, die du nutzen kannst:

  1. center = mittig
  2. left = links
  3. right = rechts

Damit bist du vollkommen ausgestattet, um sie ausreichend für dich auszurichten.

>