网页布局之Div vs Table （2）

最新推荐文章于 2024-12-06 21:48:23 发布
转载 最新推荐文章于 2024-12-06 21:48:23 发布 · 818 阅读 · 0

本文介绍了如何使用HTML中的div元素结合ul和li标签来实现类似表格的布局效果，包括CSS样式控制，如消除列表符号和使元素横向排列，以及在实际应用中的案例展示。

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

大家都知道table可以实现很清晰的表状结构，这样的特点对于初学者来说无疑是很方便的。很多时候人们都忽略了div的表格效果，其实div也能实现比较好的表格效果，下面为大家演示一下。

div实现表格效果需要其他标签辅助，这个就是我们的 ul li标签。

 

假如要实现这么一个表格效果。


那么使用table布局的代码是这样：

[html]  view plain copy
  1. <html>  
  2. <head>  
  3. </head>  
  4. <body>  
  5.     <table>  
  6.         <tr>  
  7.             <td>栏目一</td>  
  8.             <td>栏目二</td>  
  9.             <td>栏目三</td>  
  10.             <td>栏目四</td>  
  11.         <tr>  
  12.         <tr>  
  13.             <td>内容一</td>  
  14.             <td>内容二</td>  
  15.             <td>内容三</td>  
  16.             <td>内容四</td>  
  17.         <tr>  
  18.     </table>  
  19. </table>  
  20. </body>  
  21. </html>  

同样的使用div实现这样的效果也特别简单，看看div的代码


[html]  view plain copy
  1. <html>  
  2. <head>  
  3.     <style type="text/css">  
  4.         ul li{  
  5.             list-style-type:none;  
  6.             display:inline;  
  7.         }  
  8. </style>  
  9. </head>  
  10. <body>  
  11.     <div>  
  12.     <ul>  
  13.         <li>栏目一</li>  
  14.         <li>栏目二</li>  
  15.         <li>栏目三</li>  
  16.         <li>栏目四</li>  
  17.     <ul>  
  18.     </div>  
  19.     <div>  
  20.     <ul>  
  21.         <li>栏目一</li>  
  22.         <li>栏目二</li>  
  23.         <li>栏目三</li>  
  24.         <li>栏目四</li>  
  25.     <ul>  
  26.     </div>  
  27. </table>  
  28. </body>  
  29. </html>  

这里几点比较注意的是，ul 和li 可以实现表格的布局，这里每个ul相当于table里面的tr实现一行，每个li相当于table的td，实现一个单元格。

其中需要用到css控制它的显示样式，其中list-style-type:none; 这句话消除li前面的项目符号，display:inline; 这句话让li标签横向显示。这样就能实现表格的效果。

 

通过这种方式，div就能实现表格效果。这样一个小小的div块就能实现一个表格。看了一些主流的网站比如搜狐的首页，它的导航就是使用这种方式布局的，下面是搜狐的导航栏目的div+li布局。看到很多主流的网站，比如腾讯，网易的网站都大量的使用了这种布局。

