CODEWITHSUNDEEP
htmlcellpaddingcellspacing
Gvee
Gvee

Reputation: 1

Remove unwanted whitespace in html4 table using HTML5

I created a Halloween ecard many years ago - HTML 4.01 -

https://www.bethanyec.co.uk/HauntedHouse_web.html.

It was basically a table with image slices from Photoshop.

When I try to upgrade the code to HTML 5 I am unable to suppress extra, unwanted, whitespace.

https://www.bethanyec.co.uk/_HauntedHouse_web.html

I've tried a number of fixes, but none have worked.

<style>

body {
background-color: black;
}


table.Table_01 {

border: 0px;

border-spacing: 0;
border-collapse: collapse;

}


table.Table_01 img{
 display: block;

}


table.Table_01 td { 
font-size: 0px;


}


</style>

The HTML 5 code:

<!doctype html>

<html lang="en">
<head>
  <meta charset="utf-8">



<title>HauntedHouse_web</title>

<style>

body {
background-color: black;
}


table.Table_01 {

border: 0px;

border-spacing: 0;
border-collapse: collapse;

}


table.Table_01 img{
 display: block;

}


table.Table_01 td { 
font-size: 0px;


}


</style>


</head>
<body>
<div>
<!-- ImageReady Slices (HauntedHouse_web.psd) -->



<table class="Table_01">
<tr>
<td colspan="10"><img src="images/HauntedHouse_web_01.gif" width=
"600" height="52" alt=""></td>
<td><img src="images/spacer.gif" width="1" height="52" alt=
""></td>
</tr>
<tr>
<td colspan="4"><img src="images/HauntedHouse_web_02.gif" width=
"280" height="118" alt=""></td>
<td><img src="images/Ghost_web.gif" width="91" height="118" alt=
""></td>
<td colspan="5"><img src="images/HauntedHouse_web_04.gif" width=
"229" height="118" alt=""></td>
<td><img src="images/spacer.gif" width="1" height="118" alt=
""></td>
</tr>
<tr>
<td colspan="10"><img src="images/HauntedHouse_web_05.gif" width=
"600" height="152" alt=""></td>
<td><img src="images/spacer.gif" width="1" height="152" alt=
""></td>
</tr>
<tr>
<td rowspan="6"><img src="images/HauntedHouse_web_06.gif" width=
"42" height="493" alt=""></td>
<td rowspan="2"><img src="images/HauntedHouse_web_07.gif" width=
"130" height="81" alt=""></td>
<td colspan="5" rowspan="2"><img src=
"images/HauntedHouse_web_08.gif" width="254" height="81" alt=
""></td>
<td><img src="images/HauntedHouse_web_09.gif" width="46" height=
"48" alt=""></td>
<td rowspan="6"><img src="images/HauntedHouse_web_10.gif" width=
"47" height="493" alt=""></td>
<td><img src="images/HauntedHouse_web_11.gif" width="81" height=
"48" alt=""></td>
<td><img src="images/spacer.gif" width="1" height="48" alt=
""></td>
</tr>
<tr>
<td rowspan="5"><img src="images/HauntedHouse_web_12.gif" width=
"46" height="445" alt=""></td>
<td rowspan="5"><img src="images/HauntedHouse_web_13.gif" width=
"81" height="445" alt=""></td>
<td><img src="images/spacer.gif" width="1" height="33" alt=
""></td>
</tr>
<tr>
<td colspan="3" rowspan="2"><img src=
"images/HauntedHouse_web_14.gif" width="238" height="243" alt=
""></td>
<td colspan="2"><img src="images/HauntedHouse_web_15.gif" width=
"130" height="121" alt=""></td>
<td rowspan="4"><img src="images/HauntedHouse_web_16.gif" width=
"16" height="412" alt=""></td>
<td><img src="images/spacer.gif" width="1" height="121" alt=
""></td>
</tr>
<tr>
<td colspan="2" rowspan="3"><img src=
"images/HauntedHouse_web_17.gif" width="130" height="291" alt=
""></td>
<td><img src="images/spacer.gif" width="1" height="122" alt=
""></td>
</tr>
<tr>
<td colspan="2"><img src="images/HauntedHouse_web_18.gif" width=
"197" height="121" alt=""></td>
<td rowspan="2"><img src="images/HauntedHouse_web_19.gif" width=
"41" height="169" alt=""></td>
<td><img src="images/spacer.gif" width="1" height="121" alt=
""></td>
</tr>
<tr>
<td colspan="2"><img src="images/HauntedHouse_web_20.gif" width=
"197" height="48" alt=""></td>
<td><img src="images/spacer.gif" width="1" height="48" alt=
""></td>
</tr>
<tr>
<td><img src="images/spacer.gif" width="42" height="1" alt=
""></td>
<td><img src="images/spacer.gif" width="130" height="1" alt=
""></td>
<td><img src="images/spacer.gif" width="67" height="1" alt=
""></td>
<td><img src="images/spacer.gif" width="41" height="1" alt=
""></td>
<td><img src="images/spacer.gif" width="91" height="1" alt=
""></td>
<td><img src="images/spacer.gif" width="39" height="1" alt=
""></td>
<td><img src="images/spacer.gif" width="16" height="1" alt=
""></td>
<td><img src="images/spacer.gif" width="46" height="1" alt=
""></td>
<td><img src="images/spacer.gif" width="47" height="1" alt=
""></td>
<td><img src="images/spacer.gif" width="81" height="1" alt=
""></td>
<td></td>
</tr>
</table>
</div>


<img src="images/bat.gif" alt="" style=
"position: absolute; top: 110px; left: 0px;"> <img src=
"images/sign.gif" alt="" style=
"position: absolute; top: 600px; left: 100px;"> 
<!-- End ImageReady Slices -->
</body>
</html>

Upvotes: -2

Views: 48

Answers (1)

KompjoeFriek
KompjoeFriek

Reputation: 3885

There seems to be a padding of 1px around each td in your table. Please remove that padding, like so:

table.Table_01 td { 
  font-size: 0px;
  padding: 0px;  /* Add this line */
}

Upvotes: 1

Related Questions