HTML: Tabellen Rahmen erstellen – So gehts

Um einen Rahmen um deine HTML Tabelle erstellen, kannst du folgenden CSS Befehl verwenden. Der Befehl border-collapse sorgt dafür das bei deinen Zellen und Reihen kein Doppelrahmen etnsteht.

table, th, td {
  border: 1px solid green;
  border-collapse: collapse;
}

Ergebnis

Du erhältst einen sauberen Rahmen um deine Tabelle ohne doppelrahmen

HTML Tabelle mit Hintergrundfarbe

Du kannst deiner Tabelle auch eine andere Hintergrundfarbe geben. Wie das geht zeige ich dir in diesem Beispiel.

table, th, td {
  border: 1px solid white;
  border-collapse: collapse;
  background-color:#88D9BD;
}

Ergebnis

Gepunktete HTML Tabelle

In folgendem Beispiel kannst du auch eine gepunktete HTML Tabelle erstellen. Die Ränder der Tabelle sind dann gepunktet.

 th, td {
  border-style: dotted;
}

Ergebnis

Rahmenfarbe einer Tabelle einstellen

Wenn du nur die Rahmen der Tabelle farbig darstellen möchtest dann geht das mit folgendem CSS Befehl.

 th, td {
   border: 3px solid #4287f5;
}

Ergebnis

Runde HTML Tabellen erstellen

Wenn du eine runde HTML Tabelle erstellen möchtest, dann geht das wie in folgendem Beispiel

Wichtig: benutze den CSS Befehl border-collapse:seperate

table, th, td {
  border: 1px solid #4287f5;
  border-radius: 10px;
  border-collapse: separate;

}

Ergebnis

Über mich

Domi

Hi ich bin’s Dominik. Auf Blogseite.com findest du alles was mich interessiert. Mag Games, liebe SEO, programmiere gerne und möchte dir mit verschiedenen Themen die mich begeistern einen Mehrwert liefern. Viel Spaß auf meiner Seite