皮肤 颜色
板式
宽屏 窄屏
您的位置:合度 > 动态 > 技术选摘 > >

怎样用div做数据表格?

发表日期:2015-04-11    文章编辑:本站编辑   来源:首发    浏览次数:
用div做成表格的形式,把标签中间的空格都去掉就可以了。

< !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 >糸米科技(www.mimyy.com)-用div做表格 < /title>
 < /head>
< style type="text/css" >
body{ margin:0px; padding:0px;font-family:Microsoft Yahei,Tahoma,Verdana,STHeiTi,simsun,sans-serif; font-size:14px; background-image:url(../images/t_bg.jpg); background-repeat:no-repeat; background-color:#000;}
ul,li{ list-style-type:none; padding:0px; margin:0px;}
a { color:#fff; text-decoration:none;}
a:hover { color:#F30; text-decoration:none;}
 #tab{
width:645px;
  height:auto;
  margin:0 auto;
  background-color:#e5f2f4;
 }
 .lititle{
  width:643px; border:1px dotted #f3f3f3; line-height:40px; font-size:16px; font-weight:bold; color:#000;
  }
  .cont {
  }
  .cont li{
  list-style:none;
  float:left;
    border-left:1px dotted #f3f3f3;
border-bottom:1px dotted #f3f3f3;
  border-right:1px dotted #f3f3f3;
    height:24px;
background-color:#395560;
line-height:24px;
color:#f3f3f3;
  }
.li1{
  width:50px;
  list-style:none;
  float:left;
  text-align:center;
  border-right:1px dotted #f3f3f3;
   }
   .li2{
  width:140px;
  list-style:none;
  float:left;
  text-align:center;
   border-right:1px dotted #f3f3f3; }
   .li3{
  width:400px;
  list-style:none;
  float:left;
  text-align:center;
   border-right:1px dotted #f3f3f3; }
   .li4{
  width:50px;
  float:left;
  text-align:center;
  }
     .liwz{
  width:451px;
  float:left;
  text-align:center;
  }
  .lititle{ display:block; text-align:center;}
   < /style>
< body >
 < div id="tab">
 < div class="cont">
 < div class="lititle">糸米科技-用div做表格完美版 < /div>
 < ul > < li > < span class="li1">< b >排序 < /b> < /span> < span class="li2">< b >名称 < /b> < /span> < span class="liwz">< b >网址 < /b> < /span> < /li> < li > < span class="li1">1 < /span> < span class="li2">糸米科技 < /span> < span class="li3">http://blog.sina.com.cn/kakuue < /span> < span class="li4">访 问 < /a> < /span> < /li> < li > < span class="li1">1 < /span> < span class="li2">糸米科技 < /span> < span class="li3">http://blog.sina.com.cn/kakuue < /span> < span class="li4">访 问 < /a> < /span> < /li> < li > < span class="li1">1 < /span> < span class="li2">糸米科技 < /span> < span class="li3">http://blog.sina.com.cn/kakuue < /span> < span class="li4">访 问 < /a> < /span> < /li> < li > < span class="li1">1 < /span> < span class="li2">糸米科技 < /span> < span class="li3">http://blog.sina.com.cn/kakuue < /span> < span class="li4">访 问 < /a> < /span> < /li> < li > < span class="li1">1 < /span> < span class="li2">糸米科技 < /span> < span class="li3">http://blog.sina.com.cn/kakuue < /span> < span class="li4">访 问 < /a> < /span> < /li> < li > < span class="li1">1 < /span> < span class="li2">糸米科技 < /span> < span class="li3">http://blog.sina.com.cn/kakuue < /span> < span class="li4">访 问 < /a> < /span> < /li> < li > < span class="li1">1 < /span> < span class="li2">糸米科技 < /span> < span class="li3">http://blog.sina.com.cn/kakuue < /span> < span class="li4">访 问 < /a> < /span> < /li> < li > < span class="li1">1 < /span> < span class="li2">糸米科技 < /span> < span class="li3">http://blog.sina.com.cn/kakuue < /span> < span class="li4">访问 < /a> < /span> < /li>
 
  < /ul>
  < /div>
   < /div>
 < /body>
 < /html>

相关文章推荐

  
Socket 和 WebSocket 有哪些区别和联系? WebSocket 和 HTML5 是什么关系? 必须在浏览器中才能使用...
  
其实对于我们一般理解的计算机内存,它算是CPU与计算机打交道最频繁的区域,所有数据都是...
  
简介 响应式Web设计 是一种创建Web应用程序的新方法。一旦采用 响应式Web设计 创建出应用程序...
  
用div做成表格的形式,把标签中间的空格都去掉就可以了...
  
看下面的代码,其中连接池采用的c3p0,配置文件省略 import java.sql.Connection; import org.springframe...
  
主要几个框架或者插件是如何实现异步加载事件响应的。 一.LABjs 这个项目位于github上面,其本...
  
html5shiv让IE6-IE8支持HTML5标签 越来越多的站点开始使用 HTML5 标签。但是目前的情况是还有很多人...
  
缓存 是实际工作中非常常用的一种提高性能的方法, 我们会在许多场景下来使用缓存。 本文通...
  
为了防止恶意用户发布恶意内容,我们的安全分析浏览器都在虚拟机上运行。这使我们能够确...