表格布局实践中经验的一些总结

最新推荐文章于 2024-11-07 13:38:59 发布

weixin_34410662

最新推荐文章于 2024-11-07 13:38:59 发布

阅读量182

点赞数

文章标签： xhtml javascript java ViewUI

原文链接：http://www.cnblogs.com/zhp404/articles/4034223.html

版权

以前没联系过表格布局，因为web端表格布局对SEO不友好，所以经常只用DIV布局，新工作中经常要发一些EDM邮件，所以要重新从头开始了解一些table布局。从中也遇到了以下几点问题，总结给自己，以后遇到方便了解。

一、文档

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

使用此文档，具体原因我也说不清楚不太了解，可能还没有了解到，因为当我使用html5文档的时候，火狐下面每个tr会默认加高5px，如下图；所以选择用之前同事写的文档说明，解决了火狐下面的此类Bug，但是这个bug在ie6下面并没有出现。PS:不过此类问题如果用Html5文档可以给每个img标签添加style="vertical-align:bottom"属性值来解决火狐下面的空白问题。

二、不过当td表格里面嵌入img引入图片的时候如果，img标签和td标签不在一行上，或者说发生了换行的话，ie6下tr下面就会出现空格，同上面的现象，但是火狐里面不会出现此类问题。

三、当td里面嵌套a链接、a链接里面嵌套img标签，时需要注意，一定要给img标签加上border="0"属性值，不然会撑开，但是img外面如果没有包含a链接不给img添加border属性好像也不会出现撑开的现象。

四、<body leftmargin="0" topmargin="0" marginwidth="0" marginheight="0"><bordy>

edm因为不能引入css外部文件，所以我们常用到的css reset 就不能被解析到，因此给body属性加上这几个值，否则会出现body默认margin值，

五、<table width="" border="0" align="center" cellpadding="0" cellspacing="0"><table>

edm 中的外面最大的table盒子一般加上这几个属性

六、同时学习了一些html属性，例如align="center" align="right" valign="top" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0" cellpadding="0" cellspacing="0"

七、table布局中

td必须设定宽度和高度：可以在第1行第1列设定宽、高，后面几列只需设宽，最后一列不用设任何值，第2行开始只在第1列定高，不需要设宽度，后面几列不用设任何值；
背景图（背景色除外）必须切成图片，用img代替，不要使用css的background属性；style内容里面background可以设置 color，但是img会被过滤，但是有一个很有意思的元素属性，也叫background，里面可以定义一个图片路径，这是个不错的替代方案，虽然这样功能有限，比如无法定位背景图片了，有总比没有好。例如要给一个单元格加一个背景，必须这样写：<td background=”http://image1.koubei.com/images/common/logo_koubei.gif”></td>
img必须设定宽、高、边框border=”0”及css属性style=”vertical-align: bottom;”（去除上下图片间的间隙），另外应该添加图片代替文本alt=”图片说明”；
body中不要设定背景色，不然在转发邮件的时候，转发人写的信息背景色都会变为被转发邮件的背景色，影响浏览。如果一定要给邮件模板设定整体背景色，请在模板文件最外面加一个table，设定此table的背景色。
模板尽量不要使用背景图片。背景图片在某些邮件客户端或或web界面(如Gmail)中默认不显示。