多年前我创建了一个万圣节电子贺卡 - HTML 4.01 -
https://www.bethanyec.co.uk/HauntedHouse_web.html。
它基本上是一张带有 Photoshop 图像切片的表格。
当我尝试将代码升级到 HTML 5 时，我无法抑制多余的、不需要的空格。
https://www.bethanyec.co.uk/_HauntedHouse_web.html
我已经尝试了许多修复，但没有一个奏效。
<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>
HTML 5 代码：
<!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>