table标签制作表格代码繁琐，且不方便后期代码维护。

li标签加上css的浮动样式可以制作多种样式的表格。

代码如下：

<ul id="ttttt" style="width:404px;text-align:center;line-height:30px;border-left:1px solid #000;border-top:1px solid #000;">
 <li style="width:403px;height:30px;float:left;text-align:center;border-right:1px solid #000;border-bottom:1px solid #000;">这是表格</li>
  <li style="width:100px;height:30px;float:left;text-align:center;border-right:1px solid #000;border-bottom:1px solid #000;">a</li>
  <li style="width:100px;height:30px;float:left;text-align:center;border-right:1px solid #000;border-bottom:1px solid #000;">a</li>
  <li style="width:100px;height:30px;float:left;text-align:center;border-right:1px solid #000;border-bottom:1px solid #000;">a</li>
  <li style="width:100px;height:30px;float:left;text-align:center;border-right:1px solid #000;border-bottom:1px solid #000;">a</li>
  <li style="width:100px;height:30px;float:left;text-align:center;border-right:1px solid #000;border-bottom:1px solid #000;">a</li>
  <li style="width:100px;height:30px;float:left;text-align:center;border-right:1px solid #000;border-bottom:1px solid #000;">a</li>
  <li style="width:100px;height:30px;float:left;text-align:center;border-right:1px solid #000;border-bottom:1px solid #000;">a</li>
  <li style="width:100px;height:30px;float:left;text-align:center;border-right:1px solid #000;border-bottom:1px solid #000;">a</li>
 </ul>

效果如下：

ul+li标签制作表格的更多相关文章

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

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

  2. ul li 标签

    去除制表符: li{ list-style:none; } ul{ /* 靠左*/ padding-left: 5px; }

  3. html中去除ul,li标签的样式列表标签的点？

  4. 为什么要使用ul li布局网站导航条？使用ul li布局网站网页导航必要性

    会布局的都知道网站导航条布局非常重要,可能一个导航条最终布局效果有时可以使用ul li列表标签布局,有时可以不用ul li布局,而是直接一个div盒子里直接放锚文本超链接的栏目名称,也能实现,看下图. ...

  5. 使用CSS把ul,li制作成表格

    查看效果:http://hovertree.com/texiao/css/7.htm 具体实现请看样式部分. 完整代码: <!DOCTYPE html> <html> < ...

  6. 对Ul下的li标签执行点击事件——如何获取你所点击的标签

    问题所来:做项目时,一般的数据都是用循环动态加载出来的,结构都是一样的,只是绑定的值不同,如何对相同的标签做处理的问题就来了. 例如:点谁就显示谁的数值 <ul > <li id=& ...

  7. html-2, a img ul li ol dl dt dd 标签与列表标签的简单使用

    <!-- a:  a{ /*清除a标签的下划线*/ text-decoration: none; }  (1)超链接 href 超链接的地址 target: _self 默认 在当前中打开链接地 ...

  8. Jquery和JS获取ul中li标签（转）

    js 获取元素下面所有的li var content=document.getElementById("content"); var items=content.getElemen ...

  9. Jquery和JS获取ul中li标签

    js 获取元素下面所有的li var content=document.getElementById("content"); var items=content.getElemen ...

随机推荐

  1. DOM--3 DOM核心和DOM2 HTML(1)

    网页是一种结构化的文档,使用一组预定义的XML和HTML标签进行标记:当浏览器接受到网页文档时,会根据文档类型和关联的样式表对其进行解析,然后以可视化形式显示在屏幕上. DOM是一组用来描述脚本怎样与 ...

  2. 01_Java语言基础部分(数据类型与表达式、流程控制语句、数组与方法)

    1. Java语言主要由5中符号组成 标识符:数字.字母.美元符.下划线(注意不能数字开头) 关键字(被Java赋予特殊意义的单词,注意所有关键字都是小写):   goto和const保留了它们,但是 ...

  3. Gym 100814C Connecting Graph 并查集+LCA

    Description standard input/output Statements Alex is known to be very clever, but Walter does not be ...

  4. html5大纲

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  5. POJ3613 Cow Relays（矩阵快速幂）

    题目大概要求从起点到终点恰好经过k条边的最短路. 离散数学告诉我们邻接矩阵的k次幂就能得出恰好经过k条路的信息,比如POJ2778. 这题也一样,矩阵的幂运算定义成min,而min满足结合律,所以可以 ...

  6. Python3 安装bulitwith 和urllib2包

    # 背景 最近在看PACKT的Python Web Scraping, 书上用的是Python 2.X,但是自己电脑上却用的Python 3.4. 版本升级没什么好说的,只是很多的工具包并没有跟着升级 ...

  7. ACM: 限时训练题解-Runtime Error-二分查找

    Runtime Error   Bahosain was trying to solve this simple problem, but he got a Runtime Error on one ...

  8. [深入浅出WP8.1(Runtime)]Socket编程之UDP协议

    13.3 Socket编程之UDP协议 UDP协议和TCP协议都是Socket编程的协议,但是与TCP协议不同,UDP协议并不提供超时重传,出错重传等功能,也就是说其是不可靠的协议.UDP适用于一次只 ...

  9. 严重: Error configuring application listener of class org.springframework.web.context.ContextLoaderListener

    严重: Error configuring application listener of class org.springframework.web.context.ContextLoaderLis ...

  10. AE唯一值符号化的流程以及过程

    唯一值符号化的流程以及过程(转)   一.获取ServerStyle库中的符号       Style符号库在ArcGIS Engine开发中对应的是ServerStyle符号库,可以通过专门的转换程 ...