Aligning Contents of Span - html

Question

I have a Table with content and i cannot figure out how to align the content of the spans inside the table.
HERE IS THE FIDDLE
Here is have pasted 2 images. 1st image is actual result and second is desired result.I think that explains it all...
CODE:
<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-color: #d3d3d3;">
<td colspan="2" style="padding: 5px; font-weight: bold;">Order Details</td>
</tr>
</thead>
<tbody>
<tr>
<td style="padding: 5px 0px 0px 5px; font-weight: bold; border-right-width: 1px; border-right-style: solid; border-right-color: #d3d3d3; width: 60%;">Order ID: <span style="font-weight: normal;text-align">#YCKY141</span>
</td>
<td style="padding-left: 20px; font-weight: bold;">Email: <span style="font-weight: normal;">wyz#ymca.com</span></td>
</tr>
<tr>
<td style="padding-left: 5px; font-weight: bold; border-right-width: 1px; border-right-style: solid; border-right-color: #d3d3d3; width: 60%;">Date: <span style="font-weight: normal;">28/03/2014</span>
</td>
<td style="padding-left: 20px; font-weight: bold;">Telephone: <span style="font-weight: normal;">XXX-XXX-XXXX</span>
</td>
</tr>
<tr>
<td style="padding-left: 5px; font-weight: bold; border-right-width: 1px; border-right-style: solid; border-right-color: #d3d3d3; width: 60%;">Payment Method: <span style="font-weight: normal;">On Invoice</span>
</td>
</tr>
<tr>
<td style="padding: 0px 0px 5px 5px; font-weight: bold; border-right-width: 1px; border-right-style: solid; border-right-color: #d3d3d3; width: 60%;">Shipping Method: <span style="font-weight: normal;">Royal Mail</span>
</td>
<td style="padding-left: 20px;"></td>
</tr>
</tbody>
</table>

Answer 1

Little bit changes you have to apply to your table.
have a look at Demo
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-color: #d3d3d3;">
<td colspan="2" style="padding: 5px; font-weight: bold;">Order Details</td>
</tr>
</thead>
<tbody>
<tr>
<td style="border-right-style: solid; border-right-color: #d3d3d3; border-width:1px">
<table>
<tr>
<td style="padding: 5px 0px 0px 5px; font-weight: bold; ; width: 60%;">Order ID:
</td>
<td style="padding-left: 20px;"><span style="font-weight: normal; text-align">#YCKY141</span></td>
</tr>
<tr>
<td style="padding: 0px 0px 5px 5px; font-weight: bold; width: 60%;">Date:
</td>
<td style="padding-left: 20px;"><span style="font-weight: normal;">28/03/2014</span></td>
</tr>
<tr>
<td style="padding: 0px 0px 5px 5px; font-weight: bold; width: 60%;">payment Method:
</td>
<td style="padding-left: 20px;"><span style="font-weight: normal;">OnInvoice</span></td>
</tr>
<tr>
<td style="padding: 0px 0px 5px 5px; font-weight: bold; width: 60%;">Shipping Method:
</td>
<td style="padding-left: 20px;"><span style="font-weight: normal;">Royal Mail</span></td>
</tr>
</table>
</td>
<td style="vertical-align:top">
<table>
<tr>
<td>Email :
</td>
<td>
<span style="font-weight: normal;">wyz#ymca.com</span>
</td>
</tr>
<tr>
<td>Telephone:
</td>
<td>
<span style="font-weight: normal;">XXX-XXX-XXXX</span>
</td>
</tr>
</table>
</td>
</tr>
</tbody>
</table>

Answer 2

You just need to use a proper table layout:
<table>
<thead>
<tr>
<td colspan="4" class="headline">Order Details</td>
</tr>
</thead>
<tbody>
<tr>
<td class="first">Order ID:</td>
<td class="second">#YCKY141</td>
<td class="third"></td>
<td class="fourth"></td>
</tr>
<tr>
<td class="first">Date:</td>
<td class="second">2014-03-28</td>
<td class="third">Email</td>
<td class="fourth">wyz#ymca.com</td>
</tr>
</tbody>
</table>
CSS:
body {
font-family: Arial;
font-size: 12px;
}
table {
border: 1px solid #000;
border-collapse: collapse;
}
.headline {
background-color: #d3d3d3;
font-weight: bold;
padding: 5px;
}
.first,
.third {
font-weight: bold;
padding: 0 5px;
width: 20%;
}
.second,
.fourth {
width: 30%;
}
.third {
border-left: 1px solid #d3d3d3;
}
Demo: http://jsfiddle.net/kZ7Hj/

Answer 3

Wrap each key (Order Id, Date, etc.) in a span with display:inline-block and a width.
Example:
<span style="display:inline-block;width:40%;">Order Id</span>
Edit: Be sure to remove the inline styles when you're done experimenting. It'll make maintenance and debugging a lot easier. Just saw your comment about this being for an email template. I haven't looked at css support in email clients in some time and display:inline-block might not be supported.

Answer 4

I'm not sure if that is what you want but I applied :
<div style="width:200px; display:inline-block;">..</div>
on labels and it seems to be aligned just fine.
Here you can find an example: http://jsfiddle.net/LxD9N/12/

Answer 5

Replace the <span> element with an extra <td> element and align it.