まずは基本のfor文を使った九九の作り方（javascriptのみ使用バージョン）。

<!doctype html>
<html lang="ja">
    <head>
        <meta charset="utf-8">
        <title>loop課題九九</title>
    </head>
    <body>
        <script>
        document.write("<table>");
            for (var i = 1; i <= 9; i++){
                document.write("<tr>");
                for (var j = 1; j <= 9; j++){
                    document.write("<td>"+i+"×"+j+"="+(i*j)+"</td>");
                }
                document.write("</tr>");
            }
        document.write("</table>");
        </script>
    </body>
</html>

for文を上から見ていくと、まずi=1で初期化される。
続いてi<=9の条件を満たしているか評価し、for１つ分の時と同じく順番通りに
本来出力される下にいく。(初めて取り掛かったときはi++まで行ってから下の処理に進むと勘違いしていた)
今回はそこでまずtrが作成される。そしてさらに下にまだ処理していない第二のforがある為、こちらの処理を行う。
同じようにj=1で初期化しj<=9の判定を行い、順番通り下の処理へ。この時td/tdを含んだ九九の式を出力。(i=1,j=1)
続いてjの値が2になり、j<=9の判定を行い再び順番通り出力へ。
この時i=1,j=2。これを第二のforがfalseになるまで続ける。
falseになった後（ｊ＝９）、ようやく第一のfor文の加減式にもどり、i=2になる。
i=2をi<=9に当て嵌め、trueのため本来出力される下へ行く。
また第二のforがある為、再びそのforがfalseになるまで加減はされない。
といった流れ。

続いてjQueryを用い、隣り合うセルの色が異なる九九表を作成する。


<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>jQuery九九表</title>
    <!--<link rel="stylesheet" href="plactice_jquery.css">-->
    <style>
        .gray{
            background-color :gray;
        }
    </style>
    <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
    <script>
        /* 課題処理を追加 */
        $(function() {
            for(var j=1; j<=9; j++){
                $('#matrix').append('<tr></tr>');
                for(var i=1; i<=9; i++){
                     $('tr:last-child').append('<td>' + i + '*' + j + '=' + i*j + '</td>');
                }
            }
            $('td:even').addClass('gray');
        });
    </script>
</head>
<body>
    <table id="matrix"  border="1">
        <caption>九九表</caption>

    </table>
</body>
</html>

jqueryはcssのように使うことができる。このなかではlastchildが肝。
そして当然ながらtd:evenのところをtd:oddにすれば色が変わるところを変えることができる。