[CSS] Striped table

[raf]

Easy way to dump PHP way of switching background colors for rows in table.

That's how we used to do that:

<table width="500px">
  <thead>
    <tr bgcolor="'.$config['site']['vdarkborder'].'">
      <th>Name</th>
      <th>Level</th>
    </tr>
  </thead>
  <tbody>
    <tr bgcolor="'.(is_int($i / 2) ? $config['site']['darkborder'] : $config['site']['lightborder']).'">
      <td>John</td>
      <td>153</td>
    </tr>
    <tr bgcolor="'.(is_int($i / 2) ? $config['site']['darkborder'] : $config['site']['lightborder']).'">
      <td>Alice</td>
      <td>73</td>
    </tr>
    <tr bgcolor="'.(is_int($i / 2) ? $config['site']['darkborder'] : $config['site']['lightborder']).'">
      <td>Robert</td>
      <td>302</td>
    </tr>
    <tr bgcolor="'.(is_int($i / 2) ? $config['site']['darkborder'] : $config['site']['lightborder']).'">
      <td>Bob</td>
      <td>122</td>
    </tr>
  </tbody>
</table>

Now you would do it like this :

<table class="table-striped" width="500px">
  <thead>
    <tr>
      <th>Name</th>
      <th>Level</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>John</td>
      <td>153</td>
    </tr>
    <tr>
      <td>Alice</td>
      <td>73</td>
    </tr>
    <tr>
      <td>Robert</td>
      <td>302</td>
    </tr>
    <tr>
      <td>Bob</td>
      <td>122</td>
    </tr>
  </tbody>
</table>

And you only have to add few lines of CSS

.table-striped {
    background-color: #F1E0C6;
}
.table-striped thead>tr>th {
    color: #fff;
    font-weight: bold;
    background: #212121;
}
.table-striped tbody tr:nth-of-type(odd) {
    background-color: #d4c0a1;
}

Here's how it looks like.