课表HTML有课的随机背景颜色

    td {
        border-radius: 5%;
    }

<font color="#ffffff">
    <table border="0" width="100%" align="center" style="font-size: 0.5rem" bgcolor="#fec7ff"
           height="700">
        <tr align="middle" style="font-weight: bold">
            <td width="30"></td>
            <td width="50" align="center" height="30">周一</td>
            <td width="50" align="center" height="30">周二</td>
            <td width="50" align="center" height="30">周三</td>
            <td width="50" align="center" height="30">周四</td>
            <td width="50" align="center" height="30">周五</td>
            <td width="50" align="center" height="30">周六</td>
            <td width="50" align="center" height="30">周日</td>
        </tr>
        <tr align="middle">
            <td style="font-weight: bold">1</td>
            <td bgcolor="#73b3f0" rowspan="2">{{ course.0.0|safe }}</td>
            <td rowspan="2">{{ course.1.0|safe }}</td>
            <td rowspan="2">{{ course.2.0|safe }}</td>
            <td rowspan="2">{{ course.3.0|safe }}</td>
            <td rowspan="2">{{ course.4.0|safe }}</td>
            <td rowspan="2">{{ course.5.0|safe }}</td>
            <td rowspan="2">{{ course.6.0|safe }}</td>
        </tr>
        <tr align="middle">
            <td style="font-weight: bold">2</td>
        </tr>
        <tr align="middle">
            <td style="font-weight: bold">3</td>
            <td rowspan="2" align="middle">{{ course.0.1|safe }}</td>
            <td rowspan="2">{{ course.1.1|safe }}</td>
            <td rowspan="2">{{ course.2.1|safe }}</td>
            <td rowspan="2">{{ course.3.1|safe }}</td>
            <td rowspan="2">{{ course.4.1|safe }}</td>
            <td rowspan="2">{{ course.5.1|safe }}</td>
            <td rowspan="2">{{ course.6.1|safe }}</td>
            <td rowspan="2">{{ course.7.1|safe }}</td>
        </tr>
        <tr align="middle">
            <td style="font-weight: bold">4</td>
        </tr>
        <tr align="middle">
            <td style="font-weight: bold">5</td>
            <td rowspan="2">{{ course.0.2|safe }}</td>
            <td rowspan="2">{{ course.1.2|safe }}</td>
            <td rowspan="2">{{ course.2.2|safe }}</td>
            <td rowspan="2">{{ course.3.2|safe }}</td>
            <td rowspan="2">{{ course.4.2|safe }}</td>
            <td rowspan="2">{{ course.5.2|safe }}</td>
            <td rowspan="2">{{ course.6.2|safe }}</td>
        </tr>
        <tr align="middle">
            <td style="font-weight: bold">6</td>
        </tr>
        <tr align="middle">
            <td style="font-weight: bold">7</td>
            <td rowspan="2">{{ course.0.3|safe }}</td>
            <td rowspan="2">{{ course.1.3|safe }}</td>
            <td rowspan="2">{{ course.2.3|safe }}</td>
            <td rowspan="2">{{ course.3.3|safe }}</td>
            <td rowspan="2">{{ course.4.3|safe }}</td>
            <td rowspan="2">{{ course.5.3|safe }}</td>
            <td rowspan="2">{{ course.6.3|safe }}</td>
        </tr>
        <tr align="middle">
            <td style="font-weight: bold">8</td>
        </tr>
        <tr align="middle">
            <td style="font-weight: bold">9</td>
            <td rowspan="2">{{ course.0.4|safe }}</td>
            <td rowspan="2">{{ course.1.4|safe }}</td>
            <td rowspan="2">{{ course.2.4|safe }}</td>
            <td rowspan="2">{{ course.3.4|safe }}</td>
            <td rowspan="2">{{ course.4.4|safe }}</td>
            <td rowspan="2">{{ course.5.4|safe }}</td>
            <td rowspan="2">{{ course.6.4|safe }}</td>
        </tr>
        <tr align="middle">
            <td style="font-weight: bold">10</td>
        </tr>
    </table>
</font>

<script src="https://cdn.jsdelivr.net/npm/jquery/dist/jquery.min.js"></script>
<script>
    var chars = ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9', 'A', 'B', 'C', 'D', 'E', 'F'];

    function generateMixed(n) {
        var res = "";
        for (var i = 0; i < n; i++) {
            var id = Math.ceil(Math.random() * 16);
            res += chars[id];
        }
        return res;
    }

    $('td').each(function () {
        if ($(this).text().length > 2 && $(this).text() !== ' ') {
            $(this).css('background', '#' + Math.random().toString(16).substr(2, 6).toUpperCase())
        }
    })
</script>