HTML tables: making 'em stick

I'm wanting a whole table of 50px by 50px images, and these images need to stick to each other to make an apparent bigger image. So right now I've gotten them to stick horizontally, but not vertically, like so:

As you can see I'm having a problem getting rid of area A (red arrow)

My code looks like this right now:

<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>

What CSS/HTML code should I use to change the height? According to Chrome element inspector, the 开发者_运维百科height of the <td> element is 55px. (arb?)

EDIT: forgot I'm already setting cellpadding and spacing to 0. The image above is with them both at zero. Updated code sample.

EDIT: "Area A" doesn't exist in IE. Screenshot from Chrome.

---

Images align to the baseline of text, leaving space below the text for any descenders (on letters such as y and g). You can use a css style of display: block; for images to prevent this behaviour.

In your example, the following will work:

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

You do not need to specify cellpadding="0" cellspacing="0", nor the heights and widths of the tr and td elements.

It may make sense to specify a css class on your table so that these styles only impact the desired elements.

e.g. <table class="tiledImages"> in your html and then table.tiledImages in your css.

---

If you just need to repeat your image, have you considered just setting it as a background-image for a div element?

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

---

Do you have attributes for cellpadding and cellspacing in your table-definition: <table cellspacing="0" cellpadding="0"> ?

---

I'd say get rid of the height and width settings then use css to cause the table to collapse all of the borders.

Something like

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

The above does 2 things. First, it causes all of the table borders to collapse down to get rid of the default borders that certain browsers use.

Second, it makes the table draw faster because the browser only has to compute the first row, so the table starts displaying almost immediately.

---

Set cellpadding and cellspacing of the table to 0 to remove the gap.

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