用ul li制作表格样式（表格非常实用）

最新推荐文章于 2024-07-08 20:49:03 发布
最新推荐文章于 2024-07-08 20:49:03 发布
阅读量1.2k 收藏 1
点赞数
分类专栏： Html/Css 文章标签： CSS XHTML HTML
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m1maomao/article/details/83368934
版权
本文介绍了如何使用ul和li元素模拟表格布局，通过CSS实现表格的边框，增强了灵活性。通过定义不同的class，可以轻松控制行和列的样式。这种方法对于程序员来说，能提高开发效率，同时保持结构清晰。
摘要由CSDN通过智能技术生成

表格大家并不陌生，细线表格更是受到广泛应用。
使用方法


其中每个li只负责右边、下边的线，配以float:left;来完成横向排列，
最外边的div则只定义上边、左边的线，用以显示表格完整线条。
这种做法的好处是更加灵活，你可以由ul中事先定义好的任意两个class来控制线的颜色，
整体语意也更加清晰，可见CSS有多么的灵活 :p

在做程序实现的时候，如同循环<tr>一样，我们可以直接循环<ul>，
要知道，一个清晰的结构，对程序员开发程序的效率有多么大的帮助啊

完整代码：
<!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>tableFrame_simple</title>
<style type="text/css">
body{

最低0.47元/天 解锁文章
m1maomao
关注
专栏目录
如何用css画一个三角形
YouYi__的博客
09-09 422
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document&l
用ul li 制作表格样式
longyumen的专栏
12-07 5197
其中每个li只负责右边、下边的线，配以float:left;来完成横向排列， 最外边的div则只定义上边、左边的线，用以显示表格完整线条。 这种做法的好处是更加灵活，你可以由ul中事先定义好的任意两个class来控制线的颜色， 整体语意也更加清晰，可见CSS有多么的灵活 :p 在做程序实现的时候，如同循环一样，我们可以直接循环， 要知道，一个清晰的结构，对程序员开发程序的效率有多么大的帮助啊 完整
ul li实现表格样式
07-11
使用ul li 标签实现的表格样式，可代替table标签，避免搜索引擎收录不了表格中的关键字
HTML——列表、表格、表单
最新发布
qq_66666660的博客
07-08 801
表单用于搜集不同类型的用户输入(用户输入的数据)，然后可以把用户数据提交到web服务器。value属性 设置表单元素的值，该值是提交数据时参数名所对应的值。标签 表示表单元素的用户输入标签，定义不同类型的用户输入数据方式。标签 表示表单元素的多行文本输入框标签 定义多行文本输入框。标签 表示表单元素的文字标注标签，定义文字标注。标签 表示表单元素的下拉列表标签 定义下拉列表。type="submit" 定义提交按钮。标签 表示表单标签，定义整体的表单区域。标签 表示表单标签，定义整体的表单区域。
应用ul、li实现表格形式
暖阳的进步乐园
05-03 1257
　　昨天在52CSS.com的留言板，有一位朋友在呐喊：用DIV的UL LI要如何实现表格的那种形式啊？　　我感觉挺纳闷，表格的数据，就应该使用表格来组织，不是说制作符合WEB标准的网站，表格就一无是处、彻底下岗了。表格类的数据，它有着得天独厚的条件，也非常方便组织。这类数据内容直接使用表格就可以了。　　或许你认为你的数据并不是表格式的数据，还有着其它的用法或你自己的见解，我们也可以用ul、li来
ul、li 标签实现完美表格
岛泪的博客
12-03 4858
第一种是没有缺口的，如下图 第二种是有缺口的，如下图 两种表格的最大特点就是不用给表格里的每个 li 元素都单独设置 css 样式，要用的时候直接闭着眼睛循环 li 标签即可。 第一种的特点是 1、内边框的大小是一致的。 2、内边框的大小和外边框的大小可以分别设置。 3、内边框和外边框的颜色可以分别设置。 4、每个小方框的白色部分大小是一致的（空缺部分不算）。 ...
html ul做成表格,ul li css制作表格
weixin_39576294的博客
06-02 1449
实现方法：(利用div的ul和li列表标记打造类似表格效果)我们首先分析一下如何制作：li是固定的宽度与高度(单元格)，设置li在ul中浮动，当ul不够宽的时候，li就会自动另起一行排列(一行有多少列通过计算即可得到ul的宽度，如一行四列，一列宽100px，那ul宽就是400px加上一定的边距)。这样就实现了类似于表格的效果，或者说我们用UL+LI模拟了表格的效果。我们开始HTML代码的编写：cl...
css创意ul+li实现的细线表格实现代码
10-30
通过使用ul和li标签，以及CSS样式，我们可以实现一个细线表格的效果，而不需要使用传统的table标签。这种方法非常有创意，可以应用于各种网页设计中。 优点 这种方法有很多优点。首先，它可以减少代码的数量，...
CSS 用ul li做圆角表格
09-25
### CSS 使用 ul li 实现圆角表格的知识点详解 #### 一、引言 在网页设计与开发领域，实现美观且实用的表格是一项常见的需求。本文档将详细讲解如何使用HTML中的`<ul>`和`<li>`元素来构建一个具有圆角效果的表格，...
div,css用ulli制作表格
weixin_30329623的博客
03-20 143
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...
css控制UL LI 的样式详解(推荐)
09-25
DIV+CSS里，我们用得最多的就是ul li来显示数据，如新闻按钮等。下面给大家一个css ul li的例子供学习
ul li表格.htm
11-18
ul li表格.htm ul li表格.htm ul li表格.htm
DIV CSS布局教程：应用ul、li实现表格形式
05-01
DIV CSS布局教程：应用ul、li实现表格形式DIV CSS布局教程：应用ul、li实现表格形式DIV CSS布局教程：应用ul、li实现表格形式
用DIV+UL+LI生成表格
weixin_30836759的博客
04-28 228
<html> <head> <style> <!-- #table{ clear:none; width:300px; border-top:1px#000solid; } #tableul{ clear:left; margin:0px; padding:0px; width:301px; list-style-ty...
HTML--(ul+li)元素个性化设计表格实例
苛性钠的博客
11-19 2609
为什么不使用table做布局 1.Table要比其它html标记占更多的字节。(延迟下载时间，占用服务器更多的流量资源)。 2.Table会阻挡浏览器渲染引擎的渲染顺序。(会延迟页面的生成速度，让用户等待更久的时间)。 3.Table里显示图片时需要你把单个、有逻辑性的图片切成多个图。(增加设计的复杂度，增加页面加载时间，增加HTTP会话数)。 4.在某些浏览器中Table里的文字的拷贝会出现问题。(这会让用户不悦)。 5.Table会影响其内部的某些布局属性的生效(比如<单元格里的元素的heigh
vue用ul写成table表格的样式
sunshineTing2的博客
04-07 1875
用ul写出类似table表格的样式 data数据 organList = { name: '安全委员会', code: 'awh20200215', higher: '柏科管理公司', duty: ['1.第一','2.第二'], person: '张三', phone: '18701966666' }; templat...
html ul做成表格,(转)DIVCSS布局教程：应用ul、li实现表格形式_html/css_WEB-ITnose
weixin_36165880的博客
06-02 603
我们首先分析一下如何制作：li是固定的宽度与高度(单元格)，设置li在ul中浮动，当ul不够宽的时候，li就会自动另起一行排列(一行有多少列通过计算即可得到ul的宽度，如一行四列，一列宽100px，那ul宽就是400px加上一定的边距)。这样就实现了类似于表格的效果，或者说我们用UL+LI模拟了表格的效果。我们开始HTML代码的编写：Example Source Code [www.52css.c...
html用ul写表格
05-31
虽然 HTML 中有专门的 `<table>` 标签用于创建表格，但是你可以使用无序列表 `<ul>` 标签来模拟表格。具体做法如下： 1. 使用 `<ul>` 标签作为表格的容器。 2. 使用 `<li>` 标签作为表格的行。 3. 在每个 `<li>` 标签中使用 `<span>` 或其他标签作为单元格。 4. 使用 CSS 来设置单元格的样式，比如设置单元格的宽度、边框等。 以下是一个例子： ```html <ul class="table"> <li> <span>姓名</span> <span>年龄</span> <span>性别</span> </li> <li> <span>张三</span> <span>18</span> <span>男</span> </li> <li> <span>李四</span> <span>20</span> <span>女</span> </li> <li> <span>王五</span> <span>22</span> <span>男</span> </li> </ul> <style> .table { list-style: none; margin: 0; padding: 0; } .table li { display: flex; justify-content: space-between; padding: 5px 10px; border-bottom: 1px solid #ccc; } .table li:first-child { font-weight: bold; } .table span { width: 33.33%; text-align: center; } </style> ``` 上述代码中，我们使用了 `<ul>` 标签作为表格的容器，使用了 `<li>` 标签作为表格的行，并在每个 `<li>` 标签中使用了 `<span>` 标签作为单元格。然后，使用 CSS 来设置单元格的样式。 请注意，这种方法虽然可以模拟表格，但是不如使用 `<table>` 标签方便和语义化。因此，在实际开发中，应该优先考虑使用 `<table>` 标签来创建表格。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值