CODEWITHSUNDEEP
htmlcsshtml-table
MarsOne
MarsOne

Reputation: 2186

How to divide a HTML table using percentages

I am using a HTML template in my website that send emails and one of the sections in the email uses HTML tables.

How can i use HTML to get the following output enter image description here

Here is a fiddle to DEMO what i have tried

Here is my HTML code

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

Upvotes: 0

Views: 2832

Answers (6)

Mohit Kumar Gupta
Mohit Kumar Gupta

Reputation: 362

USE THIS HTML CODE:

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>

Upvotes: 1

Bhavik
Bhavik

Reputation: 4894

Working Fiddle
HTML Code

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

Hope this might help..!!

Upvotes: 0

James
James

Reputation: 4580

Try this

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

Here is a working fiddle

Upvotes: 0

SW4
SW4

Reputation: 71140

You need to change your HTML to set colspan to 2 and also add a thead in order to maintain correct semantics. Other than that, as is the joy of HTML email, you're likely best applying your CS inline...shudder.

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>

Upvotes: 2

ssss
ssss

Reputation: 76

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

Upvotes: 1

AMS
AMS

Reputation: 439

you need to count your TD Tags

as you specified td colspan="3" in the first row

all other rows should at least have 3 td tags or td tags specifiying a colspan value.

and my advice use CSS instead. If not possible count how much columns you need and respect the previous rules

Upvotes: 0

Related Questions