<table>  
<thead>
<tbody>
<tr>
<th>
<tr>
<td>
<caption>

<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>

<caption>This is a simple table in bootstrap by .table-hover</caption>            
  <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>

.active   برای اعمال رویداد  hover برای سطر یا ستون مورد نظر 
.success برای نمایش عملی موفقیت آمیز برای سطر یا ستون مورد نظر 
.info جهت نمایش سطر یا ستون حاوی اطلاعات 
.warning نمایش سطر یا ستون مورد نظر در حالت اخطار 
.danger سطر یا ستون مورد نظر در حاوی متن خطر یا منفی

<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>