从零开始学习淘宝代码应用（四）：table标签的优势和劣势

DesignerV

杭州/UI设计师/10年前/1719浏览

版权

DesignerV

只对代码小白的经验分享

<table></table>标签是定义html表格的标签。

结构如下：

这是一个两行两列的表格。显示效果如下图：

table表格的形式可以参考Excel。

结构标签：

<tr></tr> —— 行，表示表格中一行；

<td></td> —— 单元格，表示一个单元格，可以包含文字、图片、代码等内容；

<tbody></tbody> —— 表示表格主体，即正文，仅主流浏览器支持，不推荐使用，如需使用应在tr外层；

注意，table中只有行和单元格的表示方法，列为默认显示，如结构示例中，一行有两个单元格，即有两列！

合并单元格的方式：

table中合并单元格有两种情形

第一种情况如下图所示：

这种是一个大的单元格下面（或上面）有两个小单元格（或者三个、四个，都是一样的）

这种情况，使用colspan属性来定义合并单元格的数量，属性值根据下面的小单元格决定，如下面是两个小的，则属性值为2，如下面是3个，则属性值为3，依次类推。

大的单元格单独占一行，小单元格为一行，示例代码如下：

注意，为了更直白的显示效果，这里为td增加了高度和宽度属性，正常情况下， td单元格是没有宽度和高度的，填进内容后，会根据内容的宽度和高度显示！大的单元格宽度和下面所有小单元格的总宽度应保持一致，不一定是50-50，可以是30-70等等，只要小单元格宽度之和等于大单元格宽度即可。

这种情况的合并是比较简单的一种情况。

第二种情况如下：

这种是一个大的单元格右侧（或左侧）有两个小单元格（或者三个、四个，都是一样的）

这种情况的合并单元格，使用rowspan属性来定义合并单元格的数量，属性值根据小单元格的数量决定，如右侧（或左侧）有两个，则属性值为2，如有三个，则属性值为3，依次类推。

这里需要注意，表格中一行，包括了整个表格宽度中的所有单元格，且每行中只能垂直出现一个单元格！

如示例图中，第一个大单元格和右侧上面小单元格是处于一行中的，即应该被同一个tr标签包括！

右侧下面小单元格单独成一行，注意，大单元格已经在第一行中出现，所以第二行中只应包含右侧下面小单元格！示例代码如下：

<table>
<tr>
<td rowspan="2" width="50px" height="60px"></td>/*这里是大单元格*/
<td width="50px" height="30px"></td>/*这里是右侧上面的单元格*/ </tr>
<tr>
<td width="50" height="30px"></td>/*这里是右侧下面的单元格*/
</tr>
</table>

这两种合并方式经常会同时出现，如下图所示：

这个是两种合并方式的组合，同样，代码中只要在适当位置使用这两种合并方式即可，代码如下：

第一行有三个单元格，第二行有三个单元格，如下图所示：

可以想象一下，这个表格本来应该是2行4列的形式，如下图所示：

变动原理如下：

我们把第2行第1个单元格抹掉，第1行第1个单元格高端加高一倍，把第1行第4个单元格抹掉，第1行第3个单元格宽度增加一倍，就是上图的效果，所以，合并后的单元格应该占据一行，而不是两行！即在一个tr中包括。

除了上述常规情况以外，实际使用中还有一些特殊排列，如下图：

优惠信息是一行，不用加链接，需要切成宽度为790的一张图，下面是两个大产品，两张图，最下面是三个产品，要切成三张图，使用table排列，切片前先画一下结构图如下：

注意，遇到这种情况，你首先需要找到最小的单元格的一行，即合并单元格最少的一行，这里是第三行，因为第三行单元格最多最小（注意，这里的小不是指宽高，而是指层级上小）！

然后需要分析一下表格的整体结构，最上面为最宽的，也就是说他的conspan数值是最大的，中间这块是难点，因为他是两个单元格跟下面三个单元格的宽度一致，每个单元格应该合并下面1.5个小单元格，而conspan的数值不支持小数。

所以，我们模拟一下，把最后一行中间的单元格从中间分开成两个小的单元格，把整个表格想象成3行4列的结构，如下：

排好结构，用代码排出来基本结构，代码如下：

然后在ps中切出来，切的时候按照效果图去切，不要切成4块。。。。0.0！

后面的就简单了，直接把图片放进<td></td>标签中间，加上链接就可以了。

注意，切片的时候，一定要对齐，水平和垂直都要对齐，否则会出现白色间隙。

简单方法快速导出table布局：

在ps切片完成后，按下Ctrl+Alt+Shift+S，打开导出切片面板，储存：

选中”仅限HTML“，即可导出一个.html文件，在dw中打开这个html文件，如下图：

table结构跟我们上面写出来的是一样的。不过，导出的下面会多出一行，即下图的一行：

这里，就要讲到为什么淘宝装修中不建议使用table标签，原因如下：

table标签结构规定比较死板，对灵活布局的适应性不足；
table标签对切片要求极高，切片必须考虑高度和宽度的统一，效率低；
table写成的代码在淘宝中极易出现白色间隙，无法消除，影响效果；
table不推荐使用复杂的嵌套结构，复杂嵌套结构在ie中容易崩溃；
table布局结构排列相对于div+css来说比较复杂，影响效率；
table标签代码结构相对于div+css来说比较繁琐，后期维护不便；
table标签加载比较慢，影响网页性能；

同样，table相对div来说也有自身优势：

table结构明显，一目了然；
table可以抛弃css直接布局，对浏览器兼容性极佳；
用DW开发非常快，不需要css基础；

table在淘宝装修中典型应用场景：左侧栏客服中心

