I have several tables with multiple cells. Each cell of each table holds an image. See the code below. I used   in place of the actual image code, because the actual images are irrelevant. When the images display I would expect that the images from the first row would display directly above the images from the second row, and that the images from the last row in each table would display directly above the images in the first row of the next table, etc...

However, I keep getting unwanted line breaks between rows and between tables. How do I correct this? I know that I could do this much simpler using a single table, however, suffice to say that I have valid reasons for doing it like this.

<table width="100%" height="15%" cellpadding="0" cellspacing="0" border="0">
<tr width="100%" height="40%">
    <td width="3%" height="100%">&nbsp;</td>    
    <td width="14%" height="100%">&nbsp;</td>
    <td width="83%" height="100%">&nbsp;</td>   
</tr>
<tr width="100%" height="60%">
    <td width="3%" height="100%">&nbsp;</td>    
    <td width="14%" height="100%">&nbsp;</td>   
    <td width="83%" height="100%">&nbsp;</td>       
</tr>
</table>
<table width="100%" height="11%" cellpadding="0" cellspacing="0" border="0">
<tr width="100%" height="73%">
    <td width="3%" height="100%">&nbsp;</td>
    <td width="4%" height="100%">&nbsp;</td>
    <td width="10%" height="100%">&nbsp;</td>
    <td width="2%" height="100%">&nbsp;</td>
    <td width="10%" height="100%">&nbsp;</td>
    <td width="2%" height="100%">&nbsp;</td>
    <td width="10%" height="100%">&nbsp;</td>
    <td width="2%" height="100%">&nbsp;</td>
    <td width="10%" height="100%">&nbsp;</td>
    <td width="2%" height="100%">&nbsp;</td>
    <td width="10%" height="100%">&nbsp;</td>
    <td width="2%" height="100%">&nbsp;</td>
    <td width="10%" height="100%">&nbsp;</td>
    <td width="7%" height="100%">&nbsp;</td>
</tr>
<tr width="100%" height="27%">
    <td width="3%" height="100%">&nbsp;</td>
    <td width="4%" height="100%">&nbsp;</td>
    <td width="10%" height="100%">&nbsp;</td>
    <td width="2%" height="100%">&nbsp;</td>
    <td width="10%" height="100%">&nbsp;</td>
    <td width="2%" height="100%">&nbsp;</td>
    <td width="10%" height="100%">&nbsp;</td>
    <td width="2%" height="100%">&nbsp;</td>
    <td width="10%" height="100%">&nbsp;</td>
    <td width="2%" height="100%">&nbsp;</td>
    <td width="10%" height="100%">&nbsp;</td>
    <td width="2%" height="100%">&nbsp;</td>
    <td width="10%" height="100%">&nbsp;</td>
    <td width="7%" height="100%">&nbsp;</td>
</tr>
</table>
<table width="100%" height="61%" cellpadding="0" cellspacing="0" border="0">
<tr width="100%" height="100%">
    <td width="3%" height="100%">&nbsp;</td>
    <td width="4%" height="100%">&nbsp;</td>
    <td width="86%" height="100%">&nbsp;</td>
    <td width="7%" height="100%">&nbsp;</td>
</tr>
</table>    
<table width="100%" height="13%" cellpadding="0" cellspacing="0" border="0">
<tr width="100%" height="23%">
    <td width="15%" height="100%" rowspan="3">&nbsp;</td>
    <td width="10%" height="100%">&nbsp;</td>
    <td width="2%" height="100%">&nbsp;</td>
    <td width="10%" height="100%">&nbsp;</td>
    <td width="2%" height="100%">&nbsp;</td>
    <td width="10%" height="100%">&nbsp;</td>
    <td width="2%" height="100%">&nbsp;</td>
    <td width="10%" height="100%">&nbsp;</td>
    <td width="2%" height="100%">&nbsp;</td>
    <td width="10%" height="100%">&nbsp;</td>
    <td width="2%" height="100%">&nbsp;</td>
    <td width="10%" height="100%">&nbsp;</td>
    <td width="15%" height="100%">&nbsp;</td>   
</tr>
<tr width="100%" height="23%">
    <td width="10%" height="100%">&nbsp;</td>
    <td width="2%" height="100%">&nbsp;</td>
    <td width="10%" height="100%">&nbsp;</td>
    <td width="2%" height="100%">&nbsp;</td>
    <td width="10%" height="100%">&nbsp;</td>
    <td width="2%" height="100%">&nbsp;</td>
    <td width="10%" height="100%">&nbsp;</td>
    <td width="2%" height="100%">&nbsp;</td>
    <td width="10%" height="100%">&nbsp;</td>
    <td width="2%" height="100%">&nbsp;</td>
    <td width="10%" height="100%">&nbsp;</td>
    <td width="15%" height="100%">&nbsp;</td>   
</tr>
<tr width="100%" height="23%">
    <td width="10%" height="100%">&nbsp;</td>
    <td width="2%" height="100%">&nbsp;</td>
    <td width="10%" height="100%">&nbsp;</td>
    <td width="2%" height="100%">&nbsp;</td>
    <td width="10%" height="100%">&nbsp;</td>
    <td width="2%" height="100%">&nbsp;</td>
    <td width="10%" height="100%">&nbsp;</td>
    <td width="2%" height="100%">&nbsp;</td>
    <td width="10%" height="100%">&nbsp;</td>
    <td width="2%" height="100%">&nbsp;</td>
    <td width="10%" height="100%">&nbsp;</td>
    <td width="15%" height="100%">&nbsp;</td>   
</tr>
</table>    

2 answers

1
point

A few questions/suggestions:

  1. Do you have any extra spaces within the table cells?
  2. Also, why do you have heights and widths on the cells, rows and tables. If your images fill the entire cell, then there is no need for the widths and heights because the table will expand to the size of the image.
  3. Try removing the line breaks between the table close and open tags.
Answered over 7 years ago by Darryl Hein
1
point

Try specifying in the css:

img {
display:block;
}

also, specify

table {
border-collapse:collapse;
}

But I agree with Darryl, you do not need widths and heights if your table only contain images.

Answered over 7 years ago by Divya Manian