html表格合并-浅分类页面更好看

表格单元格合并功能对某些页面比较有用，比如分类的时候可以显示上下级关系（分类级数不高时），数据统计时也可以进行直观显示。

rowspan （表格单元横跨的表格）和colspan（表格单元纵跨的表格：）是关键。

实例代码如下：

<table class="table table-border table-bordered table-bg text-c">
        <tbody><tr class="text-c">
            <th>一级分类</th>
            <th>分类名称</th>
            <th>分类排序</th>
            <th>当前状态</th>
            <th>操作</th><th>
        </th></tr>

                <tr class="text-c">
            <td rowspan="1">视频教程</td>
            <td>视频教程</td>
            <td>1</td>
            <td><span class="label label-default radius">已禁用</span></td>
            <td class="td-manage">
                <a title="编辑" href="javascript:" onclick="edit('8','视频教程','1','1','0')" class="ml-5" style="text-decoration:none"><i class="Hui-iconfont"></i></a>
                <a title="删除" href="javascript:" onclick="del(this,'8')" class="ml-5 c-red" style="text-decoration:none"><i class="Hui-iconfont"></i></a>
            </td>
        </tr>
                <tr class="text-c">
            <td rowspan="4">图文教程</td>
            <td>图文教程</td>
            <td>1</td>
            <td><span class="label label-success radius">已启用</span></td>
            <td class="td-manage">
                <a title="编辑" href="javascript:" onclick="edit('7','图文教程','1','0','0')" class="ml-5" style="text-decoration:none"><i class="Hui-iconfont"></i></a>
                <a title="删除" href="javascript:" onclick="del(this,'7')" class="ml-5 c-red" style="text-decoration:none"><i class="Hui-iconfont"></i></a>
            </td>
        </tr>
                <tr class="text-c">
            <td>基础教程</td>
            <td>0</td>
            <td><span class="label label-success radius">已启用</span></td>
            <td class="td-manage">
                <a title="编辑" href="javascript:" onclick="edit('4','基础教程','0','0','7')" class="ml-5" style="text-decoration:none"><i class="Hui-iconfont"></i></a>
                <a title="删除" href="javascript:" onclick="del(this,'4')" class="ml-5 c-red" style="text-decoration:none"><i class="Hui-iconfont"></i></a>
            </td>
        </tr>
                    <tr class="text-c">
            <td>进阶教程</td>
            <td>0</td>
            <td><span class="label label-success radius">已启用</span></td>
            <td class="td-manage">
                <a title="编辑" href="javascript:" onclick="edit('2','进阶教程','0','0','7')" class="ml-5" style="text-decoration:none"><i class="Hui-iconfont"></i></a>
                <a title="删除" href="javascript:" onclick="del(this,'2')" class="ml-5 c-red" style="text-decoration:none"><i class="Hui-iconfont"></i></a>
            </td>
        </tr>
                    <tr class="text-c">
            <td>入门教程</td>
            <td>1</td>
            <td><span class="label label-success radius">已启用</span></td>
            <td class="td-manage">
                <a title="编辑" href="javascript:" onclick="edit('1','入门教程','1','0','7')" class="ml-5" style="text-decoration:none"><i class="Hui-iconfont"></i></a>
                <a title="删除" href="javascript:" onclick="del(this,'1')" class="ml-5 c-red" style="text-decoration:none"><i class="Hui-iconfont"></i></a>
            </td>
        </tr>
                </tbody></table>