我们都知道很多的内容编辑器(TinyMCE编辑器、fck)都有插入表格功能，快速方便，但是这些表格用到的<table>标签，可以查看html源代码就能发现，table标签对搜索引擎不是很友好，table太多话可能无法被SE收录，有没办法用其他方法来实现绘制表格呢？比如用<dl>标签？

　　<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>

如何用<dl>标签做表格而不用table标签的更多相关文章

  1. table标签用法

    <table>标签 HTML中表格由 <table> 标签来定义. 每个表格均有若干行(由 <tr> 标签定义),每行被分割为若干单元格(由 <td> ...

  2. 如何用jstl的select标签做二级联动下拉列表框？？

    下拉列表框的多级联动早就会了.但是用jstl的select标签做下拉列表框的做二级联动的时候还是遇到了些问题.主要问题在用Ajax查询到的数据如何拼成下拉选项的时候.其实很简单,但我还是折腾了好久.所 ...

  3. 在html中做表格以及给表格设置高宽字体居中和表格线的粗细

    今天学习了如何用HTML在网页上做表格,对于我这种横列部分的属实有点麻烦,不过在看着表格合并单过格的时候我把整个表格看做代码就容易多了. 对于今天的作业让我学习了更多的代码,对于代码的应用希望更加熟练 ...

  4. Day46（列表标签，表格标签，表单标签，css的引入方式，css选择器）

    一.列表标签 列表标签分为三种. 1.无序列表<ul>,无序列表中的每一项是<li> 英文单词解释如下: ul:unordered list,“无序列表”的意思. li:lis ...

  5. HTML基础（一）——一般标签、常用标签和表格

    第一部分  HTML <html>    --开始标签 <head> 网页上的控制信息 <title>页面标题</title> </head> ...

  6. ol,ul,dl,table标签的基本语法

    ol,ul,dl,table标签的基本语法 有序列表: 无序列表:                                  自定义列表: <ol> <ul> < ...

  7. dl标签和table标签

    dl标签定义了一个定义列表 <html> <body> <h2>一个定义列表:</h2> <dl>   <dt>计算机</ ...

  8. HTML核心标签之表格标签(一)

    表格的基本语法: <body> <table> <tr><td></td><td></td></tr> ...

  9. 用（bootstrap）Handsontable做表格，手动实现数据排序

    商品graph帐票时,用(bootstrap)Handsontable做表格,手动实现数据排序待解决的问题: 若使用控件本身的排序,必须指定colHead,colHead不能被copy,若想表头被co ...

随机推荐

  1. BS项目启动任意EXE文件或者CS项目

    1. 基于注册表启动exe程序 1. 桌面新建注册表执行文件:protocal.reg 2. 任意文本编辑器打开该文件 Windows Registry Editor Version 5.00 [HK ...

  2. C# HTTP系列1 HttpWebRequest类

    系列目录     [已更新最新开发文章,点击查看详细] .NET Framework 中 System.Net 命名空间下提供了 HttpWebRequest 和 HttpWebResponse 2个 ...

  3. 微信企业号消息接口PHP SDK

    微信企业号消息接口PHP SDK及Demo <?php /* 方倍工作室 http://www.fangbei.org/ CopyRight 2015 All Rights Reserved * ...

  4. springboot mybatis使注解和xml两种方式同时生效

    声明:该博客参考了:https://www.jianshu.com/p/53762ac6d31c 如果上面这个博客中的内容已经解决了你的问题,那就不用往下看了,如何按照上面的配置一直报这个异常: or ...

  5. 应用Redis分布式锁解决重复通知的问题

    研究背景: 这几天被支付宝充值后通知所产生的重复处理问题搞得焦头烂额, 一周连续发生两次重复充钱的杯具, 发事故邮件发到想吐..为了挽回程序员的尊严, 我用了Redis的锁机制. 事故场景: 支付宝下 ...

  6. 02、策略模式(Strategy)

    一.概念: 策略是为达到某一目的而采取的手段或方法,策略模式的本质是目标与手段的分离, 手段不同而最终达成的目标一致.客户只关心目标而不在意具体的实现方法, 实现方法要根据具体的环境因素而变化. 二. ...

  7. “sgen.exe”未能运行。文件名或扩展名太长

    问题 创建项目后无法运行 严重性 代码 说明 项目 文件 行 禁止显示状态 错误 MSB6003 指定的任务可执行文件"sgen.exe"未能运行.System.Component ...

  8. ActiveMq C# 消息特性：延迟和定时消息投递

    ActiveMQ from version 5.4 has an optional persistent scheduler built into the ActiveMQ message broke ...

  9. Macbook中VMWare的Centos7虚拟机配置静态IP并允许上网的配置方法

    一.检查Macbook本身的配置 1.打开[系统偏好设置]-[网络]- 选中[Wi-Fi]项(如果您是WIFI上网请选择此项)- 点右侧[高级] 选择[TCP/IP]选项卡,记录好[子网掩码].[路由 ...

  10. Python关于多继承

    大部分面向对象的编程语言(除了C++)都只支持单继承,而不支持多继承,为什么呢?因为多继承不仅增加编程复杂度,而且容易导致莫名其妙的错误. Python虽然语法上支持多继承,但是却不推荐使用多继承,而 ...