表格HTML边框
[英]Table HTML border
问题描述
I am having some difficulty with my HTML email template. 
我的HTML电子邮件模板有一些困难。 I am new to this HTML world and it's my first email template. 我是这个HTML世界的新手，这是我的第一个电子邮件模板。 The fact that I cannot use <div> tags is really giving headache to me. 我不能使用<div>标签的事实确实让我头疼。
I think it would be better if you look at the screenshot. 我认为最好看一下屏幕截图。 I explained there nicely what I want. 我在那里很好地解释了我想要什么。 Here is an image: 这是一张图片：
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Fashion Newsletter</title>
<style type="text/css" >
body {
font: Georgia, "Times New Roman", Times, serif;
}
</style>
</head>
<body>
<!--For Three Columns-->
<table align="center" width="600" cellpadding="0" cellspacing="0" bgcolor="#000" >
<tr>
<td width="180">
<a href="#link">
<img src="images/180.gif" />
</a>
</td>
<td width="180">
<a href="#link">
<img src="images/180.gif" />
</a>
</td>
<td width="180"><p class="three">
<a href="#link">
<img src="images/180.gif" />
</a>
</p></td>
</tr>
</table>
</body>
</html>
I deleted the code for "Single Column" table because for single columns code is working fine. 我删除了“单列”表的代码，因为单列代码可以正常工作。 I also intentionally added bgcolor="#000" so that I can have a look what is happening. 我还特意添加了bgcolor="#000"以便查看发生了什么。
Summary: 摘要：
- If you looked at the screenshot, I basically want to decrease the space between the two
<td>tags ie two columns.如果您看截图，我基本上想减少两个<td>标记（即两列）之间的空间。 - I want to remove the space that is generated at the end of the table (extreme right, black colored) 我想删除表格末尾产生的空间（极右，黑色）
3 个解决方案
解决方案1
0 已采纳 2013-06-23 13:15:36
table width="600" border="1" align="center" cellpadding="0" cellspacing="0" bgcolor="#000" class="box" >
<tr>
<td width="180">
<a href="#link">
<img src="images/180.gif" /> </a> </td>
<td width="180">
<a href="#link">
<img src="images/180.gif" /> </a> </td>
<td width="180"><p class="three">
<a href="#link">
<img src="images/180.gif" /> </a>
</p></td>
</tr>
</table>
added a css style which you can play around with and get the look you want: 添加了一个CSS样式，您可以使用它来获得所需的外观：
.box {
background-color: #FFFFFF;
margin: 2px;
padding: 2px;
width: 600px;
border-top-width: 2px;
border-right-width: 1px;
border-bottom-width: 2px;
border-left-width: 1px;
border-top-style: solid;
border-right-style: solid;
border-bottom-style: solid;
border-left-style: solid;
border-top-color: #000066;
border-right-color: #990000;
border-bottom-color: #00FF33;
border-left-color: #FF0000;
}
解决方案2
0 2013-06-23 13:22:32
Try this ; 尝试这个 ; In the table tag style="border-style:solid; border-width:2px 0px 2px 0px;" 在表格中，标签style =“ border-style：solid; border-width：2px 0px 2px 0px;”
解决方案3
0 2013-06-23 17:07:57
try this one. 试试这个。 basically, make the table 560px wide, put 10px td between the images. 基本上，使table宽560像素，在图像之间放置10像素td 。 also you may need to remove the p tag for the third column to avoid unwanted margin/padding. 另外，您可能需要删除第三列的p标签，以避免不必要的边距/填充。
If you want to keep the table 600px wide, just add 20px td before the first column and after the third column. 如果要使table保持600px宽，只需在第一列之前和第三列之后添加20px td 。
<table align="center" width="560" cellpadding="0" cellspacing="0" bgcolor="#000" >
<tr>
<td width="180">
<a href="#link">
<img src="images/180.gif" />
</a>
</td>
<td width="10"></td>
<td width="180">
<a href="#link">
<img src="images/180.gif" />
</a>
</td>
<td width="10"></td>
<td width="180"><a href="#link">
<img src="images/180.gif" />
</a></td>
</tr>
</table>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.