话不多说直接上代码,解释的很详细。
一、css部分
span{
display: inline-block; /*span是行内元素 设置宽高无效 转换成inline-block宽高才会生效*/
width: 70px; /*设置边框宽度*/
height: 30px; /*设置边框高度*/
line-height: 30px; /*设置行高*/
border: 1px solid black;/*设置边框样式为1px大小,边框颜色为black*/
text-align: center; /*设置文本在表格居中显示*/
}
二、 js部分
//正序
for (var i=1;i<=9;i++) { //控制打印行数
for (var j=1;j<=i;j++) { //控制打印列数
document.write("<span>") //设置span行内元素
document.write(j+"*"+i+"="+j*i); //输出语句
document.write("</span>") //设置span行内元素
}
document.write("</br>"); //输出语句
}
效果图: