materiaisTable.html

<!-- Básicona -->
<div class='table-wrapper'>
    <table class='table-pattern center table-smaller'>
        <thead> <tr> <th>a</th> <th>a</th> <th>a</th> </tr> </thead>
        <tr> <td> a </td> <td> a </td> <td> a </td> </tr>
    </table>
    <div class="table-caption">Fonte: Univates (xxxx).</div>
</div>

<!-- Primeira coluna com destaque -->
<div class='table-wrapper'>
    <table class='table-pattern center table-smaller'>
        <thead> <tr> <th class='white-celula white'>a</th> <th>a</th> <th>a</th> </tr> </thead>
        <tr> <td> a </td> <td> a </td> <td> a </td> </tr>
    </table>
    <div class="table-caption">Fonte: Univates (xxxx).</div>
</div>

<!-- Multiplas linhas coladas-->
<div class='table-wrapper'>
    <table class='table-pattern center table-smaller'>
        <thead> <tr> <th>a</th> <th>a</th> <th>a</th> </tr> </thead>
        <tr> <td> a </td> <td> a </td> <td> a </td> </tr>
        <tr> <td rowspan='2'> a </td> <td rowspan='2'> a </td> <td> a </td> </tr>
        <tr> <td> a </td> </tr>
    </table>
    <div class="table-caption">Fonte: Univates (xxxx).</div>
</div>

<!-- Muitos colsopans -->
<div class="table-wrapper">
<table class="table-pattern center table-smaller" style="height: 377px;">
<thead>
<tr style="height: 40px;">
<th style="height: 40px;">a</th>
<th colspan="2" style="height: 40px;">a</th>
</tr>
</thead>
<tbody>
<tr style="height: 31px;">
<td style="height: 31px;">a</td>
<td style="height: 31px;">a</td>
<td style="height: 31px;">a</td>
</tr>
</tbody>
<thead>
<tr style="height: 40px;">
<th style="height: 40px;">a</th>
<th colspan="2" style="height: 40px;">a</th>
</tr>
</thead>
<tbody>
<tr style="height: 31px;">
<td style="height: 31px;">a</td>
<td style="height: 31px;">a</td>
<td style="height: 31px;">a</td>
</tr>
</tbody>
<thead>
<tr style="height: 40px;">
<th style="height: 40px;">a</th>
<th colspan="2" style="height: 40px;">a</th>
</tr>
</thead>
<tbody>
<tr style="height: 31px;">
<td style="height: 31px;">a</td>
<td style="height: 31px;">a</td>
<td style="height: 31px;">a</td>
</tr>
</tbody>
<thead>
<tr style="height: 40px;">
<th style="height: 40px;">a</th>
<th colspan="2" style="height: 40px;">a</th>
</tr>
</thead>
<tbody>
<tr style="height: 31px;">
<td style="height: 31px;">a</td>
<td style="height: 31px;">a</td>
<td style="height: 31px;">a</td>
</tr>
<tr style="height: 31px;">
<td style="height: 31px;">a</td>
<td colspan="2" style="height: 31px;">a</td>
</tr>
<tr style="height: 31px;">
<td style="height: 31px;">a</td>
<td colspan="2" style="height: 31px;">a</td>
</tr>
<tr style="height: 31px;">
<td style="height: 31px;">a</td>
<td style="height: 31px;">a</td>
<td style="height: 31px;">a</td>
</tr>
</tbody>
</table>
<div class="table-caption">Fonte: Univates (xxxx).</div>
</div>