我在我的网站中使用 HTML 模板来发送电子邮件,并且电子邮件中的一个部分使用 HTML 表格。
如何使用 HTML 获得以下输出
这是DEMO的 fiddle 我试过的
这是我的 HTML 代码
<table width="100%" cellspacing="3" cellpadding="0" style="border:1px solid black;border-collapse:collapse">
<tbody>
<tr>
<td colspan="3" style="background-color:#d9eeff;"><strong>Order Details</strong>
</td>
</tr>
<tr>
<td> <strong>Order ID:</strong>
</td>
<td>XSL VALUE</td>
</tr>
<tr>
<td> <strong>Date:</strong>
<br />
<br />
</td>
<td>XSL VALUE
<br />
<br />
</td>
</tr>
<tr>
<td> <strong>Payment Method:</strong>
<br />
<br />
</td>
<td>XSL VALUE
<br />
<br />
</td>
</tr>
<tr>
<td> <strong>Shipping Method:</strong>
<br />
<br />
</td>
<td>XSL VALUE
<br />
<br />
</td>
</tr>
</tbody>
</table>
最佳答案
您需要更改 HTML 以将 colspan
设置为 2
并添加 thead
以保持正确的语义。除此之外,就像 HTML 电子邮件的乐趣一样,您可能最好应用 CS 内联...不寒而栗。
Demo Fiddle
HTML
<table width="100%" cellspacing="3" cellpadding="0" style="border:1px solid black;border-collapse:collapse;font-family:arial;font-size:12px;">
<thead>
<tr style='background:lightgray;'>
<td colspan="2" style="padding:5px;font-weight:bold;">Order Details</td>
</tr>
</thead>
<tbody>
<tr>
<td style="padding:5px 0 0 5px;font-weight:bold;border-right:1px solid lightgray;width:50%;">Order ID: <span style='font-weight:normal;'>(value)</span>
</td>
<td style='padding-left:20px;'></td>
</tr>
<tr>
<td style="padding-left:5px;font-weight:bold;border-right:1px solid lightgray;width:50%;">Date: <span style='font-weight:normal;'>(value)</span>
</td>
<td style='padding-left:20px;font-weight:bold;'>Email: <span style='font-weight:normal;'>(value)</span>
</td>
</tr>
<tr>
<td style="padding-left:5px;font-weight:bold;border-right:1px solid lightgray;width:50%;">Payment Method: <span style='font-weight:normal;'>(value)</span>
</td>
<td style='padding-left:20px;font-weight:bold;'>Telephone: <span style='font-weight:normal;'>(value)</span>
</td>
</tr>
<tr>
<td style="padding:0 0 5px 5px;font-weight:bold;border-right:1px solid lightgray;width:50%;">Shipping Method: <span style='font-weight:normal;'>(value)</span>
</td>
<td style='padding-left:20px;'></td>
</tr>
</tbody>
</table>
关于html - 如何使用百分比划分 HTML 表格,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/22709607/