1、表格简介
表格是十分常用的页面元素，尤其是做后台管理系统的时候，需要显示出管理员需要的信息，以表格形式显示时，十分清楚直接。
表格标签
菜鸟教程-HTML表格.png
基本格式
<table border="1"> <!--边框1像素--> <tr> <th>表头1</th> <th>表头2</th> </tr> <tr> <td>第一行第一列</td> <td>第一行第二列</td> </tr> <tr> <td>第二行第一列</td> <td>第二行第二列</td> </tr> </table>效果图
image.png
2、layui表格元素基本使用
观察到上面的表格比较low，我们使用layui提供的表格试一试。
（1）为table标签加上
class="layui-table"即可。<table border="1" class="layui-table"> <!--边框1像素--> <tr> <th>表头1</th> <th>表头2</th> </tr> <tr> <td>第一行第一列</td> <td>第一行第二列</td> </tr> <tr> <td>第二行第一列</td> <td>第二行第二列</td> </tr> </table>效果图
image.png（2）添加<thead></thead>和<tbody></tbody>
这时候发现表格的基本样式已经有了，默认将表格放大到页面宽度最大，鼠标移上去也有了不同的效果。但是表头和表体并没有做出区分，看上去没有主次，我们只要将表头和表体分别用<thead></thead>和<tbody></tbody>包起来就可以实现layui默认设定的效果（也可以添加style=""等属性改颜色、边框等）
<table border="1" class="layui-table"> <!--边框1像素--> <thead> <tr > <!--style="background-color: #009F95;"--> <th>表头1</th> <th>表头2</th> </tr> </thead> <tbody> <tr> <td>第一行第一列</td> <td>第一行第二列</td> </tr> <tr> <td>第二行第一列</td> <td>第二行第二列</td> </tr> </tbody> </table>效果图
image.png
3、进阶使用
所谓进阶使用就是一些layui封装好的一些属性（尺寸风格）我们直接用就行。
用法：将你所需要的基础属性写在table标签上即可。
image.png
lay-even
默认表格表头是淡灰色，表体都是白色，添加这个属性之后，淡灰色、白色交替布置。
<table border="1" class="layui-table" >
image.png
lay-skin=""
<table border="1" class="layui-table" lay-skin="line" >
image.png
lay-size=""
image.png
4、<colgroup>的使用
<colgroup> 标签用于对表格中的列进行组合，以便对其进行格式化。（支持html全局属性和事件属性）
有的属性h5不支持了.png
使用
如果想对 <colgroup> 中的某列定义不同的属性，请在 <colgroup> 标签内使用 <col>
(1)<col>是有顺序关系的，第一个<col>则代表第一列（默认span="1"）
(2)width属性在h5中不支持了，所以我们还是用style吧！
(3)如何同时选中几个列，span来帮您，span="2"代表横跨两个列（即此<col>作用范围为2，就是一共2列被当前<col>中属性修饰）
(4)<col >默认自适应宽度<colgroup> <col span="2" style="width: 800px"> <col span="2" style="background-color: #00F7DE;"> <col > </colgroup>举个栗子！
<table class="layui-table" style="margin: 100px auto;width: 1000px;"> <colgroup> <col span="2" style="width: 200px"> <col style="background-color: #009688;"> </colgroup> <thead> <tr> <th>姓名</th> <th>联系电话</th> <th>住址</th> </tr> </thead> <tbody> <tr> <td>老张</td> <td>13100001111</td> <td>张家屯250号</td> </tr> <tr> <td>老李</td> <td>15100001111</td> <td>李家村250号</td> </tr> </tbody> </table>效果图
image.png