[html]  view plain copy
  1. <!-- 导航 -->   
  2.   
  3.   
  4. <DIV class=nav1>   
  5.   
  6. <UL>   
  7.   
  8. <LI style="MARGIN-LEFT: 5px" class=red><A href="http://www.sogou.com/">搜狗</A></LI>   
  9.   
  10. <LI style="MARGIN: 0px 5px"><A href="http://pinyin.sogou.com/">输入法</A></LI>   
  11.   
  12. <LI><A href="http://ie.sogou.com/">浏览器</A></LI>   
  13.   
  14. <LI style="MARGIN: 0px 6px"><A href="http://map.sogou.com/">地图</A></LI>   
  15.   
  16. <LI><A href="http://mail.sohu.com/">邮件</A></LI>   
  17.   
  18. <LI style="MARGIN: 0px 5px" class=red><A href="http://t.sohu.com/">微博</A></LI>   
  19.   
  20. <LI><A href="http://blog.sohu.com/">博客</A></LI>   
  21.   
  22. <LI style="MARGIN: 0px 6px"><A href="http://bai.sohu.com/">白社会</A></LI>   
  23.   
  24. <LI class="fontArial red"><A href="http://club.sohu.com/">BBS</A></LI>   
  25.   
  26. <LI style="MARGIN: 0px 5px"><A href="http://class.chinaren.com/">校友录</A></LI>   
  27.   
  28. <LI class=red><A href="http://tv.sohu.com/">视频</A></LI>   
  29.   
  30. <LI style="MARGIN: 0px 6px"><A href="http://my.tv.sohu.com/">播客</A></LI>   
  31.   
  32. <LI><A href="http://games.sohu.com/">游戏</A></LI>   
  33.   
  34. <LI style="MARGIN: 0px 5px"><A href="http://tl.sohu.com/">天龙</A></LI>   
  35.   
  36. <LI class=red><A href="http://ldj.changyou.com/">鹿鼎记</A></LI>   
  37.   
  38. <LI style="MARGIN: 0px 6px"><A href="http://www.wap.sohu.com/">手机搜狐网</A></LI>   
  39.   
  40. <LI><A href="http://ting.sohu.com/">听书</A></LI>   
  41.   
  42. <LI style="MARGIN: 0px 0 0 5px"><A href="http://game.m.sohu.com/">手机游戏</A></LI>   
  43.   
  44. <LI class=navEnd><A href="http://egou.sohu.com/">e购房</A></LI></UL></DIV>   
  45.   
  46. <DIV class=nav2>   
  47.   
  48. <UL>   
  49.   
  50. <LI style="MARGIN: 0px 0px 0px 1px"><BR></LI>   
  51.   
  52. <LI class=red><A href="http://news.sohu.com/">新闻</A></LI>   
  53.   
  54. <LI style="MARGIN: 0px 1px"><BR></LI>   
  55.   
  56. <LI><A href="http://pic.news.sohu.com/">图片</A></LI>   
  57.   
  58. <LI><A href="http://star.news.sohu.com/">评论</A></LI>   
  59.   
  60. <LI style="MARGIN: 0px 1px"><BR></LI>   
  61.   
  62. <LI><A href="http://comment.news.sohu.com/">我说两句</A></LI>   
  63.   
  64. <LI><A href="http://mil.news.sohu.com/">军事</A></LI>   
  65.   
  66. <LI style="MARGIN: 0px 1px"><BR></LI>   
  67.   
  68. <LI><A href="http://gongyi.sohu.com/">公益</A></LI>   
  69.   
  70. <LI class=red><A href="http://sports.sohu.com/">体育</A></LI>   
  71.   
  72. <LI class=fontArial><A href="http://sports.sohu.com/nba.shtml">NBA</A></LI>   
  73.   
  74. <LI style="MARGIN: 0px 1px"><BR></LI>   
  75.   
  76. <LI><A href="http://sports.sohu.com/zhongchao.shtml">中超</A></LI>   
  77.   
  78. <LI class="fontArial b"><A href="http://s.sohu.com/">S</A></LI>   
  79.   
  80. <LI style="MARGIN: 0px 1px"><BR></LI>   
  81.   
  82. <LI class=red><A href="http://business.sohu.com/">财经</A></LI>   
  83.   
  84. <LI><A href="http://money.sohu.com/">理财</A></LI>   
  85.   
  86. <LI><A href="http://stock.sohu.com/">股票</A></LI>   
  87.   
  88. <LI><A href="http://fund.sohu.com/">基金</A></LI>   
  89.   
  90. <LI class=fontArial><A href="http://it.sohu.com/">IT</A></LI>   
  91.   
  92. <LI><A href="http://digi.it.sohu.com/">数码</A></LI>   
  93.   
  94. <LI><A href="http://digi.it.sohu.com/mobile.shtml">手机</A></LI>   
  95.   
  96. <LI><A href="http://auto.sohu.com/">汽车</A></LI>   
  97.   
  98. <LI><A href="http://goche.sohu.com/">购车</A></LI>   
  99.   
  100. <LI style="MARGIN: 0px 1px"><BR></LI>   
  101.   
  102. <LI><A href="http://house.sohu.com/">房产</A></LI>   
  103.   
  104. <LI><A href="http://www.51f.com/">二手房</A></LI>   
  105.   
  106. <LI><A href="http://home.sohu.com/">家居</A></LI>   
  107.   
  108. <LI style="MARGIN: 0px 1px"><BR></LI>   
  109.   
  110. <LI class=red><A href="http://yule.sohu.com/">娱乐</A></LI>   
  111.   
  112. <LI><A href="http://korea.yule.sohu.com/">韩娱</A></LI>   
  113.   
  114. <LI style="MARGIN: 0px 1px"><BR></LI>   
  115.   
  116. <LI class="fontArial b"><A href="http://tv.sohu.com/yule/">V</A></LI>   
  117.   
  118. <LI class=navEnd><A href="http://music.sohu.com/">音乐</A></LI></UL></DIV>   
  119.   
  120. <DIV class=nav3>   
  121.   
  122. <UL>   
  123.   
  124. <LI><A href="http://weather.news.sohu.com/">天气</A></LI>   
  125.   
  126. <LI style="MARGIN: 0px 1px"><BR></LI>   
  127.   
  128. <LI><A href="http://men.sohu.com/">男人</A></LI>   
  129.   
  130. <LI style="MARGIN: 0px 1px"><BR></LI>   
  131.   
  132. <LI class=red><A href="http://women.sohu.com/">女人</A></LI>   
  133.   
  134. <LI><A href="http://beauty.sohu.com/">美容</A></LI>   
  135.   
  136. <LI style="MARGIN: 0px 2px"><BR></LI>   
  137.   
  138. <LI><A href="http://baobao.sohu.com/">母婴</A></LI>   
  139.   
  140. <LI style="MARGIN: 0px 3px"><BR></LI>   
  141.   
  142. <LI><A href="http://health.sohu.com/">健康</A></LI>   
  143.   
  144. <LI style="MARGIN: 0px 2px"><BR></LI>   
  145.   
  146. <LI><A href="http://green.sohu.com/">绿色</A></LI>   
  147.   
  148. <LI style="MARGIN: 0px 3px"><BR></LI>   
  149.   
  150. <LI><A href="http://chihe.sohu.com/">吃喝</A></LI>   
  151.   
  152. <LI style="MARGIN: 0px 2px"><BR></LI>   
  153.   
  154. <LI><A href="http://citisp.sohu.com/">促销</A></LI>   
  155.   
  156. <LI style="MARGIN: 0px 3px"><BR></LI>   
  157.   
  158. <LI><A href="http://travel.sohu.com/">旅游</A></LI>   
  159.   
  160. <LI style="MARGIN: 0px 2px"><BR></LI>   
  161.   
  162. <LI><A href="http://golf.sports.sohu.com/">高尔夫</A></LI>   
  163.   
  164. <LI style="MARGIN: 0px 3px"><BR></LI>   
  165.   
  166. <LI class=red><A href="http://cul.sohu.com/">文化</A></LI>   
  167.   
  168. <LI style="MARGIN: 0px 2px"><BR></LI>   
  169.   
  170. <LI><A href="http://book.sohu.com/">读书</A></LI>   
  171.   
  172. <LI style="MARGIN: 0px 2px"><BR></LI>   
  173.   
  174. <LI><A href="http://vip.book.sohu.com/">原创</A></LI>   
  175.   
  176. <LI style="MARGIN: 0px 2px"><BR></LI>   
  177.   
  178. <LI><A href="http://learning.sohu.com/">教育</A></LI>   
  179.   
  180. <LI style="MARGIN: 0px 2px"><BR></LI>   
  181.   
  182. <LI><A href="http://goabroad.sohu.com/">出国</A></LI>   
  183.   
  184. <LI style="MARGIN: 0px 2px"><BR></LI>   
  185.   
  186. <LI class=red><A href="http://bschool.sohu.com/">商学院</A></LI>   
  187.   
  188. <LI style="MARGIN: 0px 2px"><BR></LI>   
  189.   
  190. <LI><A href="http://sports.sohu.com/cp/">彩票</A></LI>   
  191.   
  192. <LI style="MARGIN: 0px32px"><BR></LI>   
  193.   
  194. <LI><A href="http://astro.sohu.com/">星座</A></LI>   
  195.   
  196. <LI style="MARGIN: 0px 3px"><BR></LI>   
  197.   
  198. <LI><A href="http://sh.sohu.com/">上海</A></LI>   
  199.   
  200. <LI style="MARGIN: 0px 3px"><BR></LI>   
  201.   
  202. <LI class=navEnd><A href="http://gd.sohu.com/">广东</A></LI>   
  203.   
  204. </UL>   
  205.   
  206. </DIV>   
  207.   
  208. <!-- 导航:End -->   

