Mit CSS zwei verschiedene Tabellen verschönern?
Habe in CSS grad ne Tabelle die ich mit:
table{
width:100%;
background-color: black;
border-style: none;
height: 70px;
color: white;
text-align: center;
font: 200% serif;
}
verschönert habe. Habe jetzt aber noch eine andere Tabelle die ich andere Eigenschaften geben möchte. Wie mache ich das jetzt?
5 Antworten
Hi,
Du musst mit ids arbeiten also deinen Tabellen ids zuweisen das heisst z.B:
<table class="tab1">
bzw.
<table class="tab2">
und dann kannst du oben unter <style> oder in deinem style shead:
sowas als beispiel machen:
table#special { border-collapse: separate; border-spacing: 0.2em; margin-left: 2em; box-shadow: 0 0 0.1em #666; position: relative; z-index: 1; cursor: context-menu;}table#special th,table#special td { padding: 0.2em 0.5em; border-radius: 0.1em;}table#special thead th { background-image: linear-gradient(to top, red 10%, blue ); color: white; }
PS: es gibt natürlich noch weitere Möglichkeiten wie divs oder classen usw.
Du kannst eine Klasse definieren (.tabletwo) und im zweiten Table diese Klasse verwenden (class=„tabletwo“) . Ausserdem kannst du das zweite Table erweitern. Ich würde dir aber empfehlen für beide Tables eine Klasse zu erstellen und nicht generell das HTML Objekt Table zu definieren. Ausserdem kannst du ja eine Klasse mehrfach verwenden.
Indem du dieser eine Klasse oder ID zuweist.
<table id="meineID" class="meineKlasse">
</table>
CSS
.meineKlasse {
}
#meineID {
}
Gib den zwei Tabellen eine unterschiedliche Klasse oder ID, und dann style in CSS die jeweilige Klasse/ID.
Dazu gibst du der Tabelle eine Klasse, und definierst die im CSS:
HTML:
<table class="rot">..........
Im CSS brauchst du nur die Sachen eintragen, die sich aendern, den Rest uebernimmt sie schon:
table.rot {
background-color: red;...........
Du hast class anstatt id geschrieben.