HTML Table with CSS Styling Example

Here is the table:-

Available Roles
Role Code Role Description
Code1 Description 1
Code2 Description 2

Here is the HTML/CSS which will produce the above table:-

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
   <style>
      body, table {
          font-family: Arial, Helvetica, sans-serif;
          font-size: 90%;
          color: #000000;
      }   
      table, th, tr, td {
         border-collapse: collapse;
         border: 2px solid #708090;
      }
      th, tr, td {
         border-width: 1px;
      }
      tr.TableHeader {
         background-color:#b0c4de;
      }
      tr.ColumnHeader {
         background-color:#d8bfd8;
      }   
      td {
         background-color: #fafad2;
      }
   </style>
</head>
<body>
   <table id="AvailableRoles" width="300" class="Table">
   <tr class="TableHeader"><th colspan="2">Available Roles</th></tr>
   <tr class="ColumnHeader">
   <th>Role Code</th>
   <th>Role Description</th>
   </tr>
   <tr>
   <td>Code1</td>
   <td>Description 1</td>
   </tr>
   <tr>
   <td>Code2</td>
   <td>Description 2</td>
   </tr>
   </table>
</body>
</html>