基于DIV+ul+li实现的表格(多示例)

最新推荐文章于 2024-03-14 15:31:53 发布
最新推荐文章于 2024-03-14 15:31:53 发布
阅读量3.2k 收藏 2
点赞数
分类专栏： html/css

本文由 www.169it.com 搜集整理

普通的显示数据的时候，ul就是项目列表，li就是列表项。可以用来显示数据。如果用于DIV＋CSS布局的话，ul+li可以替换表格的作用，具体的设置，如果宽度高度、行间距、背景边框等需要配合CSS一起设置。li是固定的宽度与高度（单元格），设置li在ul中浮动，当ul不够宽的时候，li就会自动另起一行排列（一行有多少列通过计算即可得到ul的宽度，如一行四列，一列宽100px，那ul宽就是400px加上一定的边距）。这样就实现了类似于表格的效果，或者说我们用UL+LI模拟了表格的效果。

实现过程如下:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
< ul  id = "biaoge" >
      < li  class = "biaotou" >第一列</ li >
      < li  class = "biaotou" >第二列</ li >
      < li  class = "biaotou" >第三列</ li >
      < li  class = "biaotou" >第四列</ li >
      < li >数据1-1</ li >
      < li >数据1-2</ li >
      < li >数据1-3</ li >
      < li >数据1-4</ li >
      < li >数据2-1</ li >
      < li >数据2-2</ li >
      < li >数据2-3</ li >
      < li >数据2-4</ li >
      < li >数据3-1</ li >
      < li >数据3-2</ li >
      < li > 数据3-3</ li >
      < li >数据3-4</ li >
      < li >数据4-1</ li >
      < li >数据4-2</ li >
      < li >数据4-3</ li >
      < li >数据4-4</ li >
  </ ul >　

一个无序列表biaoge，前四个列表项我们赋予了类biaotou。因为这四个项是表格头部，应该与表格数据有所区别。所以单独赋予了类，可以方便控制。下面我们开始CSS代码的编写：

1
2
3
4
5
6
* {
      margin : 0 ;
      padding : 0 ;
      font-size : 12px ;
      color : #000 ;
  }　　

CSS整体布局声明，边距为零，填充为零，文字大小为12px，文字颜色为黑色#000；

1
2
3
4
#biaoge {
      width : 405px ;
      margin : 50px  auto ;
  }　　

ID为biaoge的ul的CSS编码，宽度为405px（一列100px*4列+li的边距），上下边距为50px，左右为自动，实现水平居中对齐。

   
1
2
3
4
5
6
7
8
9
10
11
#biaoge li,#biaoge li.biaotou {
      list-style-type : none ;
      width : 100px ;
      height : 30px ;
      line-height : 30px ;
      text-align : center ;
      float : left ;
  margin-left : 1px ;
      margin-bottom : 1px ;
      background : #ccc ;
  }　　

对各个列表项li（即单元格）进行样式定义，设置列表项预设标记为无，宽度与高度分别是100px、30px，为了让文字垂直居中于li中，设置行高为30px，文字水平居中。设置为向左浮动，并且左边距与底边距均为1px，实现了简单的表格线的效果。（如果设计成border的表格线，很多CSS HACK很难控制与调整，特别是FF中极不正常，不建议使用border来实现这类ul+li实现表格线的定义！）设置背景色为浅灰色#ccc。

1
2
3
#biaoge li.biaotou {
      background : #999 ;
  }　　

我们设置四个“表头”li的背景色为深灰色#999，与其它的li区别开来。我们的样式定义基本就完成了。你可以在色彩上对它进行一些其它的美化。 表格类的数据最好是用表格来实现，符合WEB标准不必拘泥于完全不用表格，只是在适当的情况下，可以使用此案例的方法来实现类似于表格的布局。

实例代码1:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
<!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.webjx.com</ title >
  < style  type = "text/css" >
  * {
  margin:0;
  padding:0;
  font-size:12px;
  color:#000;
  }
  #biaoge {
  width:405px;
  margin:50px auto;
  }
  #biaoge li,#biaoge li.biaotou {
  list-style-type:none;
  width:100px;
  height:30px;
  line-height:30px;
  text-align:center;
  float:left;
  margin-left:1px;
  margin-bottom:1px;
  background:#ccc;
  }
  #biaoge li.biaotou {
  background:#999;
  }
  </ style >
  </ head >
  < body >
  < ul  id = "biaoge" >
  < li  class = "biaotou" >第一列</ li >
  < li  class = "biaotou" >第二列</ li >
  < li  class = "biaotou" >第三列</ li >
  < li  class = "biaotou" >第四列</ li >
  < li >数据1-1</ li >
  < li > 数据1-2</ li >
  < li >数据1-3</ li >
  < li >数据1-4</ li >
  < li >数据2-1</ li >
  < li >数据2-2</ li >
  < li >数据2-3</ li >
  < li >数据2-4</ li >
  < li >数据3-1</ li >
  < li >数据3-2</ li >
  < li >数据3-3</ li >
  < li >数据3-4</ li >
  < li >数据4-1</ li >
  < li >数据4-2</ li >
  < li >数据4-3</ li >
  < li >数据4-4</ li >
  </ ul >
  </ body >
