Data tables
One header - Row
| Name | City | |
|---|---|---|
| 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 |
| @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 | |
|---|---|---|
| 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
| 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
| 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>