#html #css
#HTML #css
Вопрос:
Я изучаю, как создавать html-шаблоны для информационных бюллетеней, и было предложено использовать пустые ячейки вместо заполнения, чтобы избежать шаткости почтовых клиентов. В то время как использование пустого тега с атрибутом фиксированной ширины для получения вертикального заполнения работает нормально, когда я пытаюсь использовать атрибут width для получения горизонтального заполнения, моя таблица полностью ломается. Ширина таблицы уменьшается до половины. Кто-нибудь может указать, что я делаю не так?
Это то, что в итоге происходит
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" lang="en-US">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Test News Letter</title>
<meta name="viewport" content="width=device-width; initial-scale=1.0" />
</head>
<body style="margin: 0; padding: 0;">
<table id="container" role="presentation" border="1" cellpadding="0" cellspacing="0" width="100%">
<table align="center" border="1" cellpadding="0" cellspacing="0" width="600" style="border-collapse: collapse;">
<!--Header-->
<tr>
<td bgcolor="#70bbd9" style="line-height: 0; font-size: 0;" height="40">amp;nbsp;</td>
</tr>
<tr>
<td align="center" bgcolor="#70bbd9">
<img src="someGif.gif" alt="News Letter" width="300" height="230" style="display: block;"/>
</td>
</tr>
<tr>
<td bgcolor="#70bbd9" style="line-height: 0; font-size: 0;" height="30">amp;nbsp;</td>
</tr>
<!--Content-->
<tr>
<td style="line-height: 0; font-size: 0;" height="40">amp;nbsp;</td>
</tr>
<tr>
<td style="line-height: 0; font-size: 0; " width="40">amp;nbsp;</td>
<td bgcolor="#ffffff">
<p style="margin: 0;">Row 2</p>
</td>
<td style="line-height: 0; font-size: 0; " width="40">amp;nbsp;</td>
</tr>
<tr>
<td style="line-height: 0; font-size: 0;" height="40">amp;nbsp;</td>
</tr>
<tr>
<td bgcolor="#ee4c50">
<p style="margin: 0;">Row 3</p>
</td>
</tr>
</table>
</table>
</body>
</html>
Ответ №1:
В вашей строке 2 есть 3 <td> , поэтому в ней будет 3 столбца, но в других строках есть только одна ячейка. Если вы абсолютно хотите использовать этот метод, вы должны установить все свои одиночные <td> , чтобы заполнить пространство в 3 столбца.
Итак, складываем colspan="3" друг на друга ячейки. <td colspan="3" ... >
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" lang="en-US">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Test News Letter</title>
<meta name="viewport" content="width=device-width; initial-scale=1.0" />
</head>
<body style="margin: 0; padding: 0;">
<table id="container" role="presentation" border="1" cellpadding="0" cellspacing="0" width="100%">
<table align="center" border="1" cellpadding="0" cellspacing="0" width="600" style="border-collapse: collapse;">
<!--Header-->
<tr>
<td bgcolor="#70bbd9" colspan="3" style="line-height: 0; font-size: 0;" height="40">amp;nbsp;</td>
</tr>
<tr>
<td align="center" colspan="3" bgcolor="#70bbd9">
<img src="someGif.gif" alt="News Letter" width="300" height="230" style="display: block;"/>
</td>
</tr>
<tr>
<td bgcolor="#70bbd9" colspan="3" style="line-height: 0; font-size: 0;" height="30">amp;nbsp;</td>
</tr>
<!--Content-->
<tr>
<td colspan="3" style="line-height: 0; font-size: 0;" height="40">amp;nbsp;</td>
</tr>
<tr>
<td style="line-height: 0; font-size: 0; " width="40">amp;nbsp;</td>
<td bgcolor="#ffffff">
<p>Row 2</p>
</td>
<td style="line-height: 0; font-size: 0; " width="40">amp;nbsp;</td>
</tr>
<tr>
<td style="line-height: 0; font-size: 0;" height="40">amp;nbsp;</td>
</tr>
<tr>
<td colspan="3" bgcolor="#ee4c50">
<p>Row 3</p>
</td>
</tr>
</table>
</table>
</body>
</html>