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

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

HTML Tabelle mit Hintergrundfarbe

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

Ergebnis

VornameNachname
JonathanMustermann
StefanMüller

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

VornameNachname
JonathanMustermann
StefanMüller

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

VornameNachname
JonathanMustermann
StefanMüller

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

VornameNachname
JonathanMustermann
StefanMüller
    html        html tabellen rahmen   

Über Mich


Weitere Beiträge auf Blogseite.com




Kennst du schon diese Memes?