您的位置：首页 > 其它

简易九九乘法表

2016-09-26 21:12 183 查看

实现一：

<%@ page language="java" import="java.util.*,java.text.*"
contentType= "text/html; charset=utf-8" %>
<html>
<head>
<title>九九乘法表</title>
<link rel="stylesheet" type="text/css" href="css/index.css"/>
</head>
<body>
<table border="1">
<caption>乘法口诀表</caption>
<tbody>
<%
for(int i=1;i<=9;i++){
%>
<tr>
<%
for(int j=1;j<=i;j++){
%>
<td>
<%= j%>*<%=i %>=<%=j*i %>
</td>
<%} %>
</tr>
<%}%>
</tbody>
</table>
</body>
</html>

实现二：
<%@ page contentType="text/html;charset=utf-8"%>
<html>
<head>
<title>九九乘法表</title>
<link rel="stylesheet" type="text/css" href="css/index.css"/>
</head>
<body>
<table border="1">
<caption>乘法口诀表</caption>
<tbody>
<%
for(int i = 1; i <= 9; i++) {
out.print("<tr>");
for(int j = 1;j <= i; j++) {
out.print("<td>" + j + "*" + i + "=" + j*i + "</td>");
}
out.print("</tr>");
}
%>
</tbody>
</table>
</body>
</html>

index.css
body {
padding:0;margin: 0;
}
table{
width: 810px;
height: 500px;
margin:auto;
border-collapse: collapse;
border: none;
text-align: center;
position:absolute;
top:0;
left:0;
bottom:0;
right:0;
background-color:#000;
}
caption {
font-size: 2rem;
line-height: 50px;
color: rgb(232,237,81);
}

table tr {
height: 50px;
}
table td {
width: 90px;
height: 50px;
background-color: rgb(184,247,136);

}
table td:hover {
background-color: rgba(255,0,0,.6);
}

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航