首先看一下之前我们实现的99乘法表
<%@ page language="java" contentType="text/html; charset=utf-8"
pageEncoding="utf-8"%>
<%@ page import="io.zhangjia.test.Book" %>
<%@ page import="java.util.*" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style type="text/css">
table{
width: 40%;
border: 1px #000 solid;
border-spacing: 0; /*设置相邻单元格的边框间的距离为0*/
border-collapse: collapse;/*合并边框*/
}
td,th{
border: 1px #000 solid;
}
</style>
<title>Insert title here</title>
</head>
<body>
<!-- 用表格的形式显示99乘法表 -->
<table>
<%
for (int i = 1; i < 10; i++) {
out.print("<tr>");
for (int j = 1; j <= i; j++) {
out.println("<td>" + j + "*" + i + "=" + (i * j) + "\t" + "</td>");
}
out.print("</tr>");
}
%>
</table>
</body>
</html>
可以看到，虽然上面的代码能正常的运行，但是我们把td等标签直接放在Java的代码里，不方便前端的同学查看和修改，所以我们一般会将Java代码和标签分离，分离的方法也很简单，把所有的java代码单独用小脚本包起来即可。
<%@ page language="java" contentType="text/html; charset=utf-8"
pageEncoding="utf-8"%>
<%@ page import="io.zhangjia.test.Book" %>
<%@ page import="java.util.*" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style type="text/css">
table{
width: 40%;
border: 1px #000 solid;
border-spacing: 0; /*设置相邻单元格的边框间的距离为0*/
border-collapse: collapse;/*合并边框*/
}
td,th{
border: 1px #000 solid;
}
</style>
<title>Insert title here</title>
</head>
<body>
<!-- 用表格的形式显示99乘法表 -->
<table>
<%
for (int i = 1; i < 10; i++) {
%>
<tr>
<%
for (int j = 1; j <= i; j++) {
%>
<td>
<%= j + "*" + i + "=" + (i * j) + "\t" %>
</td>
<%
}
%>
</tr>
<%
}
%>
</table>
</body>
</html>
请登录之后再进行评论