一般淘宝详情页或者搜索列表页左侧栏中会添加自定义客服中心，上面有联系方式，有一堆旺旺跳动，如下图：

这种用div+css排列会比较麻烦，用table反而会更快。

首先，把旺旺图片隐藏，将这张图片保存出来，设置成table的背景；

然后根据旺旺的位置划分table的行和列，DW中”设计“视图可以直接拉动单元格的宽度和高度来调整位置；

最后把旺旺代码复制进去即可；

最终代码如下：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
</head>

<body>
<table background="http://img04.taobaocdn.com/imgextra/i4/931252344/TB2hFI_aVXXXXaJXXXXXXXXXXXX_!!931252344.jpg" height="367" width="190px" border="0px" cellpadding="0px" cellspacing="0px">
<tr>
    <td colspan="3" height="165"></td>
</tr>
<tr>
    <td height="22" width="51"></td>
    <td width="102"><a target="_blank" href="http://www.taobao.com/webww/ww.php?ver=3&touid=%E4%BE%9D%E6%9B%BC%E8%B4%9D%E5%B0%94%E6%97%97%E8%88%B0%E5%BA%97&siteid=cntaobao&status=2&charset=utf-8"><img border="0" src="http://amos.alicdn.com/online.aw?v=2&uid=%E4%BE%9D%E6%9B%BC%E8%B4%9D%E5%B0%94%E6%97%97%E8%88%B0%E5%BA%97&site=cntaobao&s=2&charset=utf-8" alt="点这里给我发消息" /></a></td>
    <td width="37"><a target="_blank" href="http://www.taobao.com/webww/ww.php?ver=3&touid=%E4%BE%9D%E6%9B%BC%E8%B4%9D%E5%B0%94%E6%97%97%E8%88%B0%E5%BA%97&siteid=cntaobao&status=2&charset=utf-8"><img border="0" src="http://amos.alicdn.com/online.aw?v=2&uid=%E4%BE%9D%E6%9B%BC%E8%B4%9D%E5%B0%94%E6%97%97%E8%88%B0%E5%BA%97&site=cntaobao&s=2&charset=utf-8" alt="点这里给我发消息" /></a></td>
</tr>
<tr>
    <td height="22"></td>
    <td><a target="_blank" href="http://www.taobao.com/webww/ww.php?ver=3&touid=%E4%BE%9D%E6%9B%BC%E8%B4%9D%E5%B0%94%E6%97%97%E8%88%B0%E5%BA%97&siteid=cntaobao&status=2&charset=utf-8"><img border="0" src="http://amos.alicdn.com/online.aw?v=2&uid=%E4%BE%9D%E6%9B%BC%E8%B4%9D%E5%B0%94%E6%97%97%E8%88%B0%E5%BA%97&site=cntaobao&s=2&charset=utf-8" alt="点这里给我发消息" /></a></td>
    <td><a target="_blank" href="http://www.taobao.com/webww/ww.php?ver=3&touid=%E4%BE%9D%E6%9B%BC%E8%B4%9D%E5%B0%94%E6%97%97%E8%88%B0%E5%BA%97&siteid=cntaobao&status=2&charset=utf-8"><img border="0" src="http://amos.alicdn.com/online.aw?v=2&uid=%E4%BE%9D%E6%9B%BC%E8%B4%9D%E5%B0%94%E6%97%97%E8%88%B0%E5%BA%97&site=cntaobao&s=2&charset=utf-8" alt="点这里给我发消息" /></a></td>
</tr>
<tr>
    <td colspan="3" height="39"></td>
</tr>
<tr>
    <td height="22"></td>
    <td><a target="_blank" href="http://www.taobao.com/webww/ww.php?ver=3&touid=%E4%BE%9D%E6%9B%BC%E8%B4%9D%E5%B0%94%E6%97%97%E8%88%B0%E5%BA%97&siteid=cntaobao&status=2&charset=utf-8"><img border="0" src="http://amos.alicdn.com/online.aw?v=2&uid=%E4%BE%9D%E6%9B%BC%E8%B4%9D%E5%B0%94%E6%97%97%E8%88%B0%E5%BA%97&site=cntaobao&s=2&charset=utf-8" alt="点这里给我发消息" /></a></td>
    <td><a target="_blank" href="http://www.taobao.com/webww/ww.php?ver=3&touid=%E4%BE%9D%E6%9B%BC%E8%B4%9D%E5%B0%94%E6%97%97%E8%88%B0%E5%BA%97&siteid=cntaobao&status=2&charset=utf-8"><img border="0" src="http://amos.alicdn.com/online.aw?v=2&uid=%E4%BE%9D%E6%9B%BC%E8%B4%9D%E5%B0%94%E6%97%97%E8%88%B0%E5%BA%97&site=cntaobao&s=2&charset=utf-8" alt="点这里给我发消息" /></a></td>
</tr>
<tr>
    <td height="22"></td>
    <td><a target="_blank" href="http://www.taobao.com/webww/ww.php?ver=3&touid=%E4%BE%9D%E6%9B%BC%E8%B4%9D%E5%B0%94%E6%97%97%E8%88%B0%E5%BA%97&siteid=cntaobao&status=2&charset=utf-8"><img border="0" src="http://amos.alicdn.com/online.aw?v=2&uid=%E4%BE%9D%E6%9B%BC%E8%B4%9D%E5%B0%94%E6%97%97%E8%88%B0%E5%BA%97&site=cntaobao&s=2&charset=utf-8" alt="点这里给我发消息" /></a></td>
    <td></td>
</tr>
<tr>
    <td colspan="3" height="75px"></td>
</tr>
</table>
</body>
</html>