<table id="map_table">
<?php
$cards = array();
$cd = 1;//カードカウント用
$alfa = array("A","B","C","D","E","F","G","H","I","J","K","L","M","N","O","P","Q","S","T","U","V","W","X","Y","Z");
for($i=1;$i<=4;$i++){
for($k=1;$k<=13;$k++){
	switch($i){
		case 1 : $card_type = '&#9829;'; break;
		case 2 : $card_type = '&#9830;'; break;
		case 3 : $card_type = '&#9824;'; break;
		case 4 : $card_type = '&#9827;'; break;
	}
	$cards[] = $card_type.'/'.$k;
}
}
//MAPオブジェクト追加
for($y=1;$y<=10;$y++){
	$cards[] = '山';
}
for($y=1;$y<=3;$y++){
	$cards[] = '泉';
}
$cards[] .= 'j'; //ジョーカー追加
shuffle($cards);
//テーブルの列と行
$td = 8;
$tr =6;
echo "<thead>\n<tr>\n";
for($j=1;$j<=$td;){
	if($j==1){
		echo '<th>・</th>';
	}else{
		echo '<th>'.$alfa[$j-2].'</th>';
	}
	$j++;
}
echo "</tr>\n</thead>";
?>
<?php for($i=1; $i<=(($tr-1)*$td); $i++):?>
<?php if(($i%$td)==1) echo "\n<tr>\n";?>
	<?php if(($i%$td)==1){
		echo "<th>";
	}else{
		echo "<td>";
	}?>
<?php
	if(($i%$td)==1){
		echo floor($i/$td)+1;
	}else{
		//echo '■';
		echo '<p>'.$cards[$cd].'</p>';
		$cd++;
	}
?>
<?php if(($i%$td)==1){
	echo "</th>\n";
}else{
	echo "</td>\n";
}?>
<?php if(($i%$td)==0) echo "</tr>\n";?>
<?php endfor;?>
</table>

<div id="map_text">
<?php
//列頭のみfor文の回数を1回すくなく。　$j=2となっている。
echo '.┃・┃';
for($j=2;$j<=$td;$j++){
echo ".".$alfa[$j-2].'┃';
}
echo "<br>\n";
echo '.╋';
for($j=1;$j<=$td;$j++){
	echo "━╋";
}
echo "<br>\n";
?>
<?php
$cd = 1;
for($i=1; $i<=(($tr-1)*$td); $i++):?>
<?php
	$line = floor($i/$td)+1;
		if($i==1){
			echo ".┃.";
			echo floor($i/$td)+1;
			echo "┃";
			$j=0;
		}elseif(($i%$td)==1){
			echo "<br>\n.┃.";
			echo floor($i/$td)+1;
			echo "┃";
			$j=0;
		}else{
			if($cards[$cd]=="山"||$cards[$cd]=="泉"){
				echo '<span class="map_obj">'.$cards[$cd].'</span>┃';
			}else{
				echo '<span class="card_front">■</span><span class="card_text hide">'.$line.'：'.$alfa[$j].'｜'.$cards[$cd].'</span><span class="card_back">□</span>┃';
			}
			$cd++;
			$j++;
		}
?>
<?php
	if(($i%$td)==0){
		echo "<br>\n.╋";
		for($j=1;$j<=$td;$j++) echo "━╋";
	}
?>
<?php endfor;?>

jQuery(document).ready(function(){
$('#map_text .card_front').click(function(){
	var card_text = $(this).next('span.card_text').text();
		$(this).hide(10,function(){
				$(this).next().next('span.card_back').show();
		});
		$('#history').append("<li>"+card_text+"</li>");
});

});

実行するとこんな感じ
.┃・┃.A┃.B┃.C┃.D┃.E┃.F┃.G┃
.╋━╋━╋━╋━╋━╋━╋━╋━╋
.┃.1┃■┃■┃山┃■┃■┃■┃泉┃
.╋━╋━╋━╋━╋━╋━╋━╋━╋
.┃.2┃■┃■┃■┃山┃■┃■┃山┃
.╋━╋━╋━╋━╋━╋━╋━╋━╋
.┃.3┃■┃山┃■┃山┃■┃■┃■┃
.╋━╋━╋━╋━╋━╋━╋━╋━╋
.┃.4┃■┃■┃■┃■┃泉┃■┃■┃
.╋━╋━╋━╋━╋━╋━╋━╋━╋
.┃.5┃■┃■┃■┃山┃山┃■┃■┃
.╋━╋━╋━╋━╋━╋━╋━╋━╋