Took a little time, I made a beautiful HTML table, the use of technology has css,html, other nonsense I did not say much, directly, on the code.
Interface Picture:
HTML code:
<%@ page language= "java" import= "java.util.*" pageencoding= "Utf-8"%>
<! DOCTYPE html>
<title>my JSP ' index.jsp ' starting page</title>
<link type= "Text/css" rel= "stylesheet" href= "Index.css"/>
<body>
<div class= "Table_div" >
<div class= "Div_clear" >
<div class= "Left_top" ></div>
<div class= "Center_top" >
<div style= "Float:left" >
<span style= "Font-weight:bold" > Your current location </span>:[business center]-[my mail]
</div>
<div style= "float:right;padding-right:6px" >
<a href= "#" > New </a>
<a href= "#" > Modify </a>
<a href= "#" > Delete </a>
</div>
</div>
<div class= "Right_top" ></div>
</div>
<div class= "Div_clear" >
<div class= "Left_center" ></div>
<div class= "Center_center" >
<div class= "Table_content" >
<table cellspacing= "0px" cellpadding= "0px" >
<thead >
<tr>
<th width= "16%" >wo</th>
<th width= "16%" >ffe</th>
<th width= "16%" >ff</th>
<th width= "16%" >ff</th>
<th width= "16%" >ff</th>
<th wdith= "20%" style= "Border-right:none" > Operations </th>
</tr>
</thead>
<tbody>
<tr>
<TD width= "16%" >ff</td>
<TD width= "16%" >ff</td>
<TD width= "16%" >f</td>
<TD width= "16%" >fe</td>
<TD width= "16%" >ew</td>
<TD width= "20%" style= "Border-right:none" >
<a href= "#" > Modify </a>
<a href= "#" > Delete </a>
</td>
</tr>
<tr>
<TD width= "16%" >ff</td>
<TD width= "16%" >ff</td>
<TD width= "16%" >f</td>
<TD width= "16%" >fe</td>
<TD width= "16%" >ew</td>
<TD width= "20%" style= "Border-right:none" >
<a href= "#" > Modify </a>
<a href= "#" > Delete </a>
</td>
</tr>
<tr>
<TD width= "16%" >ff</td>
<TD width= "16%" >ff</td>
<TD width= "16%" >f</td>
<TD width= "16%" >fe</td>
<TD width= "16%" >ew</td>
<TD width= "20%" style= "Border-right:none" >
<a href= "#" > Modify </a>
<a href= "#" > Delete </a>
</td>
</tr>
</tbody>
</table>
</div>
</div>
<div class= "Right_center" ></div>
</div>
<div class= "Div_clear" >
<div class= "Left_bottom" ></div>
<div class= "Center_bottom" >
<span> total 120 records, current 1th/10 page </span>
<div style= "float:right;padding-right:30px" >
<input type= "button" value= "Home"/>
<input type= "button" value= "prev"/>
<input type= "button" value= "next page"/>
<input type= "button" value= "Last"/>
<span> Jump to </span>
<input type= "Text" size= "1"/>
<input type= "button" value= "Jump"/>
</div>
</div>
<div class= "Right_bottom" ></div>
</div>
</div>
</body>
CSS file code:
/******************************* Universal Style ***********************/
body{
padding:0px;
margin:0px;
font-size:12px;
}
Body a{
Color: #03515d;
Text-decoration:none;
}
Body button{
Color: #03515d;
}
Body span{
Color: #03515d;
}
. Center_bottom input{
Color: #03515d;
font-size:12px;
height:20px;
width:40px;
padding:2px;
Vertical-align:middle;
Text-align:center;
margin-bottom:6px;
}
/************************** Layout Section ********************/
. table_div{
width:1000px;
padding:10px;
margin:0 Auto;
}
. div_clear{
Clear:both;
}
. left_top{
Background:url ("./tab/images/tab_03.gif");
height:30px;
width:12px;
Float:left;
}
. left_center{
Background:url ("./tab/images/tab_12.gif");
height:400px;
width:12px;
Float:left;
}
. left_bottom{
Background:url ("./tab/images/tab_18.gif");
height:35px;
width:12px;
Float:left;
}
. center_top{
Background:url ("./tab/images/tab_05.gif") repeat-x;
height:30px;
line-height:30px;
width:900px;
Float:left;
}
. center_center{
height:400px;
width:900px;
Float:left;
}
. center_bottom{
Background:url ("./tab/images/tab_19.gif") repeat-x;
height:35px;
width:900px;
Float:left;
line-height:35px;
}
. right_top{
Background:url ("./tab/images/tab_07.gif");
height:30px;
width:15px;
Float:left;
}
. right_center{
Background:url ("./tab/images/tab_15.gif");
height:400px;
width:15px;
Float:left;
}
. right_bottom{
Background:url ("./tab/images/tab_20.gif");
height:35px;
width:15px;
Float:left;
}
/************************************** Table Contents ***********************************/
. table_content{
margin:5px;
border:1px solid #B5D6E6;
width:890px;
height:390px;
Overflow-x:hidden;
Overflow-y:auto;
}
. table_content table{
width:100%;
border:0;
Border-collapse:collapse;
font-size:12px;
}
. table_content Table tr:hover{
Background-color: #C1EBFF;
}
. table_content Table th{
Border-collapse:collapse;
height:22px;
Background:url ("./tab/images/bg.gif");
border-right:1px solid #B5D6E6;
border-bottom:1px solid #B5D6E6;
}
. table_content Table td{
height:22px;
Word-wrap:break-word;
max-width:200px;
Text-align:center;
Vertical-align:middle;
border-right:1px solid #B5D6E6;
border-bottom:1px solid #B5D6E6;
}
The picture material is also presented to you, a few minutes can be the beautiful form to get it.
Pure CSS to create beautiful HTML tables