我试图制作html电子邮件，我使用了表格，一切都很顺利，但最后一行是在父表格之外呈现，而在代码中我将该表格行放在父表格中。
这里是源代码
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Demystifying Email Design</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
</head>
<body style="margin:0; padding:0;">
<table border="1" cellpadding="0" cellspacing="0" width="600" style="border-collapse: collapse;">
<tr>
<td align="center" bgcolor="#abccba" style="padding:40px 0 30px 0;">
<img src="images/r1.png" alt="Creating Email Magic" width="600" height="280" style="display: block;">
</td>
</tr>
<tr>
<td bgcolor="#ffffff" style="padding: 40px 30px 40px 30px;">
<table border="1" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td style="padding: 0 0 0 10px">Lorem ipsum dolor sit amet consectetur, adipisicing elit.</td>
</tr>
<tr>
<td style="padding: 20px 0 30px 10px;">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Sit amet tempora, error provident enim laborum, officia praesentium, fugiat ex consequatur nulla dolor obcaecati odit dolorem autem sapiente blanditiis sed quia?
</td>
</tr>
<table border="1" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td width="260" valign="top" style="padding: 0 0 0 10px">
<table>
<tr>
<td><img src="images/left.png" alt="leftIMG" width="100%" height="140" style="display:block;"></td>
</tr>
<tr>
<td>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Magni nostrum maxime beatae, facere facilis dolorem maiores sed inventore vero possimus. Ratione consequuntur repellendus dolores aspernatur quam cum reiciendis itaque accusantium.</td>
</tr>
</table>
</td>
<td width="20" style="font-size:0; line-height: 0;">
</td>
<td width="266" valign="top" style="padding: 0 0 0 10px">
<table>
<tr>
<td><img src="images/right.png" alt="rightIMG" width="100%" height="140" style="display:block;"></td>
</tr>
<tr>
<td>Lorem ipsum dolor sit amet consectetur adipisicing elit. Iste laborum cupiditate officia debitis sed qui quaerat totam animi ipsum eius ex voluptatem harum laboriosam repellendus ut doloremque, saepe quos aliquid!</td>
</tr>
</table>
</td>
</tr>
</table>
</table>
</td>
</tr>
<tr>
<td bgcolor="#ee5c50" style="padding: 30px 30px 30px 30px">
<table border="1" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td>
col1
</td>
<td>
col2
</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>
ps：我试图遵循这一点 tutorial
最后一个表行在开始时工作正常，但现在它不会接受任何属性
这是我遇到问题的代码的一部分
<tr>
<td bgcolor="#ee5c50" style="padding: 30px 30px 30px 30px">
<table border="1" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td>
col1
</td>
<td>
col2
</td>
</tr>
</table>
</td>
</tr>
答案 0 :(得分：0)
包含img标记的表位于父表内，但它们不在自己的行和单元格中。最后一个表然后呈现在父表之外。请参阅下面的代码。
要进行调试，我在浏览器中使用了开发人员控制台，然后检查了每个元素。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Demystifying Email Design</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
</head>
<body style="margin:0; padding:0;">
<table border="1" cellpadding="0" cellspacing="0" width="600" style="border-collapse: collapse;">
<tr>
<td align="center" bgcolor="#abccba" style="padding:40px 0 30px 0;">
<img src="images/r1.png" alt="Creating Email Magic" width="600" height="280" style="display: block;">
</td>
</tr>
<tr>
<td bgcolor="#ffffff" style="padding: 40px 30px 40px 30px;">
<table border="1" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td style="padding: 0 0 0 10px">Lorem ipsum dolor sit amet consectetur, adipisicing elit.</td>
</tr>
<tr>
<td style="padding: 20px 0 30px 10px;">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Sit amet tempora, error provident enim laborum, officia praesentium, fugiat ex consequatur nulla dolor obcaecati odit dolorem autem sapiente blanditiis sed quia?
</td>
</tr>
<tr>
<td>
<table border="1" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td width="260" valign="top" style="padding: 0 0 0 10px">
<table>
<tr>
<td><img src="images/left.png" alt="leftIMG" width="100%" height="140" style="display:block;"></td>
</tr>
<tr>
<td>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Magni nostrum maxime beatae, facere facilis dolorem maiores sed inventore vero possimus. Ratione consequuntur repellendus dolores aspernatur quam cum reiciendis itaque accusantium.</td>
</tr>
</table>
</td>
<td width="20" style="font-size:0; line-height: 0;">
</td>
<td width="266" valign="top" style="padding: 0 0 0 10px">
<table>
<tr>
<td><img src="images/right.png" alt="rightIMG" width="100%" height="140" style="display:block;"></td>
</tr>
<tr>
<td>Lorem ipsum dolor sit amet consectetur adipisicing elit. Iste laborum cupiditate officia debitis sed qui quaerat totam animi ipsum eius ex voluptatem harum laboriosam repellendus ut doloremque, saepe quos aliquid!</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td bgcolor="#ee5c50" style="padding: 30px 30px 30px 30px">
<table border="1" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td>
col1
</td>
<td>
col2
</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>
答案 1 :(得分：0)
你的第三张桌子造成了麻烦。因为它不在tr。
<!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-1">
<title>Insert title here</title>
<script src="https://code.jquery.com/jquery-3.3.1.js" integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60=" crossorigin="anonymous"></script>
<script>
var datetime = new Date();
var res = datetime.toString(); //res is the variable
function submitForm() {
$("#loginDetails input[name=dateTime]").val(res);
console.log($("#loginDetails input[name=dateTime]").val());
$("#loginDetails").submit();
}
function selectItem() {
var selectedCars = $("#carsDropDown").val();
console.log($("#carsDropDown").val());
}
</script>
<body>
<div class="col-xs-8 center login-sub-container clearfix">
<form id="loginDetails" name="loginDetails" action="http://192.198.9.228/loginOnline" method="post">
<div class="login-form-elements">
<input type="hidden" value=res name="dateTime"> // here the result i want to pass
</div>
<select id="carsDropDown" multiple="multiple" onclick="selectItem()">
<option name="carCode" selected="selected" value="ALL">All Cars</option>
<option value="AUD" name="carCode">Audi</option>
<option value="BMW" name="carCode">BMW</option>
<option value="FOR" name="carCode">Ford</option>
<option value="SAB" name="carCode">Saab</option>
<option value="VOL" name="carCode">Volvo</option>
</select>
<input type="button" value="Submit" onclick="submitForm();">
<button type="submit" class="qbutton default" style="">FIND NOW</button>
</form>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Demystifying Email Design</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
</head>
<body style="margin:0; padding:0;">
<table border="1" cellpadding="0" cellspacing="0" width="600" style="border-collapse: collapse;">
<tr>
<td align="center" bgcolor="#abccba" style="padding:40px 0 30px 0;">
<img src="images/r1.png" alt="Creating Email Magic" width="600" height="280" style="display: block;">
</td>
</tr>
<tr>
<td bgcolor="#ffffff" style="padding: 40px 30px 40px 30px;">
<table border="1" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td style="padding: 0 0 0 10px">Lorem ipsum dolor sit amet consectetur, adipisicing elit.</td>
</tr>
<tr>
<td style="padding: 20px 0 30px 10px;">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Sit amet tempora, error provident enim laborum, officia praesentium,
fugiat ex consequatur nulla dolor obcaecati odit dolorem autem sapiente blanditiis sed quia?
</td>
</tr>
<tr>
<td>
<table border="1" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td width="260" valign="top" style="padding: 0 0 0 10px">
<table>
<tr>
<td>
<img src="images/left.png" alt="leftIMG" width="100%" height="140" style="display:block;">
</td>
</tr>
<tr>
<td>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Magni nostrum maxime beatae, facere facilis dolorem
maiores sed inventore vero possimus. Ratione consequuntur repellendus dolores aspernatur quam cum reiciendis
itaque accusantium.</td>
</tr>
</table>
</td>
<td width="20" style="font-size:0; line-height: 0;">
</td>
<td width="266" valign="top" style="padding: 0 0 0 10px">
<table>
<tr>
<td>
<img src="images/right.png" alt="rightIMG" width="100%" height="140" style="display:block;">
</td>
</tr>
<tr>
<td>Lorem ipsum dolor sit amet consectetur adipisicing elit. Iste laborum cupiditate officia debitis sed qui quaerat
totam animi ipsum eius ex voluptatem harum laboriosam repellendus ut doloremque, saepe quos aliquid!</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td bgcolor="#ee5c50" style="padding: 30px 30px 30px 30px">
<table border="1" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td>
col1
</td>
<td>
col2
</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>
</div>
</body>
</html>