如何使用百分比划分HTML表

时间：2014-03-28 10:04:47

标签： html css html-table

我在我的网站中使用HTML模板发送电子邮件，电子邮件中的一个部分使用HTML表格。

如何使用HTML获取以下输出 enter image description here

这是DEMO我试过的小提琴

这是我的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>

6 个答案:

答案 0 :(得分：2)

您需要更改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>

答案 1 :(得分：1)

<HTML>

<BODY>
<table width="100%" cellspacing="3" cellpadding="0" style="border:1px solid black;border-collapse:collapse">
    <thead>
            <td colspan="3" style="background-color:#d9eeff;"><strong>Order Details</strong>
            </td>
      </thead>
      <tbody>
        <tr>
            <td>Order Id:<td>
            <td></td>
        </tr>
        <tr>
            <td>Date:<td>
            <td>Email:</td>
        </tr>
        <tr>
            <td>Payment Method:<td>
            <td>Telephone:</td>
        </tr>
        <tr>
            <td>Shipping Method:<td>
            <td></td>
        </tr>
    </tbody>
</table>
</BODY>
</HTML>

答案 2 :(得分：0)

您需要统计TD标签

如你所指定td colspan =＆＃34; 3＆＃34;在第一行

所有其他行至少应该有3个td标签或td标签指定一个colspan值。

我的建议使用CSS代替。如果不可能计算您需要多少列并尊重之前的规则

答案 3 :(得分：0)

试试这个

<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:#c0c0c0;'>
            <td colspan="2" style="padding:5px;"><strong>Order Details</strong>

            </td>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td style="padding:5px 0 0 5px;font-weight:bold;border-right:1px solid black;">Order ID:</td>
            <td style="padding:0 0 0 5px;">XSL VALUE</td>
        </tr>
        <tr>
            <td style="padding-left:5px;font-weight:bold;border-right:1px solid black;">Date:</td>
            <td style="padding:0 0 0 5px;">XSL VALUE</td>
        </tr>
        <tr>
            <td style="padding-left:5px;font-weight:bold;border-right:1px solid black;">Payment Method:</td>
            <td style="padding:0 0 0 5px;">XSL VALUE</td>
        </tr>
        <tr>
            <td style="padding:0 0 5px 5px;font-weight:bold;border-right:1px solid black;">Shipping Method:</td>
            <td style="padding:0 0 0 5px;">XSL VALUE</td>
        </tr>
    </tbody>
</table>

这是一个有效的fiddle

答案 4 :(得分：0)

Working Fiddle
HTML代码 

<table width="100%" cellspacing="3" cellpadding="0" style="border:1px solid black;border-collapse:collapse">
    <tbody>
        <tr>
            <td colspan="2" style="background-color:#d9eeff;"><strong>Order Details</strong></td>
        </tr>
        <tr>
            <td>
                <table>
                    <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>
                </table>
            </td>
            <td>
                <table>
                    <tr>
                        <td> <strong>Email:</strong>

                        </td>
                        <td>XSL VALUE</td>
                        <tr>
                            <td> <strong>Telephone:</strong>

                            </td>
                            <td>XSL VALUE</td>
                        </tr>
                    </tr>
                </table>
            </td>
        </tr>
    </tbody>
</table>

希望这可能会有所帮助.. !!

答案 5 :(得分：0)

使用此HTML代码：

http://jsfiddle.net/mkginfo/vWy6R/ 

<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 colspan="2" width="50%">
            <table>
                <tr>
                    <td> <strong>Order ID:</strong>

                    </td>
                    <td>XSL VALUE</td>
                </tr>
                <tr>
                    <td> <strong>Date:</strong>
                    </td>
                    <td>XSL VALUE
                    </td>
                </tr>
                <tr>
                    <td> <strong>Payment Method:</strong>
                    </td>
                    <td>XSL VALUE
                    </td>
                </tr>
                <tr>
                    <td> <strong>Shipping Method:</strong>
                    </td>
                    <td>XSL VALUE
                    </td>
                </tr>
            </table>
            </td>
            <td colspan="2" width="50%">
            <table>
                <tr>
                    <td> <strong></strong></td>
                    <td></td>
                </tr>
                <tr>
                    <td> <strong>Email:</strong>
                    </td>
                    <td>XSL VALUE

                    </td>
                </tr>
                <tr>
                    <td> <strong>Telephone:</strong>
                    </td>
                    <td>XSL VALUE

                    </td>
                </tr>
                <tr>
                    <td> <strong></strong>
                    </td>
                    <td>
                    </td>
                </tr>
            </table>
            </td>
        </tr>
    </tbody>
</table>
相关问题
最新问题