HTML表：让他们坚持下去

Question

我想要一张50px乘50px图像的整张表，这些图像需要相互粘贴才能制作出更明显的图像。所以现在我已经让它们水平粘贴，但不是垂直的，就像这样：

你可以看到我摆脱区域A （红色箭头）的问题

我的代码现在看起来像这样：

<table cellpadding="0" cellspacing="0">
   <tr height="50px">
     <td width="50px" height="50px">
        <img src="image.png" height="50px" width="50px" />
     </td>
     <!-- etc --> 
   </tr>
   <!-- etc -->
</table>

我应该用什么CSS / HTML代码来改变高度？根据Chrome元素检查器，<td>元素的高度为55px。 （ARB？）

编辑：忘了我已经设置了cellpadding并且间距为0.上面的图片都是零。更新了代码示例。

编辑：IE中不存在“区域A”。 Chrome的屏幕截图。

Answer 1

图像与文本基线对齐，在文本下方留出空间用于任何下延（在y和g等字母上）。您可以使用display: block;的css样式来防止此行为。

在您的示例中，以下内容将起作用：

table img
{
    display:block;
}
table
{
    border-collapse:collapse;
}
td
{
    padding: 0;
}

您无需指定cellpadding="0" cellspacing="0"，也无需指定tr和td元素的高度和宽度。

在表上指定一个css类是有意义的，这样这些样式只会影响所需的元素。

e.g。在您的HTML中<table class="tiledImages">，然后在您的CSS中table.tiledImages。

---

如果您只是需要重复图片，是否考虑将其设置为background-image元素的div？

div
{
    width: 400px; /* example width */
    height: 400px; /* example height */
    background-image: url(image.png);
}

Answer 2

在表定义中是否有cellpadding和cellspacing的属性： <table cellspacing="0" cellpadding="0">？

Answer 3

我会说去除高度和宽度设置然后使用css使表格折叠所有边框。

像

这样的东西

table {
  border-collapse: collapse;
  table-layout:fixed;
}

以上做了两件事。首先，它会导致所有表格边框向下折叠，以摆脱某些浏览器使用的默认边框。

其次，它使得表格绘制更快，因为浏览器只需计算第一行，因此表格几乎立即开始显示。

Answer 4

将表格的cellpadding和cellspacing设置为0以消除间隙。

<table cellpadding="0" cellspacing="0">...</table>