世界讯息：HTML+JSP+CSS实现表格布局的例子

手机

iphone11大小尺寸是多少？苹果iPhone11和iPhone13的区别是什么？

警方通报辅警执法直播中被撞飞：犯罪嫌疑人已投案

家电

世界讯息：HTML+JSP+CSS实现表格布局的例子

2023-03-01 11:01:38 来源：博客园

1. HTML+JSP实现表格的JSP程序

【资料图】

将页面的样式代码、JSP和HTML代码放在一个JSP程序文件中看着比较混乱，代码也不容易维护，但是通过一步步的添加不同元素的样式属性，可以让初学者清楚的看到各个样式属性是如何定义并影响页面显示效果的，所以这种方式对于学生来说更容易跟容易理解和掌握。表格边框显示时，每行区块元素

显示上边（border-top: #021e98 solid thin;）和左边（border-left: #021e98 solid thin;）边框，最后一行加上显示下边（border-bottom: #021e98 solid thin;）边框，每行的单元格区块元素

显示右边（border-right: #021e98 solid thin;）边框。下面是详细的例子程序（文件名：1-1table.jsp）。

<%@page contentType="text/html;charset=gbk" pageEncoding="UTF-8"%>

页面布局--表格例子程序

<%-- 1.“display: table;”属性将使得区块元素

的显示输出为表格;2.“margin: 0 auto;”属性将使得区块元素

居中显示； --%>

<%-- "display: table-row;"属性将使得区块元素

的显示输出为表格的行 --%>

<%-- "display: table-cell;"属性将使得区块元素

的显示输出为表格行的单元格--%>

学号

姓名

性别

出生日期

联系方式

<%//通过JSP循环程序显示表格的各行信息。

for(int i=0;i<10;i++){ %>

} %> ">

<% }//表格显示输出结束。 %>

表格输出显示效果图

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"%>

页面布局--表格例子程序

学号

姓名

性别

出生日期

联系方式

<% //循环输出表格主体 for(int i=0;i<10;i++){ %>

if(i!=9){

out.println(" class="table-tr" ");

}else{

out.println(" class="table-last-tr" ");

} %> >

<% } //表格输出结束 %>

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"%>