html的table复杂布局

HTML的table布局

table的布局主要是利用 tr(行) 和 td(列)。布局是行(tr)开始开展，从上到下进行 行 的布局，从左到右进行 列 的布局。

1.png

开始布局(从上到下，从左到右)：

第一行：

// 从行开始 
<tr>
    //从上到下，从左到右
    //rowspan的计算是根据 资源调配 这一行中 从上到下最多有多少列 取值
    <td rowspan="16">资源调配</td>
    //colspan的计算是根据 人员 这一行中 从上到下最多有多少行 取值
    <td rowspan="7">人员</td>
    <td>技术负责人</td>
    <td>配备岗位</td>
    <td>参与人员</td>
</tr>

第二行：

// 从左到右
<tr>
 //因为在 资源调配 这一行中，已经取过了 资源调配(蓝色框)和人员的列了，所以这一行是从技术负责人下的空白框开始
 <td rowspan="6"></td>
 <td>产品</td>
 <td></td>
</tr>

按照这个思路进行就可以了。

完整代码：

          <tr>
            <th rowspan="16" colspan="1">资源调配</th>
            <th rowspan="7" colspan="1">人员</th>
            <th colspan="2">技术负责人</th>
            <th colspan="2">配备岗位</th>
            <th colspan="6">参与人员</th>
          </tr>
          <tr>
            <td rowspan="6" colspan="2"></td>
            <td colspan="2">产品</td>
            <td colspan="6"></td>
          </tr>
          <tr>
            <td colspan="2">前端</td>
            <td colspan="6"></td>
          </tr>
          <tr>
            <td colspan="2">后端</td>
            <td colspan="6"></td>
          </tr>
          <tr>
            <td colspan="2">测试</td>
            <td colspan="6"></td>
          </tr>
          <tr>
            <td colspan="2">运维</td>
            <td colspan="6"></td>
          </tr>
          <tr>
            <td colspan="2">其它</td>
            <td colspan="6"></td>
          </tr>
          <tr>
            <th rowspan="9" colspan="1">运维</th>
            <th colspan="2">运维项目名称</th>
            <th colspan="3">运维支持</th>
            <th colspan="2">规格配置</th>
            <th colspan="3">备注</th>
          </tr>
          <tr>
            <td colspan="2">服务器</td>
            <td colspan="3"></td>
            <td colspan="2"></td>
            <td colspan="3"></td>
          </tr>
          <tr>
            <td colspan="2">redis</td>
            <td colspan="3"></td>
            <td colspan="2"></td>
            <td colspan="3"></td>
          </tr>
          <tr>
            <td colspan="2">数据库</td>
            <td colspan="3"></td>
            <td colspan="2"></td>
            <td colspan="3"></td>
          </tr>
          <tr>
            <td colspan="2">域名</td>
            <td colspan="3"></td>
            <td colspan="2"></td>
            <td colspan="3"></td>
          </tr>
          <tr>
            <td colspan="2">OSS</td>
            <td colspan="3"></td>
            <td colspan="2"></td>
            <td colspan="3"></td>
          </tr>
          <tr>
            <td colspan="2">SSL</td>
            <td colspan="3"></td>
            <td colspan="2"></td>
            <td colspan="3"></td>
          </tr>
          <tr>
            <td colspan="2">短信</td>
            <td colspan="3"></td>
            <td colspan="2"></td>
            <td colspan="3"></td>
          </tr>
          <tr>
            <td colspan="2">邮件</td>
            <td colspan="3"></td>
            <td colspan="2"></td>
            <td colspan="3"></td>
          </tr>

注意：

可能注意到了，每一行td中都添加了colspan，这是为了出现 运维支持(这一列)边框线与上面错开的样式，当然要这样使用colspan，你要保证每一行的 colspan数相加的和相同。

如有错误，欢迎指正。