1 <!DOCTYPE html>
2 <html>
3 <head>
4 <meta charset="utf-8">
5 <title>JavaScript Multiplication Table</title>
6
7 <!--
8 http://cssdweb.edu/StudentResources/CodeSamples/JavaScript_MultiplicationTable.html
9 Copyright (c) 2022 by Jesse Heines. All rights reserved. May be freely
10 copied or excerpted for educational purposes with credit to the author.
11 updated by JMH on May 16, 2022 at 12:02 PM
12 -->
13
14 <style>
15 #mult th, #mult tr td:first-child {
16 background-color: black ;
17 color: white ;
18 font-weight: bold ;
19 width: 1.5em ;
20 }
21 #mult tr td {
22 text-align: right ;
23 }
24 </style>
25
26 </head>
27
28 <body>
29 <table id="mult" cellspacing="0" cellpadding="5" border="1">
30 <script>
31 var nRows = nCols = 18 ; /* number of rows and number of columns need not be the same */
32
33 // first row (header)
34 document.writeln( "<tr><th>*</th>" ) ;
35 for ( var c = 0 ; c < nCols ; c++ ) {
36 document.writeln( "<th>" + c + "</th>" ) ; // multiplier
37 }
38 document.writeln( "</tr>" ) ;
39
40 // all remaining rows
41 for ( var r = 0 ; r < nRows ; r++ ) {
42 document.writeln( "<tr>" ) ;
43 // first column
44 document.writeln( "<td>" + r + "</td>" ) ; // multiplicand
45 // all remaining columns
46 for ( var c = 0 ; c < nCols ; c++ ) {
47 document.writeln( "<td>" + r*c + "</td>" ) ;
48 }
49 document.writeln( "</tr>" ) ;
50 }
51 </script>
52 </table>
53 </body>
54
55 </html>