I have divided an image into 48 tiles (8x6) using a method similar to "Cutting an Image into 9 pieces C#". Now, I want to reconstruct the original image in HTML. What is the most effective approach to achieve this?
Initially, I attempted to use a table with 8 columns and 6 rows, placing each tile in a cell while setting all borders and spacing to 0. I applied the style sheet recommended in the response to "How to eliminate unwanted space between rows and columns in a table?"
Despite my efforts, there remains a gap between rows.
Below is the HTML code snippet:
<!DOCTYPE html>
<meta http-equiv="X-UA-Compatible" content="IE=Edge" />
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Picture Puzzler</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="displayimage15" /></td>
</tr>
</table>
The CSS file used can be found at this link provided in the accepted answer.
Shown below is a screenshot of the output displaying the issue of empty spaces between rows...