HTML+JSP+CSS实现表格布局的例子
1. HTML+JSP实现表格的JSP程序
将页面的样式代码、JSP和HTML代码放在一个JSP程序文件中看着比较混乱，代码也不容易维护，但是通过一步步的添加不同元素的样式属性，可以让初学者清楚的看到各个样式属性是如何定义并影响页面显示效果的，所以这种方式对于学生来说更容易跟容易理解和掌握。表格边框显示时，每行区块元素<div>显示上边（border-top: #021e98 solid thin;）和左边（border-left: #021e98 solid thin;）边框，最后一行加上显示下边（border-bottom: #021e98 solid thin;）边框，每行的单元格区块元素<div>显示右边（border-right: #021e98 solid thin;）边框。下面是详细的例子程序（文件名：1-1table.jsp）。
<%@page contentType="text/html;charset=gbk" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>页面布局--表格例子程序</title>
</head>
<body>
<div style="width: 99%; top: 5px; position: absolute; margin: 0px; ">
<%-- 1.“display: table;”属性将使得区块元素<div>的显示输出为表格; 2.“margin: 0 auto;”属性将使得区块元素<div>居中显示； --%>
<div id="vartable" style=" width: 800px; display: table; margin: 0 auto; border-collapse: collapse;">
<%-- "display: table-row;"属性将使得区块元素<div>的显示输出为表格的行 --%>
<div id="vartable-row" style="display: table-row; height: 30px; border-collapse: collapse; border-top: #021e98 solid thin; border-left: #021e98 solid thin;">
<%-- "display: table-cell;"属性将使得区块元素<div>的显示输出为表格行的单元格--%>
<div id="vartable-cell1" style="display: table-cell; border-right: #021e98 solid thin; text-align: center; vertical-align: middle;">
<div>学号</div>
</div>
<div id="vartable-cell2" style="display: table-cell; border-right: #021e98 solid thin; text-align: center; vertical-align: middle;">
<div>姓名</div>
</div>
<div id="vartable-cell3" style="display: table-cell; border-right: #021e98 solid thin; text-align: center; vertical-align: middle;">
<div>性别</div>
</div>
<div id="vartable-cell4" style="display: table-cell; border-right: #021e98 solid thin; text-align: center; vertical-align: middle;">
<div>出生日期</div>
</div>
<div id="vartable-cell5" style="display: table-cell; border-right: #021e98 solid thin; text-align: center; vertical-align: middle;">
<div>联系方式</div>
</div>
</div>
<% //通过JSP循环程序显示表格的各行信息。
for(int i=0;i<10;i++){ %>
<div id="vtable-row" style="display: table-row; height: 30px; border-collapse: collapse; border-top: #021e98 solid thin; border-left: #021e98 solid thin;
<% //判断是否为表格的最后一行，如果是最后一行使用JSP内置对象out输出border-bottom属性，为表格显示底部框线。
if(i==9){
out.println("border-bottom: #021e98 solid thin;");
} %> ">
<div style="display: table-cell; border-right: #021e98 solid thin; text-align: center; vertical-align: middle;">
<div> </div>
</div>
<div style="display: table-cell; border-right: #021e98 solid thin; text-align: center; vertical-align: middle;">
<div> </div>
</div>
<div style="display: table-cell; border-right: #021e98 solid thin; text-align: center; vertical-align: middle;">
<div> </div>
</div>
<div style="display: table-cell; border-right: #021e98 solid thin; text-align: center; vertical-align: middle;">
<div> </div>
</div>
<div style="display: table-cell; border-right: #021e98 solid thin; text-align: center; vertical-align: middle;">
<div> </div>
</div>
</div>
<% } //表格显示输出结束。 %>
</div>
</div>
</body>
</html>
表格输出显示效果图
2. HTML+JSP+CSS实现表格的JSP程序
在Java Web应用程序中创建css文件夹，并在css文件夹中建立table.css文件，文件内容为：
.content{
width: 99%; top: 5px; position: absolute; margin: 0px;
}
.table{
width: 800px; display: table; margin: 0 auto; border-collapse: collapse;
}
.table-tr{
display: table-row; height: 30px; background-color: #f6f6f6; border-collapse: collapse; border-top: #021e98 solid thin; border-left: #021e98 solid thin;
}
.table-last-tr{
display: table-row; height: 30px; background-color: #f6f6f6; border-collapse: collapse; border-top: #021e98 solid thin; border-left: #021e98 solid thin; border-bottom: #021e98 solid thin;
}
.table-tr-cell{
display: table-cell; border-right: #021e98 solid thin; text-align: center; vertical-align: middle;
}
在Java Web应用程序中创建divtable.jsp文件，文件内容为：
<%@page contentType="text/html;charset=gbk" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>页面布局--表格例子程序</title>
<link rel="stylesheet" type="text/css" href="css/table.css">
</head>
<body>
<div class="content">
<div class="table">
<div class="table-tr">
<div class="table-tr-cell"> <div>学号</div> </div>
<div class="table-tr-cell"> <div>姓名</div> </div>
<div class="table-tr-cell"> <div>性别</div> </div>
<div class="table-tr-cell"> <div>出生日期</div> </div>
<div class="table-tr-cell"> <div>联系方式</div> </div>
</div>
<% //循环输出表格主体 for(int i=0;i<10;i++){ %>
<div <% //判断是否是表格最后一行，如果是则为表格显示底部框线
if(i!=9){
out.println(" class='table-tr' ");
}else{
out.println(" class='table-last-tr' ");
} %> >
<div class="table-tr-cell"> <div> </div> </div>
<div class="table-tr-cell"> <div> </div> </div>
<div class="table-tr-cell"> <div> </div> </div>
<div class="table-tr-cell"> <div> </div> </div>
<div class="table-tr-cell"> <div> </div> </div>
</div>
<% } //表格输出结束 %>
</div>
</div>
</body>
</html>
3. 使用HTML的table元素实现表格布局
在Java Web应用程序中创建css文件夹，并在css文件夹中建立newtable.css文件，文件内容为：
.newtable{
font-family: sans-serif; font-size: 15px; color: #333333; border-bottom: 1px solid #0f063e; border-right: 1px solid #0f063e; border-collapse: collapse; width: 800px;
}
.newtable tr{
height: 30px;
}
.newtable th{
border-left: 1px solid #0f063e; border-top: 1px solid #0f063e; background-color: #cfedf5; padding: 5px; margin: 0;
}
.newtable td{
border-left: 1px solid #0f063e; border-top: 1px solid #0f063e; background-color: #f2f7f8; padding: 5px; margin: 0 auto;
}
在Java Web应用程序中创建newtable.jsp文件，文件内容为：
<%@page contentType="text/html;charset=gbk" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>JSP基础知识--页面布局表格的例子</title>
<link rel="stylesheet" type="text/css" href="css/newtable.css">
</head>
<body>
<table class="newtable" align="center">
<tr> <th>学号</th> <th>姓名</th> <th>联系方式</th> <th>专业</th> </tr>
<% for (int i = 0; i < 10; i++) { %>
<tr> <td></td> <td></td> <td></td> <td></td> </tr>
<% } %>
</table>
</body>
</html>
表格显示效果图：
本文来自博客园，作者：Freeland98，转载请注明原文链接：https://www.cnblogs.com/Freeland98/p/17167281.html
本文版权归作者和博客园共有，欢迎转载，但未经作者同意必须保留此段声明，且在文章页面明显位置给出,原文链接
