Recreate an image from tiles in HTML

Question

I have an image that I've broken into 48 tiles (8x6) using something similar to "Cut an Image into 9 pieces C#". I'd like to send put the tiles back together as the original image in html.

What is the best way to do this?

My first thought was to use a table with 8 columns and 6 rows and simply have an tile in each cell, setting all borders and spacing to 0. I am using the style sheet provided in the answer to How to remove unwanted space between rows and columns in table?

Unfortunately I still have a space between rows.

Here is the HTML:

<!DOCTYPE html>
<meta http-equiv="X-UA-Compatible" content="IE=Edge" />
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Picture this</title>
    <link rel="stylesheet" type="text/css" href="Reset.css" />
</head>
<body>
    <table border="0" cellspacing="0">
        <tr class="row">
            <td><img id="displayimage0" /></td>
            <td><img id="displayimage1" /></td>
            <td><img id="displayimage2" /></td>
            <td><img id="displayimage3" /></td>
            <td><img id="displayimage4" /></td>
            <td><img id="displayimage5" /></td>
            <td><img id="displayimage6" /></td>
            <td><img id="displayimage7" /></td>
        </tr>
        <tr class="row">
            <td><img id="displayimage8" /></td>
            <td><img id="displayimage9" /></td>
            <td><img id="displayimage10" /></td>
            <td><img id="displayimage11" /></td>
            <td><img id="displayimage12" /></td>
            <td><img id="displayimage13" /></td>
            <td><img id="displayimage14" /></td>
            <td><img id="displayimage15" /></td>
        </tr>
    </table>

The CSS is straight from the link in the accepted answer.

Here is the screen capture of the output (note the space between rows...

enter image description here

Probably should use CSS instead of tables, but you can fix your issue by adding `cellpadding="0"` to the `table` tag (which a couple of the newer answers from [this question](http://stackoverflow.com/questions/2279396/how-to-remove-unwanted-space-between-rows-and-columns-in-table) allude to) — admdrew, Nov 04 '14 at 18:47
What would it look like in CSS? My rows and column size might change based on the image being displayed. — Chad Dienhart, Nov 04 '14 at 18:55
Try updating your CSS with [pbaldauf's answer](http://stackoverflow.com/a/26742848/1454048) below, or [one of](http://stackoverflow.com/a/14054704/1454048) [these answers](http://stackoverflow.com/a/23793490/1454048). — admdrew, Nov 04 '14 at 18:56

pbaldauf · Answer 1 · 2014-11-04T20:03:58.437

2

Try the following CSS properties:

table {
    border-spacing: 0 !important; //This should normally do the trick
    margin: 0 !important;
    padding: 0 !important;
    border-collapse: collapse !important;
}

EDIT:
May you overwrite some of the CSS properties from your file. So try to add the !important at the end of your CSS styles.

If this also doesn't help, inspect your tiles with Developer Tools to see which styles are applied.

edited Nov 04 '14 at 20:03

answered Nov 04 '14 at 18:55

pbaldauf

1,671
2
23
32

I tried the `!important` flags and it still did not remove the space between rows. I posed the answer after I got it working with one of the links in the comment section. +1 for showing me the `!important` flag – Chad Dienhart Nov 04 '14 at 19:18

score 1 · Accepted Answer · edited May 23 '17 at 10:25

1

I first added the margin: 0 and padding: 0 to the CSS and it didn't work. I then tried the link provided by @admedrew How to remove unwanted space between rows and columns in table?

adding the following to the CSS worked:

For standards compliant HTML5 add all this css to remove all space between images in tables:

 td img {
    display:block;
}

edited May 23 '17 at 10:25

Community

1
1

answered Nov 04 '14 at 19:07

Chad Dienhart

5,024
3
23
30

1

It says I can in two days. Thanks to all that posted on this pbaldauf, admdrew, and myfunkyside for your help on this. This is new to me and I really appreciate your input. – Chad Dienhart Nov 04 '14 at 19:17

Recreate an image from tiles in HTML

2 Answers2