Data tables

One header - Row

Name City Twitter
Toufic Ottawa @TouficSbeiti
Pierre Gatineau @duboi5p
Source Code
<table>
	<tr>
		<th>Name</th>
		<th>City</th>
		<th>Twitter</th>
	</tr>
	<tr>
		<td>Toufic</td>
		<td>Ottawa</td>
		<td>@TouficSbeiti</td>
	</tr>
	<tr>
		<td>Pierre</td>
		<td>Gatineau</td>
		<td>@duboi5p</td>
	</tr>
</table>

One header - Column

Name Toufic Pierre
City Ottawa Gatineau
Twitter @TouficSbeiti @duboi5p
Source Code
<table>
	<tr>
		<th>Name</th>
		<td>Toufic</td>
		<td>Pierre</td>
	</tr>
	<tr>
		<th>City</th>
		<td>Ottawa</td>
		<td>Gatineau</td>
	</tr>
	<tr>
		<th>Twitter</th>
		<td>@TouficSbeiti</td>
		<td>@duboi5p</td>
	</tr>
</table>

Two headers

Name City Twitter
Toufic Ottawa @TouficSbeiti
Pierre Gatineau @duboi5p
Source Code
<table>
	<tr>
		<th>Name</th>
		<th>City</th>
		<th>Twitter</th>
	</tr>
	<tr>
		<th>Toufic</th>
		<td>Ottawa</td>
		<td>@TouficSbeiti</td>
	</tr>
	<tr>
		<th>Pierre</th>
		<td>Gatineau</td>
		<td>@duboi5p</td>
	</tr>
</table>

Two tier headers - Column

Mars Venus
Produced Sold Produced Sold
Teddy Bears 50,000 30,000 100,000 80,000
Board Games 10,000 5,000 12,000 9,000
Source Code
<table class="table table-bordered">
  <colgroup>
	<col />
  </colgroup>
  <colgroup>
	<col />
	<col />
  </colgroup>
  <colgroup span="2"></colgroup>
  <tr>
    <td rowspan="2"></td>
    <th colspan="2" scope="colgroup">Mars</th>
    <th colspan="2" scope="colgroup">Venus</th>
  </tr>
  <tr>
    <th scope="col">Produced</th>
    <th scope="col">Sold</th>
    <th scope="col">Produced</th>
    <th scope="col">Sold</th>
  </tr>
  <tr>
    <th scope="row">Teddy Bears</th>
    <td>50,000</td>
    <td>30,000</td>
    <td>100,000</td>
    <td>80,000</td>
  </tr>
  <tr>
    <th scope="row">Board Games</th>
    <td>10,000</td>
    <td>5,000</td>
    <td>12,000</td>
    <td>9,000</td>
  </tr>
</table>

Two tier headers - Row

Poster name Color Quantity of
Classic
Quantity of
Modern
Quantity of
Futuristic
WxT Full color 65 24 15
Black and white 12 66 48
Sepia 25 26 24
Canada Full color 74 48 86
Sepia 71 55 66
Source Code
<table>
  <thead>
    <tr>
      <th scope="col">Poster name</th>
      <th scope="col">Color</th>
      <th scope="col">Quantity of <br />Classic</th>
      <th scope="col">Quantity of <br />Modern</th>
      <th scope="col">Quantity of <br />Futuristic</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th rowspan="3" scope="rowgroup">WxT</th>
      <th scope="row">Full color</th>
      <td>65</td>
      <td>24</td>
      <td>15</td>
    </tr>
    <tr>
      <th scope="row">Black and white</th>
      <td>12</td>
      <td>66</td>
      <td>48</td>
    </tr>
    <tr>
      <th scope="row">Sepia</th>
      <td>25</td>
      <td>26</td>
      <td>24</td>
    </tr>
  </tbody>
  <tbody>
    <tr>
      <th rowspan="2" scope="rowgroup">Canada</th>
      <th scope="row">Full color</th>
      <td>74</td>
      <td>48</td>
      <td>86</td>
    </tr>
    <tr>
      <th scope="row">Sepia</th>
      <td>71</td>
      <td>55</td>
      <td>66</td>
    </tr>
  </tbody>
