<table class="table-responsive" style="width:100%" align="left">
  <thead>
    <tr>
      <th scope="col">Name</th>
      <th scope="col">Registration date</th>
      <th scope="col">Email</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>John</td>
      <td>September, 14, 2010</td>
      <td><a href="mailto:ciccio@baciccio.com">ciccio@baciccio.com</a></td>
    </tr>
    <tr>
      <td>John</td>
      <td>
        <p>September, 14, 2010</p>
      </td>
      <td><a href="mailto:ciccio@baciccio.com">ciccio@baciccio.com</a></td>
    </tr>
    <tr>
      <td>John</td>
      <td>
        <p>September, 14, 2010</p>
      </td>
      <td><a href="mailto:ciccio@baciccio.com">ciccio@baciccio.com</a></td>
    </tr>
  </tbody>
</table>

<div class="styleguide-example">
  <p>Default table with an empty heading</p>
</div>

<table class="table-responsive" style="width:100%" align="left">
  <thead>
    <tr>
      <th scope="col"></th>
      <th scope="col">Registration date</th>
      <th scope="col">Email</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>John</td>
      <td>September, 14, 2010</td>
      <td><a href="mailto:ciccio@baciccio.com">ciccio@baciccio.com</a></td>
    </tr>
    <tr>
      <td>John</td>
      <td>
        <p>September, 14, 2010</p>
      </td>
      <td><a href="mailto:ciccio@baciccio.com">ciccio@baciccio.com</a></td>
    </tr>
    <tr>
      <td>John</td>
      <td>
        <p>September, 14, 2010</p>
      </td>
      <td><a href="mailto:ciccio@baciccio.com">ciccio@baciccio.com</a></td>
    </tr>
  </tbody>
</table>

<div class="styleguide-example">
  <p>Tables with colspan, three examples with the colspan grouping different coumns.</p>
</div>

<table class="table-responsive" style="width:100%" summary="test summary" align="left">
  <caption>
    <p>test caption</p>
  </caption>
  <thead>
    <tr>
      <th rowspan="2" scope="col">Name</th>
      <th rowspan="2" scope="col">Registration date</th>
      <th colspan="3" scope="col">Language</th>
    </tr>
    <tr>
      <th scope="col">english</th>
      <th scope="col">french</th>
      <th scope="col">german</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>John</td>
      <td>September, 14 2013</td>
      <td>
        <p>Yes</p>
      </td>
      <td>No</td>
      <td>No</td>
    </tr>
    <tr>
      <td>John</td>
      <td>
        <p>September, 14 2013</p>
      </td>
      <td>No</td>
      <td>Yes</td>
      <td>Yes</td>
    </tr>
    <tr>
      <td>John</td>
      <td>September, 14 2013</td>
      <td>
        <p>Yes</p>
      </td>
      <td>No</td>
      <td>No</td>
    </tr>
  </tbody>
</table>

<table class="table-responsive" style="width:100%" align="left">
  <thead>
    <tr>
      <th colspan="2" scope="col">Name</th>
      <th rowspan="2" scope="col">Registration date</th>
      <th rowspan="2" scope="col">Country</th>
      <th rowspan="2" scope="col">Telephone</th>
    </tr>
    <tr>
      <th scope="col">First name</th>
      <th scope="col">Last name</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Paolo</td>
      <td>Ferrari</td>
      <td>13 Spetemper 2015</td>
      <td>Italy</td>
      <td>063298234234</td>
    </tr>
    <tr>
      <td>Marco</td>
      <td>Ciauscolo</td>
      <td>12 October 2013</td>
      <td>Switzerland</td>
      <td>235245662346</td>
    </tr>
  </tbody>
</table>

<table class="table-responsive" style="width:100%" align="left">
  <thead>
    <tr>
      <th rowspan="2" scope="col">Name</th>
      <th colspan="2" scope="col">Country/City</th>
      <th rowspan="2" scope="col">Profession</th>
      <th rowspan="2" scope="col">Telephone</th>
    </tr>
    <tr>
      <th scope="col">country</th>
      <th scope="col">city</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>John</td>
      <td>England</td>
      <td>London</td>
      <td>Student</td>
      <td>2342345346</td>
    </tr>
    <tr>
      <td>Jim</td>
      <td>Ireland</td>
      <td>Dublin</td>
      <td>Mechanic</td>
      <td>23523629365</td>
    </tr>
    <tr>
      <td>Franco</td>
      <td>Italy</td>
      <td>Bari</td>
      <td>Plumber</td>
      <td>239238602936</td>
    </tr>
  </tbody>
</table>

<div class="styleguide-example">
  <p>Table with colspan and empty header.</p>
</div>

<table class="table-responsive" style="width:100%" summary="test summary" align="left">
  <caption>
    <p>test caption</p>
  </caption>
  <thead>
    <tr>
      <th rowspan="2" scope="col"></th>
      <th rowspan="2" scope="col">Registration date</th>
      <th colspan="3" scope="col">Language</th>
    </tr>
    <tr>
      <th scope="col">english</th>
      <th scope="col">french</th>
      <th scope="col">german</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>John</td>
      <td>September, 14 2013</td>
      <td>
        <p>Yes</p>
      </td>
      <td>No</td>
      <td>No</td>
    </tr>
    <tr>
      <td>John</td>
      <td>
        <p>September, 14 2013</p>
      </td>
      <td>No</td>
      <td>Yes</td>
      <td>Yes</td>
    </tr>
    <tr>
      <td>John</td>
      <td>September, 14 2013</td>
      <td>
        <p>Yes</p>
      </td>
      <td>No</td>
      <td>No</td>
    </tr>
  </tbody>
</table>