带符号的PHP表

Question

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:

Answer 1

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

Answer 2

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;
}

Live Example

 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> 

Answer 3

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>&nbsp;</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.