I have 10x10 table in PHP. What I want to do is that it will be marked with letters and numbers like chessboard. This is my current code:
<?PHP
$myArray = array("","A","B","C","D","E","F","G","H","I","J");
echo "<table>";
for($i = 0; $i < 10; $i++) {
echo "<tr>";
for($j = 0; $j < 10; $j++) {
echo "<td> </td>";
}
echo "</tr>";
}
echo "</table>";
?>
Possible look, but without colors: 
You'll need to go one beyond your desired grid size to add your labels. This will give what you're looking for, you can change the $gridSize to whatever size you want the grid to be.
<style type="text/css">
table.chess {
padding: 0;
margin: 0;
}
table.chess td {
width: 25px;
height:25px;
padding: 0;
margin: 0;
text-align: center;
}
table.chess td.odd {
background: #fff;
}
table.chess td.even {
background: #000;
}
table.chess td.top {
border-top: 1px solid;
}
table.chess td.bottom {
border-bottom: 1px solid;
}
table.chess td.left {
border-left: 1px solid;
}
table.chess td.right {
border-right: 1px solid;
}
</style>
<?php
$gridSize = 8;
echo "<table class='chess' cellpadding='0' cellspacing='0'>";
for($i = $gridSize; $i >= 0; $i--) {
echo "<tr>";
for($j = 0; $j <= $gridSize; $j++) {
$classes = [];
$classes[] = ($j+$i) % 2 ? 'odd' : 'even';
if ($i === $gridSize) {
$classes[] = 'top';
}
if ($i === 1) {
$classes[] = 'bottom';
}
if ($j === 1) {
$classes[] = 'left';
}
if ($j === $gridSize) {
$classes[] = 'right';
}
if ($j === 0 && $i !== 0) {
echo "<td>$i</td>";
} elseif ($i === 0 && $j !== 0) {
echo "<td>" . chr(65+$j-1) . "</td>";
} elseif ($i === 0 && $j === 0) {
echo "<td></td>";
} else {
echo "<td class='" . implode(' ', $classes) . "'></td>";
}
}
echo "</tr>";
}
echo "</table>";
output
Another way of doing it, if I understood it correctly, considering $size is declared and set to something like 8:
<table>
<?php foreach (range($size, 1) as $n)
echo " <tr><td>$n</td>" . str_repeat('<td></td>', $size) . "</tr>\n"; ?>
<tr><td><?php
foreach (range('a', chr(96+$size)) as $l) echo "<td>$l</td>"; ?></tr>
</table>
As for the CSS, the nth-child selector can help you do this without adding any classes for HTML elements:
table { border-collapse: collapse; }
td {
width: 25px;
height: 25px;
border: 1px solid black;
text-align: center;
}
tr:nth-child(odd) td:nth-child(odd),
tr:nth-child(even) td:nth-child(even) {
background: gray;
}
tr td:first-child, tr:last-child td {
background: transparent !important;
border: none;
}
table { border-collapse: collapse; }
td {
width: 25px;
height: 25px;
border: 1px solid black;
text-align: center;
}
tr:nth-child(odd) td:nth-child(odd),
tr:nth-child(even) td:nth-child(even) {
background: gray;
}
tr td:first-child, tr:last-child td {
background: transparent !important;
border: none;
}<table>
<tr><td>8</td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
<tr><td>7</td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
<tr><td>6</td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
<tr><td>5</td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
<tr><td>4</td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
<tr><td>3</td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
<tr><td>2</td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
<tr><td>1</td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
<tr><td><td>a</td><td>b</td><td>c</td><td>d</td><td>e</td><td>f</td><td>g</td><td>h</td></tr>
</table>Here is an example of what you want (no css included):
<?php
$lines = [
['<td>8</td>', '<td class="white"></td>', '<td class="black"></td>', '<td class="white"></td>', '<td class="black"></td>', '<td class="white"></td>', '<td class="black"></td>', '<td class="white"></td>', '<td class="white"></td>'],
['<td>7</td>', '<td class="black"></td>', '<td class="white"></td>', '<td class="black"></td>', '<td class="white"></td>', '<td class="black"></td>', '<td class="white"></td>', '<td class="black"></td>', '<td class="black"></td>'],
['<td>6</td>', '<td class="white"></td>', '<td class="black"></td>', '<td class="white"></td>', '<td class="black"></td>', '<td class="white"></td>', '<td class="black"></td>', '<td class="white"></td>', '<td class="white"></td>'],
['<td>5</td>', '<td class="black"></td>', '<td class="white"></td>', '<td class="black"></td>', '<td class="white"></td>', '<td class="black"></td>', '<td class="white"></td>', '<td class="black"></td>', '<td class="black"></td>'],
['<td>4</td>', '<td class="white"></td>', '<td class="black"></td>', '<td class="white"></td>', '<td class="black"></td>', '<td class="white"></td>', '<td class="black"></td>', '<td class="white"></td>', '<td class="white"></td>'],
['<td>3</td>', '<td class="black"></td>', '<td class="white"></td>', '<td class="black"></td>', '<td class="white"></td>', '<td class="black"></td>', '<td class="white"></td>', '<td class="black"></td>', '<td class="black"></td>'],
['<td>2</td>', '<td class="white"></td>', '<td class="black"></td>', '<td class="white"></td>', '<td class="black"></td>', '<td class="white"></td>', '<td class="black"></td>', '<td class="white"></td>', '<td class="white"></td>'],
['<td>1</td>', '<td class="black"></td>', '<td class="white"></td>', '<td class="black"></td>', '<td class="white"></td>', '<td class="black"></td>', '<td class="white"></td>', '<td class="black"></td>', '<td class="black"></td>'],
['<td> </td>', '<td>A</td>', '<td>B</td>', '<td>C</td>', '<td>D</td>', '<td>E</td>', '<td>F</td>', '<td>G</td>', '<td>H</td>']
];
echo '<table>';
foreach($lines as $line){
echo '<tr>';
foreach($line as $field){
echo $field;
}
echo '</tr>';
}
echo '</table>';
Maybe you would need to put in some none breaking spaces inside the empty tds.
