How to make Multiplication Table using JavaScript

[yeeboi]

Multiplication Table

In this tutorial, we are going to create a simple tutorial using JavaScript. This is a short source code in JavaScript to do this program. And it's called a Multiplication Table In JavaScript. This tutorial is suited for the beginners using JavaScript Language. This is a simple program. Hope you can learn from this. You can also check the live demo of this simple tutorial, so you can get an idea and you can try this out, let's start coding.

⚙ Live Demo

JavaScript Source Code

This is the script for the Multiplication Table.

1. <
   
   script language=
   
   "JavaScript"
   
   >
   
2. document.write
   
   (
   
   "<center><table border='1px' width='100%' cellspacing='2' cellpadding='2' style='cursor:pointer;'>"
   
   )
   
   ;
   
3. for
   
   (
   
   var
   
   a =
   
   1
   
   ;
   
   a <
   
   16
   
   ;
   
   a++
   
   )
   
   {
   
4. 
   
5. document.write
   
   (
   
   "<tr>"
   
   )
   
   ;
   
6. for
   
   (
   
   var
   
   b =
   
   1
   
   ;
   
   b <
   
   16
   
   ;
   
   b++
   
   )
   
   {
   
7. document.write
   
   (
   
   "<td>"
   
8. +
   
   a*
   
   b +
   
   "</td>"
   
   )
   
   ;
   
9. }
   
10. document.write
    
    (
    
    "</tr>"
    
    )
    
    ;
    
11. }
    
12. document.write
    
    (
    
    "</table></center>"
    
    )
    
    ;
    
13. </
    
    script>
    

And, this is the style.

1. <style type=
   
   "text/css"
   
   >
   
2. body {
   
3. margin
   
   :
   
   auto
   
   ;
   
4. width
   
   :
   
   700px
   
   ;
   
5. }
   
6. table
   
   {
   
7. text-align
   
   :
   
   center
   
   ;
   
8. border
   
   :
   
   blue
   
   1px
   
   solid
   
   ;
   
9. }
   
10. tr {
    
11. height
    
    :
    
    30px
    
    ;
    
12. 
    
13. }
    
14. td {
    
15. width
    
    :
    
    50px
    
    ;
    
16. font-size
    
    :
    
    18px
    
    ;
    
17. font-family
    
    :
    
    cursive
    
    ;
    
18. padding
    
    :
    
    7px
    
    ;
    
19. color
    
    :
    
    blue
    
    ;
    
20. }
    
21. td:
    
    hover
    
    {
    
22. width
    
    :
    
    50px
    
    ;
    
23. font-size
    
    :
    
    18px
    
    ;
    
24. font-family
    
    :
    
    cursive
    
    ;
    
25. padding
    
    :
    
    7px
    
    ;
    
26. background
    
    :
    
    blue
    
    ;
    
27. color
    
    :
    
    white
    
    ;
    
28. }
    
29. h2 {
    
30. text-align
    
    :
    
    center
    
    ;
    
31. color
    
    :
    
    red
    
    ;
    
32. }
    
33. </style>
    

Output:

If you are looking for the product of 15 x 15. This is the output.

If you are looking for the product of 5 x 13. This is the output.

⚙ Live Demo

If you are interested in programming, we have an example of programs that may help you even just in small ways.

Share us your thoughts and comments below. Thank you so much for dropping by and reading this tutorial post. For more updates, don’t hesitate and feel free to visit this website more often and please share this with your friends or email me at [email protected]. Practice Coding. Thank you very much.

Download