在HTML设计数据展示的时候会经常使用到HTML表格来展示数据，但是如果数据量过大，就导致表格显示慢，因为在HTML中，表格的显示是需要等待内部所有数据都加载完毕才会显示整个表格，这样对用户体验很不好，比如下面这样：

<table border="10px" width="500px">
            <caption>test</caption>
            <tr>
                <th>加载本地数据</th>
                <th>加载本地数据</th>
                <th>加载本地数据</th>
                <th>加载本地数据</th>
            </tr>
            <tr>
                <td>远程加载数据</td>
                <td>远程加载数据</td>
                <td>远程加载数据</td>
                <td>远程加载数据</td>
            </tr>
            <tr>
                <td>等待远程加载数据后计算数据</td>
                <td>等待远程加载数据后计算数据</td>
                <td>等待远程加载数据后计算数据</td>
                <td>等待远程加载数据后计算数据</td>
            </tr>
        </table>

在html中，有三种标记专门针对html表格进行优化结构化，而不虚要向上面的表格那样需要等待全部数据加载完毕后才能显示表格，而结构化的好处就是当表格加载完一部分就显示完一部分，这三个表示表格结构化的标签为：

1. thead
2. tbody
3. tfoot

在使用过程中，只需要把这三个标签相应的行包含就可以了，使用后对代码的理解也会更加方便，需要注意的是，这三个标签是包含在table标签内的，并且它们的顺序是可以颠倒的，但是它们出现的位置始终是表头、表主体、表脚。

比如向下面这样：

<table border="10px" width="500px">
            <caption>test</caption>
            <thead>
              <tr>
                  <th>加载本地数据</th>
                  <th>加载本地数据</th>
                  <th>加载本地数据</th>
                  <th>加载本地数据</th>
              </tr>
            </thead>
            <tbody>
              <tr>
                  <td>远程加载数据</td>
                  <td>远程加载数据</td>
                  <td>远程加载数据</td>
                  <td>远程加载数据</td>
              </tr>
            </tbody>
            <tfoot>
            <tr>
                <td>等待远程加载数据后计算数据</td>
                <td>等待远程加载数据后计算数据</td>
                <td>等待远程加载数据后计算数据</td>
                <td>等待远程加载数据后计算数据</td>
            </tr>
            </tfoot>
        </table>