如何用<dl>标签做表格而不用table标签
2016-05-24 11:17
323 查看
我们都知道很多的内容编辑器(TinyMCE编辑器、fck)都有插入表格功能,快速方便,但是这些表格用到的<table>标签,可以查看html源代码就能发现,table标签对搜索引擎不是很友好,table太多话可能无法被SE收录,有没办法用其他方法来实现绘制表格呢?比如用<dl>标签?
<dl> 标签是定义列表(definition list),结合<dt>(定义列表中的项目)和<dd>(描述列表中的项目),并将它们设置为同行显示就能实现表格的效果,如下图所示
定义一下css样式,float:left; 为同行显示,如果文字太多,可以设置dd的高度height,避免表格边框参差不齐
html代码如下
<dl> 标签是定义列表(definition list),结合<dt>(定义列表中的项目)和<dd>(描述列表中的项目),并将它们设置为同行显示就能实现表格的效果,如下图所示
定义一下css样式,float:left; 为同行显示,如果文字太多,可以设置dd的高度height,避免表格边框参差不齐
<style> dl{float:left;margin: 0px auto;border:1px solid #ccc;width:100px;} dt{ font-weight:bold; color:blue; height:1.5em; padding-left:5px;} dd{margin:auto;border-top:1px solid #ccc; padding-left:5px;} </style>
html代码如下
<body> <dl id="first"> <dt>menu1</dt> <dd>text11</dd> <dd>text12</dd> <dd>text13</dd> <dd>text14</dd> </dl> <dl id="second"> <dt>menu2</dt> <dd>text21</dd> <dd>text22</dd> <dd>text23</dd> <dd>text24</dd> </dl> <dl id="third"> <dt>menu3</dt> <dd>text31</dd> <dd>text32</dd> <dd>text33</dd> <dd>text34</dd> </dl> <dl id="fourth"> <dt>menu4</dt> <dd>text41</dd> <dd>text42</dd> <dd>text43</dd> <dd>text44</dd> </dl> </body>
相关文章推荐
- Spring MVC学习笔记——Controller接口
- 经典-输出规律的数字序列
- 关于并发编程的疑问解析
- Struts2_Action的配置
- apache配置伪静态实例 重写技术
- Linux磁盘操作工具归纳……转载的,也不知道出处
- RecyclerView滑动停止加载图片,空闲时间加载图片
- ROS_Kinetic_09 ROS基础内容(四)
- android 用户注册或登录时判断输入的是否是正确格式的电话号码
- ROS_Kinetic_09 ROS基础内容(四)
- ROS_Kinetic_09 ROS基础内容(四)
- 手把手教你使用Git
- OpenGLES---OpenGL运行原理
- [疯狂Java]集合:专门用于聚集操作的一次性集合——Stream(流)
- linux 下连接mysql服务器
- 数据归一化算法
- 日常开发——Android请求自定义证书的https
- border-image-slice
- Oracle的时间差写法
- 最小二乘法