代码如下:

 

<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
body,ul,li,span{
margin: 0;
padding: 0;
font-size: 18px;
font-family: arial;
}
ul,li{
list-style: none;
}
#tab{
border: 1px solid red;
width: 900px;
height: 300px;
position: absolute;
top: 50%;
padding: 10px;
margin-top: -200px;
left: 50%;
margin-left: -450px;
border-radius:10px;
}
#tab ul li{
height: 30px;
line-height: 30px;
}
#tab li span{
width: 100px;
height: 30px;
line-height: 30px;
display: inline-block;
}
.c1{ background:red }
.c2{ background:yellow }
.c3{ background:#fa8e12 }
)
</style>
</head>
<body>
<div id="tab"></div>;
<script>
var oTab=document.getElementById("tab");
var str="";
str+="<ul>";
for(var i=1;i<=9;i++){
str+="<li>";
for(var j=1;j<=i;j++){
str+="<span>";
str+=""+j+"*"+i+"="+(j*i)+"";
str+="</span>";
}
str+="</li>";
}
str+= "</ul>";
oTab.innerHTML=str;

var oLi=oTab.getElementsByTagName("li");
for(var i=0;i<oLi.length;i++){
oLi[i].className="c"+(i%3+1);
}

</script>
</body>
</html>