使用JSP开发网页(使用什么代替)<table> </table>

时间:2010-08-05 03:14:19

标签: jsp

我是学生。

我正在使用JSF使用Netbeans 6.0.0(JSP)开发我的项目。在我的IADCS项目中,我的老师说“不要使用标签,菜单和表格”。但所有报告必须在表格中生成。

我使用静态文本代替菜单的标签和超链接。但我不知道用什么代替桌子。

3 个答案:

答案 0 :(得分:2)

您可以使用<div>代码并使用CSS来设置样式。但是<table>标签是有原因的,应该在需要时使用。使用<div>&amp; CSS就像一个黑客。

无论如何,我在同一个问题上找到了一个好的discussion,你可以通过最多的投票来完成前三个答案,并且这些评论值得阅读这些答案和问题。

答案 1 :(得分:0)

这个示例页面你可以看到这个

<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
    pageEncoding="ISO-8859-1"%>
<!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=ISO-8859-1">
<title>Admin Home</title>
<script>
function hide()
{
    var div_ref = document.getElementById("id_textbox_1");
    div_ref.style.visibility = "hidden";
}


function show()
{
    var div_ref = document.getElementById("id_textbox_1");
    div_ref.style.visibility = "visible";
}

</script>
</head>
<body onLoad="if(history.length>0)history.go(+1)">
<%String user=(String)request.getSession().getAttribute("user");
String s3=(String)request.getSession().getAttribute("change1");
String s4=(String)request.getSession().getAttribute("update");
String s5=(String)request.getSession().getAttribute("msg");
if(s5!=null)
{
    request.getSession().removeAttribute("msg");%>
    <script type="text/javascript" language="JavaScript">
    alert("Employee details deleted successfully");
</script>
<%}%>
<%if(s4!=null)
{
    request.getSession().removeAttribute("update");%>
    <script type="text/javascript" language="JavaScript">
    alert("Employee details updated successfully");
</script>
<%}%>
<%if(s3!=null)
{
    request.getSession().removeAttribute("change1");%>
    <script type="text/javascript" language="JavaScript">
    alert("The question for polling is set!!");
</script>
<%}%>
<%if(user==null)
{response.sendRedirect("index.jsp");}
    else{%>
<%@include file="headeradmin.jsp"%>
<div style="width:800px;height:22px;background-color:#708090;">

<form method="post" action="../SearchController"> 
<table cellpadding="0px" cellspacing="0px"> 
<tr> 
<td style="border-style:solid none solid solid;border-color:#4B7B9F;border-width:1px;">
<a href="emphome.jsp" style="color:white;text-decoration: none;">&nbsp;&nbsp;Home</a>&nbsp;&nbsp;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<input type="text" name="id" style="width:100px; border:0px solid; height:17px; padding:0px 3px; position:relative;"> 
</td>
<td style="border-style:solid;border-color:#4B7B9F;border-width:1px;"> 
<input type="submit" value="" style="border-style: none; background: url('../images/searchbutton3.gif') no-repeat; width: 24px; height: 20px;">
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<font style="color:white;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
 Welcome <label><%=user%></label></font> 
</td>
</tr>
</table>
<input type="hidden" name="search" value="1"></input>
</form> </div>
<div style="height:550px; width:100%;float:left;margin-top:5px;">

<div align="justify" style="background-color:white; height:550px; width:74%;float:left;margin-top:5px; margin-left:10px">
<img src="../images/banner1.jpg" alt="emp1" height="180" width="590"></img><br>
<br><font size="4">Welcome</font><br>
<br><font size="2">
National Self Employment Program for Undergraduate
Students has come up with a unique solution that will encourage the family and
student to fund as much as they can and NSEP program to contribute the balance based on the
predefined condition.
Thanks for being a part of this prestigious initiative taken by NSEP to encourage under graduates in fulfilling
their dreams and stepping towards a bright future.</font><br>

<br><font size="2">"The spinning wheel means national consciousness and a contribution by every individual to definite 
constructive national work."
<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;

- M.K Gandhi</font><br>

<br></div>

<div style="background-color:white; height:550px; width:22%;float:left;margin-top:5px;margin-left:10px;margin-right:10px;">

<div style="background-color:white; height:25%; width:100%;float:left;margin-top:5px;margin-left:10px">
<p><br>"Education is the true alchemy that can bring India its next golden age.
Our motto is unambiguous:All for knowledge and knowledge for all."
<br><br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;-Shri Pranab Mukherjee.
<br></p>
</div>

<div style="background-color:white; height:25%; width:100%;float:left;margin-top:5px;margin-left:10px">
<p><br>"Everyone should find something they love doing. Then work isn't work. It's a part of themselves. Of who they are."
<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;-Paul Mcualay.
</p>
</div>

<div style="background-color:white; height:40%; width:100%;float:left;margin-top:5px;margin-left:10px">
<p><br>"At times our own light goes out and is rekindled by a spark from another person.  Each of us has cause to think with deep gratitude of those who have lighted the flame within us."  
<br><br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;-Albert Schweitzer.
</p>
</div>
</div>
<%} %>
<%@include file="footeradmin.jsp"%>
 <center>
 <br><a href="nsephome_spn.jsp"><font color="white" >Spanish</font></a></br>
 </center>
