جدول (table) در بوتسترپ (Bootstrap)

 <caption>This is a simple table in bootstrap</caption>            
  <table class="table">
    <thead>
      <tr>
        <th>Name</th>
        <th>Family</th>
        <th>Email</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Alireza</td>
        <td>Hatami</td>
        <td>alireza.hataminia@yahoo.com</td>
      </tr>
      <tr>
        <td>abbas</td>
        <td>habibi</td>
        <td>abbas@example.com</td>
      </tr>
      <tr>
        <td>javad</td>
        <td>hashemi</td>
        <td>hashemi@example.com</td>
      </tr>
    </tbody>
  </table>

 <caption>This is a simple table in bootstrap by table-striped</caption>            
  <table class="table table-striped">
    <thead>
      <tr>
        <th>Name</th>
        <th>Family</th>
        <th>Email</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Alireza</td>
        <td>Hatami</td>
        <td>alireza.hataminia@yahoo.com</td>
      </tr>
      <tr>
        <td>abbas</td>
        <td>habibi</td>
        <td>abbas@example.com</td>
      </tr>
      <tr>
        <td>javad</td>
        <td>hashemi</td>
        <td>hashemi@example.com</td>
      </tr>
    </tbody>
  </table>

 <caption>This is a simple table in bootstrap by .table-bordered</caption>            
  <table class="table table-bordered">
    <thead>
      <tr>
        <th>Name</th>
        <th>Family</th>
        <th>Email</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Alireza</td>
        <td>Hatami</td>
        <td>alireza.hataminia@yahoo.com</td>
      </tr>
      <tr>
        <td>abbas</td>
        <td>habibi</td>
        <td>abbas@example.com</td>
      </tr>
      <tr>
        <td>javad</td>
        <td>hashemi</td>
        <td>hashemi@example.com</td>
      </tr>
    </tbody>
  </table>

 <table class="table table-hover">
    <thead>
      <tr>
        <th>Name</th>
        <th>Family</th>
        <th>Email</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Alireza</td>
        <td>Hatami</td>
        <td>alireza.hataminia@yahoo.com</td>
      </tr>
      <tr>
        <td>abbas</td>
        <td>habibi</td>
        <td>abbas@example.com</td>
      </tr>
      <tr>
        <td>javad</td>
        <td>hashemi</td>
        <td>hashemi@example.com</td>
      </tr>
    </tbody>
  </table>

 <caption>This is a simple table in bootstrap by .table-condensed</caption>            
  <table class="table table-condensed">
    <thead>
      <tr>
        <th>Name</th>
        <th>Family</th>
        <th>Email</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Alireza</td>
        <td>Hatami</td>
        <td>alireza.hataminia@yahoo.com</td>
      </tr>
      <tr>
        <td>abbas</td>
        <td>habibi</td>
        <td>abbas@example.com</td>
      </tr>
      <tr>
        <td>javad</td>
        <td>hashemi</td>
        <td>hashemi@example.com</td>
      </tr>
    </tbody>
  </table>

 <caption>This is a simple table in bootstrap by Contextual Table classess</caption>            
  <table class="table">
    <thead>
      <tr>
        <th>Contextual Table</th>
      </tr>
    </thead>
    <tbody>
      <tr class="active">
        <td>show active class</td>
      </tr>
      <tr class="success">
        <td>show  success class</td>
      </tr>
      <tr class="info">
        <td>show info class</td>
      </tr>
      <tr class="warning">
        <td>show warning class</td>
      </tr>
      <tr class="danger">
        <td>show danger class</td>
      </tr>
    </tbody>
  </table>

 <div class = "table-responsive">
<table class = "table">
.
.
.
</table>
</div>