表格在页面加载完后会自动初始化。对于动态生成的表格，需要调用 mdui.mutation() 进行初始化。
<div class="mdui-table-fluid">
<table class="mdui-table">
<thead>
<tr>
<th>#</th>
<th>First Name</th>
<th>Last Name</th>
<th>Username</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
</tr>
<tr>
<td>2</td>
<td>Jacob</td>
<td>Thornton</td>
<td>@fat</td>
</tr>
<tr>
<td>3</td>
<td>Larry the Bird</td>
<td></td>
<td>@twitter</td>
</tr>
</tbody>
</table>
</div>如果表格宽度过大，可能会导致页面出现横向滚动条。将 .mdui-table 元素包裹在 .mdui-table-fluid 元素内，即可在表格宽度超出页面宽度时，使表格支持水平滚动。
<div class="mdui-table-fluid">
<table class="mdui-table">
...
</table>
</div><div class="mdui-table-fluid">
<table class="mdui-table mdui-table-hoverable">
<thead>
<tr>
<th>#</th>
<th>First Name</th>
<th>Last Name</th>
<th>Username</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
</tr>
<tr>
<td>2</td>
<td>Jacob</td>
<td>Thornton</td>
<td>@fat</td>
</tr>
<tr>
<td>3</td>
<td>Larry the Bird</td>
<td></td>
<td>@twitter</td>
</tr>
</tbody>
</table>
</div>按照 Material Design 的规范，应该把表格中的文本列左对齐，数值列右对齐。
MDUI 中表格列默认使用左对齐，在数值列的 <th> 标签上添加类 .mdui-table-col-numeric 即可使该列向右对齐。
<div class="mdui-table-fluid">
<table class="mdui-table">
<thead>
<tr>
<th>#</th>
<th>First Name</th>
<th>Last Name</th>
<th class="mdui-table-col-numeric">age</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Mark</td>
<td>Otto</td>
<td>18</td>
</tr>
<tr>
<td>2</td>
<td>Jacob</td>
<td>Thornton</td>
<td>21</td>
</tr>
<tr>
<td>3</td>
<td>Larry the Bird</td>
<td></td>
<td>9</td>
</tr>
</tbody>
</table>
</div>在 .mdui-table 元素上添加类 .mdui-table-selectable 即可在每一行的前面添加一个复选框。
选中复选框后，会在该行的 <tr> 元素上添加类 .mdui-table-row-selected。
也可以预先在 <tr> 元素上添加类 .mdui-table-row-selected，使该行处于默认选中状态。
<div class="mdui-table-fluid">
<table class="mdui-table mdui-table-selectable">
<thead>
<tr>
<th>Dessert (100g serving)</th>
<th class="mdui-table-col-numeric" mdui-tooltip="{content: 'The total amount of food energy in the given serving size.'}">Calories</th>
<th class="mdui-table-col-numeric">Fat (g)</th>
<th class="mdui-table-col-numeric">Carbs (g)</th>
<th class="mdui-table-col-numeric">Protein (g)</th>
<th class="mdui-table-col-numeric">Sodium (mg)</th>
<th class="mdui-table-col-numeric" mdui-tooltip="{content: 'The amount of calcium as a percentage of the recommended daily amount.'}">Calclum (%)</th>
<th class="mdui-table-col-numeric">Lron (%)</th>
</tr>
</thead>
<tbody>
<tr class="mdui-table-row-selected">
<td>Frozen yogurt</td>
<td>159</td>
<td>6.0</td>
<td>24</td>
<td>4.0</td>
<td>87</td>
<td>14%</td>
<td>1%</td>
</tr>
<tr>
<td>Ice cream sandwich</td>
<td>237</td>
<td>9.0</td>
<td>37</td>
<td>4.3</td>
<td>129</td>
<td>8%</td>
<td>1%</td>
</tr>
<tr>
<td>Eclair</td>
<td>262</td>
<td>16.0</td>
<td>24</td>
<td>6.0</td>
<td>337</td>
<td>6%</td>
<td>7%</td>
</tr>
</tbody>
</table>
</div>如果你的表格是动态生成的，则需要调用 mdui.mutation() 进行初始化。
如果你动态修改了表格属性，则需要调用 mdui.updateTables() 方法来重新初始化表格。该方法可以接受一个含 <table class="mdui-table"> 元素的 CSS 选择器、或者 DOM 元素、或者 DOM 元素组成的数组作为参数，表示只重新初始化指定的表格。如果没有传入参数，则将重新初始化页面中所有的表格。