TH, TD, TR html tabellen kleuren

Status
Niet open voor verdere reacties.

gast30

Gebruiker
Lid geworden
19 mei 2019
Berichten
113
HTML:
<!DOCTYPE html>
<html>
<head>
<style>
table {
  width:100%;
}
table, th, td {
  border: 1px solid black;
  border-collapse: collapse;
}
th, td {
  padding: 15px;
  text-align: left;
}
table#t01 tr:nth-child(even) {
  background-color: #eee;
}
table#t01 tr:nth-child(odd) {
 background-color: #fff;
}
table#t01 th {
  background-color: red;
  color: white;
}
</style>
</head>
<body>

<h2>Styling Tables</h2>

<table>
  <tr>
    <th>Firstname</th>
    <th>Lastname</th> 
    <th>Age</th>
  </tr>
  <tr>
    <td>Jill</td>
    <td>Smith</td>
    <td>50</td>
  </tr>
  <tr>
    <td>Eve</td>
    <td>Jackson</td>
    <td>94</td>
  </tr>
  <tr>
    <td>John</td>
    <td>Doe</td>
    <td>80</td>
  </tr>
</table>
<br>

<table id="t01">
  <tr>
    <th>Firstname</th>
    <th>Lastname</th> 
    <th>Age</th>
  </tr>
  <tr>
    <td>Jill</td>
    <td>Smith</td>
    <td>50</td>
  </tr>
  <tr>
    <td>Eve</td>
    <td>Jackson</td>
    <td>94</td>
  </tr>
  <tr>
    <td>John</td>
    <td>Doe</td>
    <td>80</td>
  </tr>
</table>

</body>
</html>

geachte helpers,
Onlangs het ik gevonden hoe ik tabellen in de head met behulp van css kan kleuren...

Is het mogelijk om elke th, td een id mee te geven en elke tabel een andere kleur te geven?

mij lukte het niet
td id=

th id=

kan iemand mij een voorbeeld geven hoe ik elke tabel een andere kleur kan geven?

Graag advies
 
Gebruik een class i.p.v. id
 
Het kan ook een zelfde class zijn.
 
Het wordt wel een kermis :) maar zoals php4u aangaf is dit te doen.
Zomaar een paar willekeurige kleur notaties.

Code:
<style>
.bg-rood  { background-color: red; }
.bg-geel  { background-color: rgb(255,255,0); }
.bg-blauw { background-color: #00f; }
.bg-groen { background-color: 00ff00; }
</style>

<td class="bg-geel">Een gele achtergrond</td>
<td class="bg-blauw">Een blauwe achtergrond</td>
 
Status
Niet open voor verdere reacties.
Terug
Bovenaan Onderaan