html的table复杂布局

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

第一行：

第二行：

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

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

如有错误，欢迎指正。

<dd>是块级元素，块级元素都是独自占用一行的。

解决方法：

使用CSS控制(为了方便查看，CSS样式写成内联样式)

方法1：给<dd>增加浮动属性:<dd style=" float:left">

<!-- float属性值有left和right可选，left为从左往右排列，right就是从右往左排列 -->

方法2：将<dd>转成非块级元素：<dd style="display:inline-block">

方法1 代码如下：

<dl>

    <dd style="float:left">类别：</dd>

    <dd style="float:left">类别内容</dd>

</dl>

方法2 代码如下：

<dl>

    <dd style="display:inline-block">类别：</dd>

    <dd style="display:inline-block">类别内容</dd>

</dl>

---