JavaScript实现九九乘法表

每个学过编程的人都写过“HelloWorld”

但99乘法表，我想也应该成为每个编程初学者的必编程序

这是JavaScript的实现方法，非常适合初学者！！！

以下是代码及注释

 

 1 <!DOCTYPE html>  
 2 <head>  
 3 <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />  
 4 <title>JavaScript九九乘法表</title>  
 5   
 6 <style type="text/css">  
 7 table{  
 8     width:600px;         //表格height属性可设置可不设置,建议不设置
 9     border-collapse:separate;
10     } 
11 table td{  
12     border:#000000 1px solid;
13     text-align: center;    //使<td>标签中的内容居中显示，若是<th>标签，没有此行代码亦可自动居中
14     }  
15 </style>
16 
17 </head>  
18 <body>  
19   
20 <script type="text/javascript">  
21 //下面部分是核心代码
22   
23 document.write("<table>");      //<table></table>添加一个表格样式来显示乘法表 
24 for (var x = 1; x <= 9; x++)  
25 {  
26     document.write("<tr>");     //<tr></tr>标签
27     for (var y = 1; y <= x; y++)
28     {  
29         document.write("<td>"+y+"x"+x+"="+y*x+"</td>");//亦可用<th>标签来起到居中加粗内容的作用
30     }                                                    
31     document.write("</tr>");  
32 }  
33 document.write("</table>");    
34 </script> 
35  
36 </body>  
37 </html>

 

 

下面是上面代码中涉及的一些内容

  • <table>标签是定义一个表格！

  <tr> - 定义表行
  <th> - 定义表头
  <td> - 定义表元(表格的具体数据)
  border=""属性可以设置表格的边框！
  <th>里的字默认为加粗居中显示！
  bgcolor=""也就是我熟悉的设置表格背景颜色！

  • cellspacing=""和cellspadding=""是设置表格间的间距和单元格里的间距！但这两个标签都被HTML5移除了，取而代之的是border-collapse:separate | collapse | inherit。
separate 默认值。边框会被分开。不会忽略border-spacing 和 empty-cells 属性。
collapse 如果可能，边框会合并为一个单一的边框。会忽略border-spacing 和 empty-cells 属性。
inherit 规定应该从父元素继承border-collapse属性的值。

 

 

 原文：http://www.cnblogs.com/Loonger/p/4862342.html

posted @ 2015-10-08 21:23  Loong.liu  阅读(18856)  评论(0)  编辑  收藏  举报