Gmail Like Layout

by Otobong Okoko

HTML

<table cellpadding="0" cellspacing="0">
  <thead>
    <tr>
      <th>Image</th>
      <th>Name</th>
      <th>Email</th>
      <th>Phone</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>
        <div class="icon_div"><a class="user_icon" style="background-color:#FF59AC">OO</a></div>
      </td>
      <td>Otobong Okoko</td>
      <td>[email protected]</td>
      <td>2347034567890</td>
    </tr>
    <tr>
      <td>
        <div class="icon_div"><a class="user_icon" style="background-color:#0495C2">EO</a></div>
      </td>
      <td>Ejio Okoko</td>
      <td>[email protected]</td>
      <td>2347034567890</td>
    </tr>
    <tr>
      <td>
        <div class="icon_div"><a class="user_icon" style="background-color:#488957">OO</a></div>
      </td>
      <td>Oku Okoko</td>
      <td>[email protected]</td>
      <td>2347034567890</td>
    </tr>
    <tr>
      <td>
        <div class="icon_div"><a class="user_icon" style="background-color:#0F3353">AO</a></div>
      </td>
      <td>Anita Okoko</td>
      <td>[email protected]</td>
      <td>2347034567890</td>
    </tr>
  </tbody>
</table>

CSS

body{font-family: arial; font-size: 14px;}
.list_box{width:600px; margin:0 auto; margin-top:40px;}
.list_box table{width: 100%; margin: 0px; padding: 0px; font-size: 14px; border: 1px solid #e7e7e7;}
.list_box table thead tr{background-color: #305891;}
.list_box table thead tr th{padding: 7px 5px; color: #fff; font-weight: normal; text-align: left;}
.list_box table tbody tr td{padding: 5px; color: #000; font-weight: normal;}
.list_box table tbody tr:nth-child(even){background-color: #F5F5F5;}
.icon_div{width: 100%; clear: both; height: 45px;}
.user_icon{border-radius: 50%;text-align: center;color: #fff;padding: 15px;text-transform: uppercase; position: absolute;}