Using HTML Tables In jQuery And Formatting Issue

Using HTML Tables In jQuery And Formatting Issue

I have an issue when pushing out data in a html table using jQuery.

I want my data to look like:

000111 - (01/09/2012) S1
Order sent.

000222 - (28/08/2012) S2
Issue with packaging.

000333 - (31/08/2012) S2
Left with neighbour as customer was not at home.

000444 - (27/08/2012) S3
Signed.

000555 - (01/09/2012) S1
Out of stock

Which, in a standard html should look like:
 <table class="style1">
<tr>
                <td>
                    OrderNumber +  OrderDate
                </td>
                <td>
                   SNo
                </td>
            </tr>
            <tr>
                <td colspan="2">
                    OrderDetail</td>
            </tr>
        </table>













Yet, my data seems to be quite oddly positioned:

000111 - (01/09/2012)

S1

 

Order sent.

 

S2

000222 - (28/08/2012)

Issue with packaging.

S2

000333 - (31/08/2012)

Left with neighbour as customer was not at home.

S3

000444 - (27/08/2012)

Signed.

S1

000555 - (01/09/2012)

Out of stock


My code to produce the table is as follows:
$(function () {
                div = "<table>"
$.each(html.split('*').slice(0), function (i, line) {
                    $('#output').append('<table>');
                    $("div.zebra").width('100%');
                    fields = line.split(',')
$('#output').append('<tr><td><b>' + fields[0] + '</b>  -  ' + fields[2] + '</td><td> ...S' + fields[1] + '</td></tr>');
$('#output').append('<tr><td colspan="2">' + fields[3] + '</td></tr>');
$("tr:odd").css("background-color", "#C6D9F1");
$("tr:odd").css("line-height", "120%");
$("tr:even").css("background-color", "white");
div += "</table>"
                })













Any help appreciated.