mul.php

<?php

$colors = [
    1 => '#7E7EEB',
    '#D483E5',
    '#F693DB',
    '#EF6B8F',
    '#EF9A5A',
    '#FBD263',
    '#C0DC83',
    '#72CC8C',
    '#73C6C0',
    '#4195CD',
];

$colors[] = $colors[1];

function printNumber(
    int $i,
    int $j
): int|string {
    if ($i === 0 && $j === 0) {
        return 'x';
    }

    if ($i === 0) {
        return $j;
    }

    if ($j === 0) {
        return $i;
    }

    return $i * $j;
}

?>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Sniglet&display=swap" rel="stylesheet">
<style>
    body {
        background: #FFFFDB;
        font-family: Sniglet, Roboto, Ubuntu, sans-serif;
        font-weight: bolder;
    }

    #table {
        border-collapse: collapse;
        background: white;
    }

    #table td {
        border: 1px solid #FFFFDB;
        font-size: 1.5rem;
        width: 3rem;
        height: 3rem;
        text-align: center;
    }

    #table tr:nth-of-type(1) td,
    #table tr td:nth-of-type(1) {
        color: white;
    }

    #table tr:not(:nth-of-type(1)) td:not(:nth-of-type(1)) {
        filter: saturate(75%) brightness(1.35);
    }

    <?php for ($i = 1; $i <= 11; $i++): ?>
    #table tr:nth-of-type(<?=$i ?>) td:not(:nth-of-type(n+<?=$i+1?>)),
    #table tr:not(:nth-of-type(n+<?=$i+1?>)) td:nth-of-type(<?=$i ?>) {
        background: <?=$colors[$i] ?>;
    }

    <?php endfor; ?>
</style>

<table id="table">
    <?php for ($i = 0; $i <= 10; $i++): ?>
        <tr>
            <?php for ($j = 0; $j <= 10; $j++): ?>
                <td><?= printNumber($i, $j) ?></td>
            <?php endfor; ?>
        </tr>
    <?php endfor; ?>
</table>