Css 删除html表格单元格中的白色边框和垂直/水平图像

从我在更广泛的网络和这里的搜索来看，这似乎是一个被问了很多次的问题，但在过去的几周里，我一直无法找到一个符合我要求的答案

我正在blogger.com上使用第三方（付费）响应模板

我正在创建一个需要html表的新页面（不是帖子）

每一新行的第一个单元格将包含一个始终大小相同的图像

我想这张图片是垂直和水平居中，我需要删除图片周围的白色边框

我知道基本的html和一些CSS，但是对于blogger模板，CSS往往在html中（据我所知）

这是我的密码：

<style type="text/css">.nobrtable br { display: none } tr {text-align: center;} tr.alt td  {background-color: #eeeecc; color: black;} tr {text-align: center;} caption {caption-side:bottom;}    </style>

<br />
<table border="2" bordercolor="#0033FF" cellpadding="5" cellspacing="0" style="background-color:  #99ffff; border-collapse: collapse; width: 100%;"><tbody>
<tr style="background-color: #0033ff; color: white; padding-bottom: 4px; padding-top: 5px;">
<th width="15%"><span style="font-family: Arial, Helvetica, sans-serif;">Column 1</span></th> <!-- COLUMN NAME 1 -->
<th width="20%"><span style="font-family: Arial, Helvetica, sans-serif;">Column 2</span></th> <!-- COLUMN NAME 2 -->
<th width="20%"><span style="font-family: Arial, Helvetica, sans-serif;">Column 3</span></th> <!-- COLUMN NAME 3 -->
<th width="20%"><span style="font-family: Arial, Helvetica, sans-serif;">Column 4</span></th> <!-- COLUMN NAME 4 -->
<th width="25%"><span style="font-family: Arial, Helvetica, sans-serif;">Column 5</span></th> <!-- COLUMN NAME 5 -->
</tr>
<tr class="alt">
<td><div class="separator" style="clear: both; text-align: center;">
</div>
<div class="separator" style="clear: both; text-align: center;">
<img border="0" src="http://imageshack.com/a/img661/6216/lOGXW9.jpg" /></div>
<br /></td>
<td>Table Cell A2</td>
<td>Table Cell A3</td>
<td>Table Cell A4</td>
<td>Table Cell A5</td>
</tr>
<tr>
<td>Table Cell B1</td>
<td>Table Cell B2</td>
<td>Table Cell B3</td>
<td>Table Cell B4</td>
<td>Table Cell B5</td>
</tr>
<tr class="alt">
<td>Table Cell C1</td>
<td>Table Cell C2</td>
<td>Table Cell C3</td>
<td>Table Cell C4</td>
<td>Table Cell C5</td>
</tr>
<tr>
<td>Table Cell D1</td>
<td>Table Cell D2</td>
<td>Table Cell D3</td>
<td>Table Cell D4</td>
<td>Table Cell D5</td>
</tr>
</tbody></table>

然后使用此选项将图像居中：

<td align="center" valign="center"><img src="*image url*;" /></td>

---

希望这对其他人有帮助

我建议将cellpadding属性设置为零。

删除

标记，并从第一个单元格中删除任何内容。然后，在样式表中：

tr td:first-child {
    padding: 0px;
    background: url("http://imageshack.com/a/img661/6216/lOGXW9.jpg") no-repeat center;
}

如果每个单元格的图像应该不同，则必须分别为每个单元格指定背景属性。

查找更新的图像

我无法再现白色边界问题

用于使中心垂直和水平对齐

td{ text-align: center; vertical-align: middle; }

---

嗨，谢谢你的建议。我没有访问样式表的权限，因为它是第三方模板，而且样式都是内联设置的。我发现了如何添加内联样式，这在一定程度上起到了作用。一定有比为每个图像添加这行代码更好的方法，因为最终会有未知数量的图像，因为表是一个产品列表……请原谅我对编码的无知，但我们能不能有一个设置图像属性的div？当然可以，我只是不明白这一点。使用这种方法，您可以为每个表使用第一行的图像，第二行的图像，…但是对于每个图像，我是否必须再次添加代码，但更改每个图像的url，例如，30个图像需要您的代码输入30次（每次都使用不同图像的唯一url）？您好，谢谢您的建议。问题是，正如我在最初的帖子中所说，我没有访问CSS样式表的权限，因此对于单个页面，它必须是一个内部样式表。我猜我已经解决了如何添加内联样式的问题，但你的建议不起作用。此外，由于某些原因，我仍然在图片周围使用白色边框。你开发电子邮件模板了吗？有时，如果您没有指定properlyNo，客户端系统将忽略样式。这是我博客blogger.com的一个html页面

td{ text-align: center; vertical-align: middle; }