</body>
</html>

答案 2 :(得分:-1)

这是我用于上面的页面style1.css

的CSS文件
body {
    margin: 0px;
    background-color: #333333;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 11px;
}
table.linkcontainer td{
    background-color: #000000;
    filter:alpha(opacity=70);
    opacity: .7;
    -moz-opacity: .7;
}
td.logo_area{
    border-top-width: 0px;
    border-right-width: 5px;
    border-bottom-width: 0px;
    border-left-width: 0px;
    border-top-style: solid;
    border-right-style: solid;
    border-bottom-style: solid;
    border-left-style: solid;
    border-top-color: #FFFFFF;
    border-right-color: #FFFFFF;
    border-bottom-color: #FFFFFF;
    border-left-color: #FFFFFF;
}
td.middle_spacer {
    width: 800px;
    background-color: #666666;
}
td.shadow_right {
    background-image: url(../images_template1/border_shadow_l.jpg);
    background-repeat: repeat-y;
    background-position: left;
}
td.shadow_left {
    background-image: url(../images_template1/border_shadow_r.jpg);
    background-repeat: repeat-y;
    background-position: right;
}
td.body_content {
    padding: 5px;
    background-image: url(../images_template1/bg_content.jpg);
    background-repeat: repeat;
}
td.below_header{
    background-color: #1F1F1F;
    height: 50px;
    color: #CCCCCC;
    padding: 5px;
}
td.main_content_box {
    background-color: #FFFFFF;
}

td.horizontal_column {
    background-color: #000000;
    border-top-width: 15px;
    border-right-width: 0px;
    border-bottom-width: 1px;
    border-left-width: 0px;
    border-top-style: solid;
    border-right-style: solid;
    border-bottom-style: solid;
    border-left-style: solid;
    border-top-color: #000000;
    border-right-color: #000000;
    border-bottom-color: #000000;
    border-left-color: #000000;
    height: 150px;
    display: table-cell;
    vertical-align: top;
}
td.bottom_link_container {
    background-color: #000000;
    text-align: center;
    color: #FFFFFF;
    padding: 5px;
}

td.horizontal_center {
    background-color: #FFFFFF;
    border-top-width: 15px;
    border-right-width: 0px;
    border-bottom-width: 1px;
    border-left-width: 0px;
    border-top-style: solid;
    border-right-style: solid;
    border-bottom-style: solid;
    border-left-style: solid;
    border-top-color: #000000;
    border-right-color: #333333;
    border-bottom-color: #000000;
    border-left-color: #333333;
    height: 290px;
    display: table-cell;
    vertical-align: top;
    background-image: url(../images_template1/header_bg.jpg);
}
td.header_column {
    height: 100px;
    vertical-align: middle;
    color: #FFFFFF;
    font-size: large;
    background-image: url(../images_template1/header2_bg.jpg);
    background-position: top;
}
td.left_content {
    width: 220px;
    padding: 10px;
    vertical-align: top;
    background-image: url(../images_template1/bg_content.jpg);
    background-repeat: repeat;
}

a.main_link:active,a.main_link:visited,a.main_link:link{
    font-weight: bold;
    text-decoration: none;
    display: block;
    width: 100%;
    color: #FFFFFF;
    line-height: 50px;
}
a.main_link:hover{
    background-color:#333333;
    color: #FFFFFF;
}
a.bottom_link:active,a.bottom_link:visited,a.bottom_link:link{
    font-weight: bold;
    text-decoration: none;
    color: #FFFFFF;
}
a.bottom_link:hover{
    color: #CCCCCC;
}
div.bottom_content{
    color: #FFFFFF;
    padding: 5px;
}
div.navigation {
    height: 50px;
    vertical-align: middle;
    text-align: center;
}