简易九九乘法表

最新推荐文章于 2022-09-28 01:08:53 发布

白日梦想jun

最新推荐文章于 2022-09-28 01:08:53 发布

阅读量407

点赞数

分类专栏： JSP

本文链接：https://blog.csdn.net/oiu1010110/article/details/52673984

版权

JSP 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

实现一：

<%@ 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);
}