HTML Element Style How to - Add background to table header

Question

We would like to know how to add background to table header.

Answer


<!DOCTYPE html>
<html>
<head>
<style type='text/css'>
table {<!--   w  ww. jav a 2  s  . c  om-->
  width: 100%;
  border: 4px solid gray;
  padding: 2px;
}

thead {
  background-color: gray;
}

td {
  padding: 2px;
}

th {
  padding: 0 2px 5px;
  line-height: 15px;
}
</style>
</head>
<body>
  <table>
    <thead>
      <tr>
        <th>Month</th>
        <th>Amount</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>January</td>
        <td>$100</td>
      </tr>
      <tr>
        <td>February</td>
        <td>$200</td>
      </tr>
    </tbody>
  </table>
</body>
</html>

The code above is rendered as follows: