PHP is a multi-dimensional language that can create anything you want. Here is another example of PHP that creates an Online Chess Board Design with Chess Pieces.
Chess Board Design
Classical way with Table
<table width="500px" cellspacing="0px" cellpadding="0px" border="1px" bordercolor="green"> <?php $row = $total = $col =; for ($row = 1; $row <= 8; $row++) { echo "<tr>"; for ($col = 1; $col <= 8; $col++) { $total = $row + $col; if ($total % 2 ==) { echo "<td height='50px' width='50px' bgcolor='#FFFFFF'></td>"; } else { echo "<td height='50px' width='50px' bgcolor='green'></td>"; } } echo "</tr>"; } ?> </table>
Modern Way with Div
<div id="board"> <?php $row = $total = $col = 0; for ($row = 1; $row <= 8; $row++) { echo "<div id='line'>"; for ($col = 1; $col <= 8; $col++) { $total = $row + $col; if ($total % 2 == 0) { echo "<div id='box' class='white'></div>"; } else { echo "<div id='box' class='black'></div>"; } } echo "</div> "; } ?> </div>
Chess Board with Chess Pieces Design using PHP & Unicode
<table width="500px" cellspacing="0px" cellpadding="0px" border="1px" bordercolor="green"> <?php $row = $total = $col =; for ($row = 1; $row <= 8; $row++) { echo "<tr>"; if ($row == 8) { echo " <td height='50px' width='50px' bgcolor='green'><div class='chess-piece'>♖</div></td> <td height='50px' width='50px' bgcolor='#FFFFFF'><div class='chess-piece'>♘</div></td> <td height='50px' width='50px' bgcolor='green'><div class='chess-piece'>♗</div></td> <td height='50px' width='50px' bgcolor='#FFFFFF'><div class='chess-piece'>♕</div></td> <td height='50px' width='50px' bgcolor='green'><div class='chess-piece'>♔</div></td> <td height='50px' width='50px' bgcolor='#FFFFFF'><div class='chess-piece'>♗</div></td> <td height='50px' width='50px' bgcolor='green'><div class='chess-piece'>♘</div></td> <td height='50px' width='50px' bgcolor='#FFFFFF'><div class='chess-piece'>♖</div></td> "; } elseif ($row == 1) { echo " <td height='50px' width='50px' bgcolor='#FFFFFF'><div class='chess-piece'>♜</div></td> <td height='50px' width='50px' bgcolor='green'><div class='chess-piece'>♞</div></td> <td height='50px' width='50px' bgcolor='#FFFFFF'><div class='chess-piece'>♝</div></td> <td height='50px' width='50px' bgcolor='green'><div class='chess-piece'>♕</div></td> <td height='50px' width='50px' bgcolor='#FFFFFF'><div class='chess-piece'>♚</div></td> <td height='50px' width='50px' bgcolor='green'><div class='chess-piece'>♝</div></td> <td height='50px' width='50px' bgcolor='#FFFFFF'><div class='chess-piece'>♞</div></td> <td height='50px' width='50px' bgcolor='green'><div class='chess-piece'>♜</div></td> "; } else { for ($col = 1; $col <= 8; $col++) { $total = $row + $col; if ($row == 7) { if ($total % 2 ==) { echo "<td height='50px' width='50px' bgcolor='#FFFFFF'><div class='chess-piece'>♙</div></td>"; } else { echo "<td height='50px' width='50px' bgcolor='green'><div class='chess-piece'>♙</div></td>"; } } elseif ($row == 2) { if ($total % 2 ==) { echo "<td height='50px' width='50px' bgcolor='#FFFFFF'><div class='chess-piece'>♟</div></td>"; } else { echo "<td height='50px' width='50px' bgcolor='green'><div class='chess-piece'>♟</div></td>"; } } else { if ($total % 2 ==) { echo "<td height='50px' width='50px' bgcolor='#FFFFFF'></td>"; } else { echo "<td height='50px' width='50px' bgcolor='green'></td>"; } } } } echo "</tr>"; } ?> </table>
Additional Resource: (CSS)
#box{ height:50px; width:12.5%; border:1px solid green; padding:3px; display:inline-block; margin-right: -10px; } .black{ background:green; } .white{ background:white; } #line{ width:500px; text-align: center; margin-bottom: -10px; } #board{ width:500px; height:100%; } .chess-piece{ font-size: 48px; }