Everyone who has learned programming has written "HelloWorld"
But I think the 99 multiplication table should also become a must-program for every programming beginner.
This is the JavaScript implementation method, which is very suitable for beginners! ! !
The following are the code and comments
<!DOCTYPE html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>JavaScript Nine-Nine Multiplication Table</title> <style type="text/css"> table{ width:600px; //The table height property can be set or not, it is recommended not to set border-collapse:separate; } table td{ border:#000000 1px solid; text-align: center; //Can the content in the <td> tag be centered. If it is a <th> tag, it can be automatically centered without this line of code} </style></head> <body> <script type="text/javascript"> //The following part is the core code document.write("<table>"); //<table></table>Add a table style to display the multiplication table for (var x = 1; x <= 9; x++) { document.write("<tr>"); //<tr></tr> tag for (var y = 1; y <= x; y++) { document.write("<td>"+y+"x"+x+"="+y*x+"</td>");//The <th> tag can also be used to center and bold content} document.write("</tr>"); } document.write("</table>"); </script> </body> </html>Below are some of the above codes
•<table> tag defines a table!
<tr> - Define table rows
<th> - Define the table header
<td> - Define table elements (specific data of table)
border=""property can set the border of the table!
The characters in <th> are displayed in bold and center by default!
bgcolor=""is what I am familiar with setting the table background color!
•cellspacing="" and cellspadding="" are the spacing between tables and the spacing in cells! But both tags were removed by HTML5, and replaced by border-collapse:separate | collapse | inherit.
| separate | default value. The borders will be separated. The border-spacing and empty-cells properties are not ignored. |
| collapse | If possible, borders are merged into a single border. The border-spacing and empty-cells properties are ignored. |
| inherit | Specifies that the value of the border-collapse attribute should be inherited from the parent element. |
The above simple example of JavaScript implementing the 99 multiplication table is all the content I share with you. I hope you can give you a reference and I hope you can support Wulin.com more.