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. 【面经】【转】C程序的内存布局

    一个C语言程序一直以来都是由以下5个段组成: 1.代码段(text segmrnt):存放CPU执行的机器指令,通常情况下,代码段是可共享的,使其可共享的目的是对于频繁被执行的程序,只需要在没存中有有 ...

  2. BZOJ4112 : [Wf2015]Pipe Stream

    枚举答案,考虑将速度区间等长地划分成若干个小区间. 设$n_i$表示$i$次敲击能得到的区间数,$v_i$表示$i$次敲击之后答案落在$[v1,v_i]$之间,则$n_0=1,v_0=v2$. 因为对 ...

  3. checkbox属性checked="checked"通过js已设置，但是不勾选

    1.通过 attr('checked','checked') 来设置checkbox时,重复点击,虽然checked属性设置正确,但是checkbox没有被勾选 ,如下代码:(代码是全选功能) $(' ...

  4. 深度神经网络结构以及Pre-Training的理解

    Logistic回归.传统多层神经网络 1.1 线性回归.线性神经网络.Logistic/Softmax回归 线性回归是用于数据拟合的常规手段,其任务是优化目标函数:$h(\theta )=\thet ...

  5. ajaxFileUpload + lua-resty-upload 上传文件

    ajaxFileUpload下载地址 地址:http://pan.baidu.com/s/1mgJypz6 html页面 <!DOCTYPE HTML PUBLIC "-//W3C// ...

  6. URAL 1223. Chernobyl’ Eagle on a Roof

    题目链接 以前做过的一题,URAL数据强点,优化了一下. #include <iostream> #include <cstdio> #include <cstring& ...

  7. 硬盘分区工具gparted使用

    一.介绍 GParted是一款linux下的功能非常强大的分区工具,和windows下的‘分区魔术师’类似,操作和显示上也很相似.GParted可以方便的创建.删除分区,也可以调整分区的大小和移动分区 ...

  8. IOS 蓝牙相关-连接外设的代码实现(2)

    我们具体说明一下中心模式的应用场景.主设备(手机去扫描连接外设,发现外设服务和属性,操作服务和属性的应用.一般来说,外设(蓝牙设备,比如智能手环之类的东西), 会由硬件工程师开发好,并定义好设备提供的 ...

  9. Eclipse 使用maven创建Dynamic Web Project

    今天看到spring的官网首页已经没有下载连接了,建议使用maven构建spring项目.虽然maven已经不是新技术,但是这个我还没用过,谷歌走起! 通常创建项目都是用Eclipse,前几年还是My ...

  10. 三、图像移动《苹果iOS实例编程入门教程》

    该app为应用的功能为动态移动动画 现版本 SDK 8.4 Xcode 运行Xcode 选择 Create a new Xcode project ->Single View Applicati ...