</ html >

实例代码:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
<!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=utf-8"  />
< title >DIV+CSS表格效果</ title >
< style  type = "text/css" >
* {margin:0;padding:0}
#main {margin:100px 0 0 200px}
#main ul {width:520px;height:165px;list-style:none}
#main li {border-left:1px solid #ccc;border-top:1px solid #ccc;float:left;width:102px;height:33px;text-align:center;line-height:33px}
#main li.b {border-bottom:1px solid #ccc}
#main li.r {border-right:1px solid #ccc}
</ style >
</ head >
< body >
< div  id = "main" >
< ul >
< li >11</ li >
< li >11</ li >
< li >11</ li >
< li >11</ li >
< li  class = "r" >11</ li >
< li >怎么样？</ li >
< li >还行吧？</ li >
< li ></ li >
< li ></ li >
< li  class = "r" >11</ li >
< li >上海世博</ li >
< li ></ li >
< li ></ li >
< li ></ li >
< li  class = "r" >11</ li >
< li ></ li >
< li ></ li >
< li ></ li >
< li ></ li >
< li  class = "r" >11</ li >
< li  class = "b" >生活更美好</ li >
< li  class = "b" ></ li >
< li  class = "b" ></ li >
< li  class = "b" ></ li >
< li  class = "b r" >11</ li >
</ ul >
</ div >
</ body >
</ html >
zhy_me
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
DIV CSS布局教程：应用ul、li实现表格形式
05-01
DIV CSS布局教程：应用ul、li实现表格形式DIV CSS布局教程：应用ul、li实现表格形式DIV CSS布局教程：应用ul、li实现表格形式
用ul li 制作表格样式
longyumen的专栏
12-07 5146
其中每个li只负责右边、下边的线，配以float:left;来完成横向排列， 最外边的div则只定义上边、左边的线，用以显示表格完整线条。 这种做法的好处是更加灵活，你可以由ul中事先定义好的任意两个class来控制线的颜色， 整体语意也更加清晰，可见CSS有多么的灵活 :p 在做程序实现的时候，如同循环一样，我们可以直接循环， 要知道，一个清晰的结构，对程序员开发程序的效率有多么大的帮助啊 完整
用ul li动态绘制简易表格
月影神社
03-14 407
用ul li动态绘制简易表格
ul li+ css 实线表格
kingtentx的专栏
10-31 2289
ul li实线Table .ultable { width: 600px; } .ultable ul { margin-top: 0; margin-bottom: 0; padding-left: 0; border-top: 1px solid #CCC; border-left: 1px solid #CCC; height: 30px; wi
CSS对div滚动条的样式设置
yaoyanzhu的博客
10-22 517
&lt;style type="text/css"&gt;.scroll{width:100px;height:200px;overflow:auto;/*自动出现滚动条，如果要出现竖直滚动条则改成：overflow-y:auto，如果横向出现滚动条则改成：overflow-x:auto*/scrollbar-face-color:#F00;/*滚动条凸出部分的颜色(前景色),包括两端的方形按钮、...
div 、ul、li 动态生成table
joerong666
06-18 211
public string GenerateTable(int colCount,SqlDataReader rs,string[] fields,string startStr,string endStr)        {            int i = 0;            StringBuilder resultStr = new StringBuilder();       ...
用DIV+UL+LI生成表格
11-10 667
  html>head>style>...{...}{clear:none;width:300px;border-top:1px #000 solid;}#table ul {...}{clear:left;margin:0px;padding:0px;width:301px;list-style-type:none;border-bottom:1px #000 solid;border-le
应用ul、li实现表格形式
暖阳的进步乐园
05-03 1243
　　昨天在52CSS.com的留言板，有一位朋友在呐喊：用DIV的UL LI要如何实现表格的那种形式啊？　　我感觉挺纳闷，表格的数据，就应该使用表格来组织，不是说制作符合WEB标准的网站，表格就一无是处、彻底下岗了。表格类的数据，它有着得天独厚的条件，也非常方便组织。这类数据内容直接使用表格就可以了。　　或许你认为你的数据并不是表格式的数据，还有着其它的用法或你自己的见解，我们也可以用ul、li来
html ul做成表格,(转)DIVCSS布局教程：应用ul、li实现表格形式_html/css_WEB-ITnose
weixin_36165880的博客
06-02 552
我们首先分析一下如何制作：li是固定的宽度与高度(单元格)，设置li在ul中浮动，当ul不够宽的时候，li就会自动另起一行排列(一行有多少列通过计算即可得到ul的宽度，如一行四列，一列宽100px，那ul宽就是400px加上一定的边距)。这样就实现了类似于表格的效果，或者说我们用UL+LI模拟了表格的效果。我们开始HTML代码的编写：Example Source Code [www.52css.c...
div+css实现两列table效果示例
12-13
display:inline}.mycode ul{ width:500px; height:300px } .mycode li{ width:200px; float:left; height:30px; list-style:none} .mycode li p{text-align:right; margin-top:0px} <p> .sheng{ color:#F05D
div li的多行多列 无刷新分页示例代码
12-19
翻页文件一次加载了全部的内容，因而不是很适合大型的网站，而适用于数据比较少的情况。 本例未使用数据库。... </ul> <div class=”holder”></div> </div> JavaScript Code [removed] $(document).re
ul li实现表格样式
07-11
使用ul li 标签实现的表格样式，可代替table标签，避免搜索引擎收录不了表格中的关键字
ul和li实现分两列（多列）布局显示
09-25
DIV+CSS分两列（多列）布局显示，下面有个不错的示例，大家可以参考下
div ul li 嵌套后如何解决增加多个li后DIV高度自适应问题
09-25
div ul li 嵌套的使用在网页布局中很常见，最主要的问题就是如何解决增加多个li后DIV高度自动适应问题，本文有个不错的示例，可以解决此问题，大家可以尝试运行下
js解决弹窗问题实现班级跳转DIV示例
12-11
–实现班级跳转DIV–%> <div id=”displayClassDiv” xss=removed class=”gp_box”> <ul> <% for(int i=0;i<dtPTC xss=removed> <li> ”gp_title”> ;%=dtPTC.Rows[i][“ProjectID”].ToString()>’>&lt...
spring java图片上传源码.rar
最新发布
04-26
源码实现了图片上传功能，可供相关功能开发的小伙伴参考学习使用。
新入职员工工作总结范文大全(篇).docx
04-26
工作总结，新年计划，岗位总结，工作汇报，个人总结，述职报告，范文下载，新年总结，新建计划。
本项目内容为《SpringBoot 2.X 基础教程》配套源码.zip
04-26
提供的源码资源涵盖了安卓应用、小程序、Python应用和Java应用等多个领域，每个领域都包含了丰富的实例和项目。这些源码都是基于各自平台的最新技术和标准编写，确保了在对应环境下能够无缝运行。同时，源码中配备了详细的注释和文档，帮助用户快速理解代码结构和实现逻辑。 适用人群： 这些源码资源特别适合大学生群体。无论你是计算机相关专业的学生，还是对其他领域编程感兴趣的学生，这些资源都能为你提供宝贵的学习和实践机会。通过学习和运行这些源码，你可以掌握各平台开发的基础知识，提升编程能力和项目实战经验。 使用场景及目标： 在学习阶段，你可以利用这些源码资源进行课程实践、课外项目或毕业设计。通过分析和运行源码，你将深入了解各平台开发的技术细节和最佳实践，逐步培养起自己的项目开发和问题解决能力。此外，在求职或创业过程中，具备跨平台开发能力的大学生将更具竞争力。 其他说明： 为了确保源码资源的可运行性和易用性，特别注意了以下几点：首先，每份源码都提供了详细的运行环境和依赖说明，确保用户能够轻松搭建起开发环境；其次，源码中的注释和文档都非常完善，方便用户快速上手和理解代码；最后，我会定期更新这些源码资源，以适应各平台技术的最新发展和市场需求。
IMG_20240426_195457.jpg
04-26
IMG_20240426_195457.jpg
li怎么让文字在图片下面_div+css（ul li）实现图片上文字下列表布局
05-29
您可以使用以下步骤来实现图片上文字下列表布局： 1. 使用`<div>`标签包裹图片和文本，为其添加一个`class`名，比如`container`。 2. 在`<div>`标签内部先放置图片，使用`<img>`标签，并设置`width`和`height`属性。 3. 在图片下面添加一个`<ul>`标签，用于放置列表。 4. 在`<ul>`标签内部添加`<li>`标签，用于放置每一条列表项。 5. 在`<li>`标签内部添加需要展示的文本，可以使用`<h3>`、`<p>`等标签。 6. 使用CSS样式设置`container`的宽度和高度，以及图片和文本的位置和样式。 以下是一个示例代码： HTML: ``` <div class="container"> <img src="your-image-url.jpg" width="200" height="200"> <ul> <li><h3>List Item 1</h3><p>Description of list item 1</p></li> <li><h3>List Item 2</h3><p>Description of list item 2</p></li> <li><h3>List Item 3</h3><p>Description of list item 3</p></li> </ul> </div> ``` CSS: ``` .container { width: 80%; margin: 0 auto; display: flex; flex-direction: column; align-items: center; justify-content: center; } img { margin-bottom: 20px; } ul { list-style: none; padding: 0; margin: 0; } li { margin-bottom: 10px; } h3 { font-size: 18px; font-weight: bold; margin-bottom: 5px; } p { font-size: 14px; } ``` 这样就可以实现图片上文字下列表布局了。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值