Это я для себя выложил.
домой приду продолжу, но если вы сами поймете мою задумку, то очень хорошо)
<!DOCTYPE html>
<html lang="en">
<head>
<script src="http://code.jquery.com/jquery-1.11.1.js"></script>
<meta charset="UTF-8">
<title>Document</title>
</head>
<scrit src="http://code.jquery.com/jquery-latest.min.js"></script>
<style>
p{
border: 1px solid black;
width: 50px;
height: 50px;
display: table-cell;
text-align: center;
vertical-align: middle;
}
.blue{
background-color: blue;
}
.purple{
background-color: #AD009F;
}
.red{
background-color: red;
}
.green{
background-color: green;
}
</style>
<script>
</script>
<body>
<div id="position">
<input type="radio" name="position" checked="true">BU</input>
<input type="radio" name="position">SB</input>
<input type="radio" name="position">BB</input>
</div>
<div id="stack">
<input type="radio" name="stack">5BB</input>
<input type="radio" name="stack">10BB</input>
<input type="radio" name="stack">15BB</input>
<input type="radio" name="stack" checked="true">20BB</input>
</div>
<div>
<div id="line1"><p id="v14140">AA</p><p id="v14122">AKs</p><p id="v14122">AQs</p><p id="v14112">AJs</p><p id="v14102">ATs</p><p id="v1492">A9s</p><p id="v1482">A8s</p><p id="v1472">A7s</p><p id="v1462">A6s</p><p id="v1452">A5s</p><p id="v1442">A4s</p><p id="v1432">A3s</p><p id="v1422">A2s</p></div>
<div id="line2"><p id="v14131">AKо</p><p id="v13130">KK</p><p id="v13122">KQs</p><p id="v13112">KJs</p><p id="v13102">KTs</p><p id="v1392">K9s</p><p id="v1382">K8s</p><p id="v1372">K7s</p><p id="v1362">K6s</p><p id="v1352">K5s</p><p id="v1342">K4s</p><p id="v1332">K3s</p><p id="v1322">K2s</p></div>
<div id="line3"><p id="v14121">AQo</p><p id="v13121">KQo</p><p id="v12120">QQ</p><p id="v12112">QJs</p><p id="v12102">QTs</p><p id="v1292">Q9s</p><p id="v1282">Q8s</p><p id="v1272">Q7s</p><p id="v1262">Q6s</p><p id="v1252">Q5s</p><p id="v1242">Q4s</p><p id="v1232">Q3s</p><p id="v1222">Q2s</p></div>
<div id="line4"><p id="v14111">AJo</p><p id="v13111">KJo</p><p id="v11121">QJo</p><p id="v11110">JJ</p><p id="v11102">JTs</p><p id="v1192">J9s</p><p id="v1182">J8s</p><p id="v1172">J7s</p><p id="v1162">J6s</p><p id="v1152">J5s</p><p id="v1142">J4s</p><p id="v1132">J3s</p><p id="v1122">J2s</p></div>
<div id="line5"><p id="v14101">ATo</p><p id="v13101">KTo</p><p id="v12101">QTo</p><p id="v11101">JTo</p><p id="v10100">TT</p><p id="v1092">T9s</p><p id="v1082">T8s</p><p id="v1072">T7s</p><p id="v1062">T6s</p><p id="v1052">T5s</p><p id="v1042">T4s</p><p id="v1032">T3s</p><p id="v1022">T2s</p></div>
<div id="line6"><p id="v1491">A9o</p><p id="v1391">K9o</p><p id="v1291">Q9o</p><p id="v1191">J9o</p><p id="v1091">T9o</p><p id="v990">99</p><p id="v982">98s</p><p id="v972">97s</p><p id="v962">96s</p><p id="v952">95s</p><p id="v942">94s</p><p id="v932">93s</p><p id="v922">92s</p></div>
<div id="line7"><p id="v1481">A8o</p><p id="v1381">K8o</p><p id="v1281">Q8o</p><p id="v1181">J8o</p><p id="v1081">T8o</p><p id="v981">98o</p><p id="v880">88</p><p id="v872">87s</p><p id="v862">86s</p><p id="v852">85s</p><p id="v842">84s</p><p id="v832">83s</p><p id="v822">82s</p></div>
<div id="line8"><p id="v1471">A7o</p><p id="v1371">K7o</p><p id="v1271">Q7o</p><p id="v1171">J7o</p><p id="v1071">T7o</p><p id="v971">97o</p><p id="v871">87o</p><p id="v770">77</p><p id="v762">76s</p><p id="v752">75s</p><p id="v742">74s</p><p id="v732">73s</p><p id="v722">72s</p></div>
<div id="line9"><p id="v1461">A6o</p><p id="v1361">K6o</p><p id="v1261">Q6o</p><p id="v1161">J6o</p><p id="v1061">T6o</p><p id="v961">96o</p><p id="v861">86o</p><p id="v761">76o</p><p id="v660">66</p><p id="v652">65s</p><p id="v642">64s</p><p id="v632">63s</p><p id="v622">62s</p></div>
<div id="line10"><p id="v1451">A5o</p><p id="v1351">R5o</p><p id="v1251">Q5o</p><p id="v1151">J5o</p><p id="v1051">T5o</p><p id="v951">95o</p><p id="v851">85o</p><p id="v751">75o</p><p id="v651">65o</p><p id="v550">55</p><p id="v542">54s</p><p id="v532">53s</p><p id="v522">52s</p></div>
<div id="line11"><p id="v1441">A4o</p><p id="v1341">K4o</p><p id="v1241">Q4o</p><p id="v1141">J4o</p><p id="v1041">T4o</p><p id="v941">94o</p><p id="v841">84o</p><p id="v741">74o</p><p id="v641">64o</p><p id="v541">54o</p><p id="v440">44</p><p id="v432">43s</p><p id="v422">42s</p></div>
<div id="line12"><p id="v1531">A3o</p><p id="v1331">K3o</p><p id="v1231">Q3o</p><p id="v1131">J3o</p><p id="v1031">T3o</p><p id="v931">93o</p><p id="v831">83o</p><p id="v731">73o</p><p id="v631">63o</p><p id="v531">53o</p><p id="v431">43o</p><p id="v330">33</p><p id="v322">32s</p></div>
<div id="line13"><p id="v1421">A2o</p><p id="v1321">K2o</p><p id="v1221">Q2o</p><p id="v1121">J2o</p><p id="v1021">T2o</p><p id="v921">92o</p><p id="v821">82o</p><p id="v721">72o</p><p id="v621">62o</p><p id="v521">52o</p><p id="v421">42o</p><p id="v321">32o</p><p id="v220">22</p></div>
</div>
</body>
</html>