</table>

Specific number of headers related to each data cell

Quantity of poster
Classic Modern Futuristic
WxT
Full color 65 24 15
Black and white 12 66 48
Sepia 25 26 24
Canada
Full color 74 48 86
Sepia 71 55 66
Source Code
<table>
  <caption>Quantity of poster</caption>
  <thead>
    <tr>
      <td></td>
      <th scope="col">Classic</th>
      <th scope="col">Modern</th>
      <th scope="col">Futuristic</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th colspan="4" scope="rowgroup">WxT</th>
	</tr>
	<tr>
      <th scope="row">Full color</th>
      <td>65</td>
      <td>24</td>
      <td>15</td>
    </tr>
    <tr>
      <th scope="row">Black and white</th>
      <td>12</td>
      <td>66</td>
      <td>48</td>
    </tr>
    <tr>
      <th scope="row">Sepia</th>
      <td>25</td>
      <td>26</td>
      <td>24</td>
    </tr>
  </tbody>
  <tbody>
    <tr>
      <th colspan="4" scope="rowgroup">Canada</th>
	</tr>
	<tr>
      <th scope="row">Full color</th>
      <td>74</td>
      <td>48</td>
      <td>86</td>
    </tr>
    <tr>
      <th scope="row">Sepia</th>
      <td>71</td>
      <td>55</td>
      <td>66</td>
    </tr>
  </tbody>
</table>

Various number of headers related to each data cell

Quantity of poster
Classic Modern Futuristic
WxT
Full color 65 24 15
Economic Black and white 12 66 48
Sepia 25 26 24
Canada
Full color 74 48 86
Economic Sepia 71 55 66
Source Code
<table>
  <caption>Quantity of poster</caption><colgroup><col /><col /></colgroup><colgroup><col /><col /><col /></colgroup>
  <thead>
    <tr>
      <td colspan="2">Color</td>
      <th id="tbl6">Classic</th>
      <th id="tbl7">Modern</th>
      <th id="tbl8">Futuristic</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th id="tbl12" colspan="5">WxT</th>
	</tr>
	<tr>
      <th headers="tbl12" id="tbl15" colspan="2">Full color</th>
      <td headers="tbl6 tbl12 tbl15">65</td>
      <td headers="tbl7 tbl12 tbl15">24</td>
      <td headers="tbl8 tbl12 tbl15">15</td>
    </tr>
    <tr>
	  <th headers="tbl12" id="tbl29" rowspan="2">Economic</th>
      <th headers="tbl12 tbl29" id="tbl30">Black and white</th>
      <td headers="tbl6 tbl12 tbl29 tbl30">12</td>
      <td headers="tbl7 tbl12 tbl29 tbl30">66</td>
      <td headers="tbl8 tbl12 tbl29 tbl30">48</td>
    </tr>
    <tr>
      <th headers="tbl12" id="tbl37">Sepia</th>
      <td headers="tbl6 tbl12 tbl29 tbl37">25</td>
      <td headers="tbl7 tbl12 tbl29 tbl37">26</td>
      <td headers="tbl8 tbl12 tbl29 tbl37">24</td>
    </tr>
  </tbody>
  <tbody>
    <tr>
      <th id="tbl45" colspan="5">Canada</th>
	</tr>
	<tr>
      <th headers="tbl45" id="tbl48" colspan="2">Full color</th>
      <td headers="tbl6 tbl45 tbl48">74</td>
      <td headers="tbl7 tbl45 tbl48">48</td>
      <td headers="tbl8 tbl45 tbl48">86</td>
    </tr>
    <tr>
	  <th headers="tbl45" id="tbl55">Economic</th>
      <th headers="tbl45 tbl55" id="tbl56">Sepia</th>
      <td headers="tbl6 tbl45 tbl55 tbl56">71</td>
      <td headers="tbl7 tbl45 tbl55 tbl56">55</td>
      <td headers="tbl8 tbl45 tbl55 tbl56">66</td>
    </tr>
  </tbody>
</table>