table页的html css

来源：互联网发布：影视制作用什么软件编辑：程序博客网时间：2024/05/29 05:10

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>table表格页面制作</title>
<link href="css/table_style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="main">
<div id="content">
    <p> </p>
    <table class="table">
      <tr>
        <th class="width01"><input type="checkbox" /></th>
        <th>标题</th>
        <th>内容</th>
        <th>日期</th>
        <th class="width04">发布状态</th>
        <th class="width04">发布机构</th>
        <th class="width03">操作</th>
      </tr>
      <tr>
        <td><input type="checkbox" /></td>
        <td>1</td>
        <td>1</td>
        <td>1</td>
        <td>1</td>
        <td>1</td>
        <td><a href="#">添加</a> </td>
      </tr>
    </table>
    <div class="pageArea">
      <div class="fL"> <span>共12条</span> <span>第1/1页</span> <a href="#">首页</a> <a href="#">上一页</a> <a href="#">下一页</a> <a href="#">末页</a> </div>
      <div class="fR"> 转到
        <select>
          <option>01</option>
        </select>
        页 </div>
      <div class="clr"></div>
    </div>
</div>
</div>
</body>
</html>

/* CSS Document */

BODY{
margin:0;
color:#4D4F4C;
font:14px Arial,Verdana,Helvetica,sans-serif;
text-align:left;
line-height:1.2/1.5;
background:#FFF;
}
*{
margin:0;
padding:0;
}
#main{
width:960px;
margin:0 auto;
}
#content{
background:url(../images/content.gif) repeat-x bottom;
padding:0 0 25px;
}
.table{
width:100%;
}
.table TH{
padding:5px;
border:1px solid #93C7DF;
background:#E0EFF4;
font-weight:normal;
text-align:center;
}
.table TD{
padding:10px 5px;
border:1px solid #93C7DF;
}
TABLE{
border-collapse:collapse;
border-spacing:0;
}
TABLE.w100{
width:100%;
}
TH,TD{
text-align:left;
vertical-align:top;
}
TH.width01{
width:12px;
}

TH.width03{
width:70px;
}
TH.width04{
width:90px;
}
.pageArea{
font-size:14px;
padding:15px 0;
}
.pageArea01 .fL SPAN{
margin:0 10px 0 0;
}
.pageArea01 .fL A{
margin:0 5px 0 0;
}
A:focus{
outline:0;
}
A:link,A:visited{
color:#0068B9;
text-decoration:none;
}
A:hover,A:active {
text-decoration:underline;
}
.fL{
float:left;
}
.fR{
float:right;
}