<!DOCTYPE html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 
<title>JavaScript九九乘法表</title> 
 
<style type="text/css"> 
table{ 
  width:600px;     //表格height屬性可設(shè)置可不設(shè)置,建議不設(shè)置
  border-collapse:separate;
  } 
table td{ 
  border:#000000 1px solid;
  text-align: center;  //使<td>標簽中的內(nèi)容居中顯示，若是<th>標簽，沒有此行代碼亦可自動居中
  } 
</style>

</head> 
<body> 
 
<script type="text/javascript"> 
//下面部分是核心代碼
 
document.write("<table>");   //<table></table>添加一個表格樣式來顯示乘法表 
for (var x = 1; x <= 9; x++) 
{ 
  document.write("<tr>");   //<tr></tr>標簽
  for (var y = 1; y <= x; y++)
  { 
    document.write("<td>"+y+"x"+x+"="+y*x+"</td>");//亦可用<th>標簽來起到居中加粗內(nèi)容的作用
  }                          
  document.write("</tr>"); 
} 
document.write("</table>");  
</script> 
 
</body> 
</html>

下面是上面代碼中涉及的一些內(nèi)容

•<table>標簽是定義一個表格！

<tr> - 定義表行

<th> - 定義表頭

<td> - 定義表元(表格的具體數(shù)據(jù))

border=""屬性可以設(shè)置表格的邊框！

<th>里的字默認為加粗居中顯示！

bgcolor=""也就是我熟悉的設(shè)置表格背景顏色！

•cellspacing=""和cellspadding=""是設(shè)置表格間的間距和單元格里的間距！但這兩個標簽都被HTML5移除了，取而代之的是border-collapse:separate | collapse | inherit。

separate	默認值。邊框會被分開。不會忽略border-spacing 和 empty-cells 屬性。
collapse	如果可能，邊框會合并為一個單一的邊框。會忽略border-spacing 和 empty-cells 屬性。
inherit	規(guī)定應(yīng)該從父元素繼承border-collapse屬性的值。

以上這篇JavaScript實現(xiàn)九九乘法表的簡單實例就是小編分享給大家的全部內(nèi)容了，希望能給大家一個參考，也希望大家多多支持腳本之家。

您可能感興趣的文章: