如何使用百分比划分HTML表_Html_Css_Html Table

如何使用百分比划分HTML表

html css

如何使用百分比划分HTML表,html,css,html-table,Html,Css,Html Table,我在我的网站上使用HTML模板发送电子邮件，其中一个部分使用HTML表格如何使用HTML获得以下输出这是我试过的一把小提琴这是我的HTML代码 <table width="100%" cellspacing="3" cellpadding="0" style="border:1px solid black;border-collapse:collapse"> <tbody> <tr> <td col

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

如何使用HTML获得以下输出

这是我试过的一把小提琴

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


订单详细信息
订单ID:
XSL值
日期：




XSL值




付款方式：




XSL值




装运方式：




XSL值

您需要清点您的TD标签

正如您在第一行中指定的td colspan=“3”

所有其他行应至少有3个td标记或指定colspan值的td标记

我的建议是使用CSS。如果不可能，请计算您需要多少列并遵守前面的规则

您需要计算TD标签

正如您在第一行中指定的td colspan=“3”

所有其他行应至少有3个td标记或指定colspan值的td标记

我的建议是使用CSS。如果不可能，请计算需要多少列并遵守前面的规则

您需要更改HTML以将

colspan

设置为

，并添加

thead

，以保持正确的语义。除此之外，就像HTML电子邮件的乐趣一样，你最好将你的CS内联应用……不寒而栗

HTML


订单详情
订单ID:（值）
日期：（价值）
电子邮件：（价值）
付款方式：（价值）
电话：（价值）
装运方式：（价值）

您需要更改HTML，将

colspan

设置为

，并添加

thead

，以保持正确的语义。除此之外，就像HTML电子邮件的乐趣一样，你最好将你的CS内联应用……不寒而栗

HTML


订单详情
订单ID:（值）
日期：（价值）
电子邮件：（价值）
付款方式：（价值）
电话：（价值）
装运方式：（价值）


订单详细信息
订单编号：
日期：
电邮：
付款方式：
电话：
装运方式：


订单详细信息
订单编号：
日期：
电邮：
付款方式：
电话：
装运方式：

试试这个

<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>


订单详细信息
订单编号：
XSL值
日期：
XSL值
付款方式：
XSL值
装运方式：
XSL值

这里有一个实用的

试试这个

<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>


订单详细信息
订单编号：
XSL值
日期：
XSL值
付款方式：
XSL值
装运方式：
XSL值

这是一份工作报告

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>


订单详细信息
订单ID:
XSL值
日期：




XSL值




付款方式：




XSL值




装运方式：




XSL值




电子邮件：
<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>

<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>