用DIV+UL+LI生成表格

最新推荐文章于 2021-06-02 16:29:21 发布
最新推荐文章于 2021-06-02 16:29:21 发布
阅读量263 收藏 1
点赞数
CC 4.0 BY-SA版权
原文链接：http://www.cnblogs.com/yushiro/archive/2008/04/28/1174970.html
本文提供了一个使用HTML和CSS实现的简单表格布局示例，通过定义样式来创建固定宽度的表格结构，并采用浮动元素的方式实现列表项的排列。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

<html>
<head>
<style>
<!--
#table {
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-left:1px #000 solid;
}
#table li {
float:left;
display:block;
margin:0px;
padding:0px;
border-right:1px #000 solid;
width:60px;
}
-->
</style>
</head>
<body>
<div id="table">
<ul>
<li>123</li>
<li>123</li>
<li>123</li>
<li>123</li>
<li>456</li>
</ul>
<ul>
<li>abc</li>
<li>abc</li>
<li>abc</li>
<li>abc</li>
<li>def</li>
</ul>
<ul>
<li>ABC</li>
<li>ABC</li>
<li>ABC</li>
<li>ABC</li>
<li>DEF</li>
</ul>
<ul>
<li>123</li>
<li>123</li>
<li>123</li>
<li>123</li>
<li>456</li>
</ul>
<ul>
<li>abc</li>
<li>abc</li>
<li>abc</li>
<li>abc</li>
<li>def</li>
</ul>
<ul>
<li>ABC</li>
<li>ABC</li>
<li>ABC</li>
<li>ABC</li>
<li>DEF</li>
</ul>
<ul>
<li>123</li>
<li>123</li>
<li>123</li>
<li>123</li>
<li>456</li>
</ul>
<ul>
<li>abc</li>
<li>abc</li>
<li>abc</li>
<li>abc</li>
<li>def</li>
</ul>
</div>
</body>
</html>

转载于:https://www.cnblogs.com/yushiro/archive/2008/04/28/1174970.html