这里面还有几个小技巧：

1：使用div+h标签为网站添加标题栏目，div中嵌套h标签组织网站结构，这样更有助于搜索引擎发现你地网站，因为搜索引擎是通过h标签组织网站的搜索结构的。

2：li中一般会出现p标签，a标签和span标签三种，其中a标签是为了添加链接，p+span是为了显示文字的。

3：对于网站的logo，使用h标签加上css中设置图片会更加合理，这样增加了搜索引擎发现率。

crazzy0727
关注
DIV与Table两种页面布局
Peter-H
01-31 2320
一、 TABLE方式 优点： 1、简单易用：比较适合入门级的用户操作，用户可直接利用Dreamweaver（以下简写为“DW”）工具栏插入表格，设置长宽、对齐方式、属性等。 2、所见即所得：当用户插入一个TABLE的时候就可立即看到效果。 3、可读性好：语句编写较为简便，主要代码就是、、等语句。 4.开发速度较快：新建网站时，从DW中直接拖入TABLE比编写DIV要快速很
table布局网页转换为div+CSS布局的转换软件
11-30
在网页设计领域，传统的`table`布局曾是构建网页结构的主要方式，但随着Web标准的发展，`div`结合`CSS`布局（层叠样式表）逐渐成为主流。`table`布局虽然简单易用，但在复杂性和可维护性上存在诸多问题，如不易控制...
网页布局之div与table的比较
lengye7的博客
09-12 948
转载自--http://www.cnblogs.com/lovebear/archive/2012/04/18/2456081.html div与table的区别 1：速度和加载方式方面的区别    div 和 table 的差异不是速度，而是加载方式，速度只能是指网络速度，如果速度足够快，是没有差异的： div 的加载方式是即读即加载，遇到 没有遇到 的时候一样加载
网页布局之Div vs Table （1）
李守宏
03-13 4168
关于网页布局，大体上可以分为两种，一种是使用table布局，另一种使用div布局，很多人说现在主流的网页布局是div+css。那么div和table布局究竟有那些联系和区别呢？我们又该如何进行网页布局呢？ 下面对这两种网页布局进行一些探讨。看了一些大公司的网页布局，其中腾讯，网易，中国移动等公司都使用的是div进行的布局。而工商银行则使用table进行布局。 div和table布局各自的优缺点：1
html中表格布局还是div布局,Table布局 VS Div+CSS布局，选哪个？
weixin_36235398的博客
06-10 851
Table布局 和 Div+CSS布局的争论，过了7-8年了，今天看到一篇文章《为什么我们不建议用Table布局》，又想发表下自己的见解，供初学《为什么我们不建议用Table布局》节选：Table要比其它html标记占更多的字节。(延迟下载时间，占用服务器更多的流量资源。)Tablle会阻挡浏览器渲染引擎的渲染顺序。(会延迟页面的生成速度，让用户等待更久的时间。)Table里显示图片时需要你把单个...
DIV与TABLE的HTML布局
个人学习笔记库，一篇一篇记录成长的足迹
09-21 1495
DIV布局 div标签是块级元素，本身没有意义，用于其他元素的容器，由于div自带折行效果，因此div默认是列排列 // 两个div默认列排列 <html> <head> <meta charset="utf-8" /> <title></title> </head> <body> <div style="background-color: black; width: 100px ; height
HTML布局-div，span，table
2401_87403881的博客
12-06 1284
版权所有@2024 Joker.Z版权所有@2024 Joker.Z菜单栏菜单栏
div框架布局(div做网页框架)
计算机毕业论文源码，学生个人网页制作html源码。贴近用户做网络推广和互联网优化。
02-25 1839
div怎么布局 table布局是简单，但现在的页面都要符合W3C标准，所以都改成css+div；你如果想学css+div,；你到这个网址上去看看，有很详细的教程，我没事就上来看看的 就说你说的问题，你写了一个div他没有显示在左边，而是在上边了，解决办法很简单，你要分别写两个div，一个是居左的，一个是居右的， 方法...
五种前端布局之table布局
热门推荐
qq_39877681的博客
11-18 2万+
前端基本布局五种前端布局table布局float布局 五种前端布局 table布局、float布局、absolute布局、flexbox布局、grid布局 table布局 父级容器—display: table 子级容器—display:table-cell (1) 空间平均划分：子级容器默认是自动平分宽度沾满父级容器； <body> <div class="box"> <div class="left"></div>
HTML5布局—div布局和table布局
qq_40171918的博客
06-07 5344
1.使用 &lt;div&gt; 元素的 HTML 布局注释：&lt;div&gt; 元素常用作布局工具，因为能够轻松地通过 CSS 对其进行定位。这个例子使用了四个 &lt;div&gt; 元素来创建多列布局：&lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF
html5 div布局与table布局详解
01-19
本文实例为大家解析了html5 div布局与table布局，供大家参考，具体内容如下 div布局：html+css实现简单布局。 #container中height不能写成百分数，必须为具体高度。 <!DOCTYPE html> <html> <head lang=...
DIV+CSS 网页布局心得
12-03
相比于传统的TABLE布局，DIV+CSS更符合现代网页设计的需求，使得网页结构与样式分离，提升了网页加载速度和搜索引擎优化（SEO）效果。 首先，理解并掌握DIV+CSS的关键在于转变思维方式。如果你之前习惯于使用TABLE...
用div实现像table一样的布局方法
10-30
在网页设计中，有时我们需要创建一个布局，使得多个div元素能像表格（table）一样排列，保持等高并可以灵活地调整内容对齐方式。在HTML中，`<table>`元素是最直接的实现方式，但因为表格布局在某些场景下可能会导致...
div+css table布局实现代码
09-27
【div+css table布局实现代码】是一个关于使用CSS模拟HTML表格布局的技术，目的是为了在不使用`<table>`标签的情况下，实现多个容器等高并排显示的效果。这种布局方式常见于网页设计，允许内容在各自容器中居中或...
潮白、北运、蓟运河水系流经空间范围shp矢量数据.rar
最新发布
08-12
潮白、北运、蓟运河水系流经空间范围shp矢量数据
浪漫网页版女友告白与纪念日特效
08-12
资源下载链接为： https://pan.quark.cn/s/9648a1f24758 这个HTML文件是一个专门设计的网页，适合在告白或纪念日这样的特殊时刻送给女朋友，给她带来惊喜。它通过HTML技术，将普通文字转化为富有情感和创意的表达方式，让数字媒体也能传递深情。HTML（HyperText Markup Language）是构建网页的基础语言，通过标签描述网页结构和内容，让浏览器正确展示页面。在这个特效网页中，开发者可能使用了HTML5的新特性，比如音频、视频、Canvas画布或WebGL图形，来提升视觉效果和交互体验。 原本这个文件可能是基于ASP.NET技术构建的，其扩展名是“.aspx”。ASP.NET是微软开发的一个服务器端Web应用程序框架，支持多种编程语言（如C#或VB.NET）来编写动态网页。但为了在本地直接运行，不依赖服务器，开发者将其转换为纯静态的HTML格式，只需浏览器即可打开查看。 在使用这个HTML特效页时，建议使用Internet Explorer（IE）浏览器，因为一些老的或特定的网页特效可能只在IE上表现正常，尤其是那些依赖ActiveX控件或IE特有功能的页面。不过，由于IE逐渐被淘汰，现代网页可能不再对其进行优化，因此在其他现代浏览器上运行可能会出现问题。 压缩包内的文件“yangyisen0713-7561403-biaobai(html版本)_1598430618”是经过压缩的HTML文件，可能包含图片、CSS样式表和JavaScript脚本等资源。用户需要先解压，然后在浏览器中打开HTML文件，就能看到预设的告白或纪念日特效。 这个项目展示了HTML作为动态和互动内容载体的强大能力，也提醒我们，尽管技术在进步，但有时复古的方式（如使用IE浏览器）仍能唤起怀旧之情。在准备类似的个性化礼物时，掌握基本的HTML和网页制作技巧非常
XILINX FPGA网络堆栈中TCP&UDP卸载引擎的技术解析及应用 · 数据包处理 2025版
08-12
XILINX FPGA网络堆栈中的TCP和UDP卸载引擎。首先阐述了FPGA在网络数据处理中的重要性和应用场景，接着具体分析了TCP和UDP卸载引擎的工作原理及其代码实现，包括状态机、缓冲区管理和校验和计算等功能模块。最后，通过对性能的评估展示了FPGA相较于传统CPU的优势，强调了其在提升系统吞吐量和响应速度方面的重要作用。 适合人群：对FPGA技术和网络协议有一定了解的研发人员和技术爱好者。 使用场景及目标：适用于需要深入了解FPGA网络堆栈内部机制的研究人员，以及希望优化网络数据处理性能的工程师。 其他说明：本文不仅提供了理论分析，还涉及具体的代码实现细节，有助于读者全面掌握TCP和UDP卸载引擎的设计与优化方法。
嵌入式系统中Md500E算法的C语言实现及其关键模块解析 - 任务调度
08-12
内容概要：本文深入探讨了Md500E算法的完整C语言实现，涵盖多个重要模块。首先介绍了硬件抽象层（HAL）中GPIO翻转操作的独特实现方法，避免传统异或方式带来的硬件响应延迟问题。接着详细解析了通信协议的状态机设计，利用枚举类型和静态变量确保数据传输的可靠性。内存管理方面采用简单的线性分配策略，有效解决嵌入式环境中常见的内存碎片问题。实时任务调度部分展示了基于时间片的协作式调度机制，巧妙地处理了32位计时器溢出问题。此外，文中还涉及一些实用的宏定义技巧以及精确的延时函数实现。 适合人群：具有一定C语言基础并希望深入了解嵌入式系统开发的技术人员。 使用场景及目标：适用于嵌入式系统的开发者，特别是那些需要理解和优化低级别硬件接口、通信协议、内存管理和任务调度的人群。目标是帮助读者掌握高效简洁的编码技巧，提高系统的稳定性和性能。 阅读建议：由于涉及到较多底层细节和技术点，建议读者结合实际项目进行对比学习，同时可以尝试将文中的代码片段移植到自己的开发环境中进行测试和验证。
网页布局之DIV+CSS核心知识点解析
DIV+CSS的组合为网页设计师提供了更高的灵活性和强大的布局控制能力。以下为DIV+CSS网页布局的基础知识。 ### DIV标签 1. **含义**：DIV是一个块级元素，常用于对HTML文档进行分区，形成独立的布局区域。 2. **...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值