Page Widget How to - Format table for number and character








Question

We would like to know how to format table for number and character.

Answer


<!DOCTYPE html>
<html>
<head>
<style>
table {<!--   ww  w .j  av  a 2s .  c  om-->
  font-family: arial, verdana, sans-serif;
}

th, td {
  padding: 8px 20px 8px 10px;
  margin: 0px;
}

th {
  border-bottom: 2px solid #000000;
  text-transform: uppercase;
  background-color: #d6d6d6;
  text-align: left;
}

.even {
  background-color: #efefef;
}

.number {
  text-align: right;
}
</style>

</head>

<body>

  <table cellspacing="0">
    <tr class="header">
      <th>Name</th>
      <th>City</th>
      <th>Country</th>
      <th>Stars</th>
      <th>Rates start</th>
      <th>User rating</th>
    </tr>
    <tr>
      <td>The Vaults</td>
      <td>Melbourne</td>
      <td>Australia</td>
      <td class="number">4</td>
      <td class="number">$245</td>
      <td class="number">9/10</td>
    </tr>
    <tr class="even">
      <td>Park Ridge</td>
      <td>Sydney</td>
      <td>Australia</td>
      <td class="number">4</td>
      <td class="number">$212</td>
      <td class="number">8/10</td>
    </tr>
    <tr>
      <td>Ocean View</td>
      <td>Melbourne</td>
      <td>Australia</td>
      <td class="number">5</td>
      <td class="number">$306</td>
      <td class="number">9/10</td>
    </tr>
    <tr class="even">
      <td>V</td>
      <td>Sydney</td>
      <td>Australia</td>
      <td class="number">3</td>
      <td class="number">$160</td>
      <td class="number">6/10</td>
    </tr>
    <tr>
      <td>Mount Lodge</td>
      <td>Adelaide</td>
      <td>Australia</td>
      <td class="number">4</td>
      <td class="number">$260</td>
      <td class="number">6/10</td>
    </tr>
    <tr class="even">
      <td>Estate</td>
      <td>Perth</td>
      <td>Australia</td>
      <td class="number">5</td>
      <td class="number">$340</td>
      <td class="number">7/10</td>
    </tr>
  </table>


</body>
</html>

The code above is rendered as follows: