I had another topic on this but I think its just gonna die.

Generated a poker hand, and I want to put each card value in a table cell....I want the cells to be aligned horizontal, but they are coming out vertical.



function sortCards(a,b) {
if (a.rank.order > b.rank.order) {
return 1;
} else if (a.rank.order < b.rank.order) {
return -1;
}
}

var suits = [
{name:"clubs", symbol:"\u2663", color:"black", order:1},
{name:"diamonds", symbol:"\u2666", color:"red", order:2},
{name:"hearts", symbol:"\u2665", color:"red", order:3},
{name:"spades", symbol:"\u2660", color:"black", order:4}
];


var cards = [
{symbol:"A", order:1},
{symbol:"2", order:2},
{symbol:"3", order:3},
{symbol:"4", order:4},
{symbol:"5", order:5},
{symbol:"6", order:6},
{symbol:"7", order:7},
{symbol:"8", order:8},
{symbol:"9", order:9},
{symbol:"10", order:10},
{symbol:"J", order:11},
{symbol:"Q", order:12},
{symbol:"K", order:13}
];

var deck = [];

for (var i=0; i < suits.length; i++) {
for (var j=0; j < cards.length; j++) {
var card = {rank: cards[j], suit: suits[i]};
deck.push(card);
}
}


var hand = [];

for (var i=0; i < 5; i++) {
var cardIndex = Math.floor(deck.length * Math.random());
var card = deck[cardIndex];
deck.splice(cardIndex,1);
hand.push(card);

}

// sort the hand array using the sortCards function (sorts by rank then suit)

hand.sort(sortCards);

// display the hand array
document.write("<table border='2' bordercolor='black' style='background-color:green'>");
document.write("<tr>");
document.write("<td>");
for (var i= 0; i < hand.length; i++) {
var card = hand[i];
document.write("<span style='color:" + card.suit.color + "'>" + card.rank.symbol + card.suit.symbol + "</span> ");
document.write("</td>");
document.write("</tr>");
document.write("</table>");
}