HTML--(ul+li)元素个性化设计表格实例
苛性钠的博客
11-19 2737
为什么不使用table做布局 1.Table要比其它html标记占更多的字节。(延迟下载时间，占用服务器更多的流量资源)。 2.Table会阻挡浏览器渲染引擎的渲染顺序。(会延迟页面的生成速度，让用户等待更久的时间)。 3.Table里显示图片时需要你把单个、有逻辑性的图片切成多个图。(增加设计的复杂度，增加页面加载时间，增加HTTP会话数)。 4.在某些浏览器中Table里的文字的拷贝会出现问题。(这会让用户不悦)。 5.Table会影响其内部的某些布局属性的生效(比如<单元格里的元素的heigh
jquery 动态生成li_jquery 动态添加和删除 ul li列表
weixin_39801202的博客
02-17 1512
今天需要实现一个jquery动态添加和删除 ul li列表中的li行，自己简单的实现乐一个，分享一下jQuery add/remove ul li#nav{width:1000px;height:450px;border-top:# 2px solid;margin-top:10px;border-bottom:# 2px solid;background-color:#;margin-left...
DIV CSS布局教程：应用ul、li实现表格形式
05-01
DIV CSS布局教程：应用ul、li实现表格形式DIV CSS布局教程：应用ul、li实现表格形式DIV CSS布局教程：应用ul、li实现表格形式
DIV UL LI 表格
weixin_30525825的博客
07-21 118
如果外面的宽度为600 看li有几列 然后在加1 为外面的总宽度。li的总宽度 为600-li的个数+1 <html> <head> <title>test</title> <styletype="text/css"> ul{}{ margin:0px; padding:0px; width:200px; ...
基于DIV+ul+li实现的表格(多示例)
u011809276的专栏
11-06 3366
本文由 www.169it.com 搜集整理 普通的显示数据的时候，ul就是项目列表，li就是列表项。可以用来显示数据。如果用于DIV＋CSS布局的话，ul+li可以替换表格的作用，具体的设置，如果宽度高度、行间距、背景边框等需要配合CSS一起设置。li是固定的宽度与高度（单元格），设置li在ul中浮动，当ul不够宽的时候，li就会自动另起一行排列（一行有多少列通过计算即可得到ul的宽度，如
ul li实现表格样式
07-11
使用ul li 标签实现的表格样式，可代替table标签，避免搜索引擎收录不了表格中的关键字
【数据导出大师】：div+css表格数据导出的完美解决方案
本文旨在全面介绍div+css表格数据导出的实现方法和高级应用。首先概述了div+css在数据展示中的应用，然后详细探讨了数据导出功能的原理、技术实现以及兼容性和安全性问题。文章还深入讨论了前端模板引擎在数据导出中...
【JavaScript交互魔法】：用代码增强div+css表格的动态体验
[div+css制作表格](https://cdn.educba.com/academy/wp-content/uploads/2020/02/HTML-Display-Block-1-1.jpg) # 摘要 本文深入探讨了JavaScript和CSS在实现动态Web界面方面的交互基础和高级应用。文章首先阐述了...
DIV+CSS完美布局.pdf
01-25
- 使用无序列表`<ul>`，每个菜单项作为列表项`<li>`。 - 示例：`ul.menu { list-style-type: none; } ul.menu li { display: block; }`。 - **横向菜单**： - 同样使用无序列表`<ul>`，但通过设置`display: ...
css创意ul+li实现的细线表格实现代码
10-30
非常用创意的用ul+li实现的细线表格效果，不用table
用ul li制作表格样式（表格非常实用）
菜刀舞的快一点，武林高手也是难以近身的。
04-03 1381
表格大家并不陌生，细线表格更是受到广泛应用。 使用方法 其中每个li只负责右边、下边的线，配以float:left;来完成横向排列， 最外边的div则只定义上边、左边的线，用以显示表格完整线条。 这种做法的好处是更加灵活，你可以由ul中事先定义好的任意两个class来控制线的颜色， 整体语意也更加清晰，可见CSS有多么的灵活 :p 在做程序实现的时候，如同循环&lt;tr&gt;一样，我们可以直接...
div,css用ulli制作表格
weixin_30329623的博客
03-20 179
1.第一种样式 #news { width:500px; <!-- border:2px solid #eee; -->}#news li{ list-style-type:none; float:left; width:100px; text-align:center; background:#ccc; margin-right:2p...
div+css+ul+li表格
带着梦想飞翔
08-10 243
[code="html"] #div1 { width: 451px; } #div1 ul { width: 451px; margin: 0px; } #div1 li { float: left; width: 149px; height: 50px; list-style-type: none; border-left:#000 1px...
div 、ul、li 动态生成table (2)
joerong666
06-24 146
/// &lt;summary&gt;        /// 将数据集转成哈希表数组        /// &lt;/summary&gt;        /// &lt;param name="ds"&gt;数据源&lt;/param&gt;        /// &lt;param name="fields"&gt;要存储到哈希表的字段&lt;/param&gt;   
用ul li 制作表格样式
longyumen的专栏
12-07 5265
其中每个li只负责右边、下边的线，配以float:left;来完成横向排列， 最外边的div则只定义上边、左边的线，用以显示表格完整线条。 这种做法的好处是更加灵活，你可以由ul中事先定义好的任意两个class来控制线的颜色， 整体语意也更加清晰，可见CSS有多么的灵活 :p 在做程序实现的时候，如同循环一样，我们可以直接循环， 要知道，一个清晰的结构，对程序员开发程序的效率有多么大的帮助啊 完整
html ul做成表格,(转)DIVCSS布局教程：应用ul、li实现表格形式_html/css_WEB-ITnose
weixin_36165880的博客
06-02 677
我们首先分析一下如何制作：li是固定的宽度与高度(单元格)，设置li在ul中浮动，当ul不够宽的时候，li就会自动另起一行排列(一行有多少列通过计算即可得到ul的宽度，如一行四列，一列宽100px，那ul宽就是400px加上一定的边距)。这样就实现了类似于表格的效果，或者说我们用UL+LI模拟了表格的效果。我们开始HTML代码的编写：Example Source Code [www.52css.c...
CSS对div滚动条的样式设置
yaoyanzhu的博客
10-22 588
&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,span代替table设计表格
老头学编程的博客
12-30 3689
传统的表格一般都是用table标签设计的，现在网页设计很少用table了，主要用div,ul,li,span等标签，这是一种网页设计的思想了，和table不一样。用这种方式设计的html代码结构清晰，很容易输出后台的数据或调用程序的标签语言(碎片功能)。 <div class="head"> <ul> <li>服务器名</li> <li>服务器IP</li> <li>开区时间</li> <li>开区线
全面掌握HTML与CSS+DIV网页设计技巧
4. **列表和表格**：如何使用无序列表(`<ul><li>`)、有序列表(`<ol><li>`)和表格(`<table><tr><td>`)标签来组织内容。 5. **表单元素**：掌握表单(`<form>`)的创建和常用表单控件（如文本框(`<input type="text">`)...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值