在上一篇文章中，我们使用了MVC架构完成了一个学生数据的信息开发，我们可以作为本系列的一个贯穿案例，进行后续的增删改查及关联关系的功能开发，以及涉及到Web前端技术、JSTL、监听器、过滤器等技术的学习。
为了更好的切入贯穿项目，我们新建一个stuWeb项目，并将上一节完成的MVC练习代码文件，复制构建一个新的项目。项目结构图如下所示：
当前页面效果如下图所示，可见非常简陋。表格的边框，我们是使用了HTML提供的修饰属性border实现的。在前端技术蓬勃发展的90年代，为了实现结构和修饰的解耦，出现了CSS技术。规范的开发要求由HTML做结构，由CSS做修饰。
也就是说，HTML中使用border属性进行修饰的方法是不规范的，我们应该使用CSS进行修饰。了解CSS的读者应该知道，通过CSS可以构建样式极其复杂的页面，以我们当前的表格为例，我们可以通过CSS进行如下修饰：
代码如下：
<%@ page language="java" contentType="text/html; charset=utf-8"pageEncoding="utf-8"%><%@ page import="java.util.*"%><%@ page import="entity.*"%><!DOCTYPE><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title>学生管理</title><style>#main {width: 600px;margin: 20px auto;}#data {width: 100%;border: 1px solid #666;/*边折叠效果*/border-collapse: collapse;}#data th, #data td {text-align: center;border: 1px solid #666;}</style></head><body><div id="main"><table id="data"><tr><th>ID</th><th>姓名</th><th>性别</th><th>年龄</th></tr><%//从request作用域中取得学生对象的listList<Student> list = (List<Student>) request.getAttribute("list");for (Student stu : list) {%><tr><td><%=stu.getId()%></td><td><%=stu.getName()%></td><td><%=stu.getGender()%></td><td><%=stu.getAge()%></td></tr><%}%></table></div></body></html>
效果如下图所示：
通过效果图可以看到，通过CSS修饰，可以让表格变的好看起来。但是我们必须要承认，这个表格还是十分简陋，缺乏色彩点缀，实际就是不好看。
我们可以思考一下如何让表格修饰的好看？那就牵扯着大小、间距、字体、字体大小、字体颜色、背景色、色彩的搭配等等知识。而以上知识体系并不是一个程序员的知识范畴之内，而是UI设计师范畴之内。因为好的UI设计师是需要美术功底的。
在正规的公司开发分工上，会有UI设计师进行页面的设计工作，做出效果图，然后由前端工程师进行HTML、CSS的实现。而我们学习阶段没有这方面的资源，那是不是就要使用这种丑陋的页面继续下去呢？
其实也大可不必，我们可以使用开源免费的CSS框架实现好看的页面，提高学习的兴趣，详见下一篇文章讲解。
