我们都知道很多的内容编辑器(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. [LeetCode] 75. Sort Colors 颜色排序

    Given an array with n objects colored red, white or blue, sort them in-place so that objects of the ...

  2. 第04组 Alpha冲刺（3/6）

    队名:new game 组长博客:戳 作业博客:戳 组员情况 鲍子涵(队长) 燃尽图 过去两天完成了哪些任务 才两天,也就是实现一些功能而已 复习 接下来的计划 实现更多的功能 为下周的比赛准备 还剩 ...

  3. SpringBoot第十四篇：统一异常处理

    作者:追梦1819 原文:https://www.cnblogs.com/yanfei1819/p/10984081.html 版权声明:本文为博主原创文章,转载请附上博文链接! 引言   本文将谈论 ...

  4. Loj #2570. 「ZJOI2017」线段树

    Loj #2570. 「ZJOI2017」线段树 题目描述 线段树是九条可怜很喜欢的一个数据结构,它拥有着简单的结构.优秀的复杂度与强大的功能,因此可怜曾经花了很长时间研究线段树的一些性质. 最近可怜 ...

  5. Unity Shader 屏幕后效果——Bloom外发光

    Bloom的原理很简单,主要是提取渲染图像中的亮部区域,并对亮部区域进行模糊处理,再与原始图像混合而成. 一般对亮部进行模糊处理的部分采用高斯模糊,关于高斯模糊,详见之前的另一篇博客: https:/ ...

  6. SWIG 3 中文手册——3. Windows 上使用 SWIG

    目录 3 Windows 上使用 SWIG 后续章节 3 Windows 上使用 SWIG 暂时略过. 后续章节 <4. 脚本语言>

  7. windows 的一些快捷键

    https://www.zhihu.com/question/276786944/answer/698967240 1.新建文件夹 Ctrl  + Shift + N        或者鼠标右键 然后 ...

  8. 用cp命令拷贝文件，源目录后带不带斜杠的区别

    当我还是Linux超级傻白的时候,需要拷贝一个很大的数据集,然后再拷贝源文件夹的后面跟了一个前倾斜杠,然后就发现居然拷贝的是整个文件夹里的东西,而不是文件夹本身.事儿倒是不大,我重新建一个文件夹,把这 ...

  9. 【07】Kubernets：资源清单（控制器 - DaemonSet）

    写在前面的话 前面讲解了 Pod / ReplicaSet / Deployment 的资源清单,我们这里谈一下 DaemonSet 的资源清单. 之前说过,DaemonSet 控制器能够保证资源在每 ...

  10. 【ELK】elasticsearch使用bulk 导入批量的数据集文件报错：Validation Failed: 1: no requests added

    执行命令如下: curl -XPOST http://192.168.6.16:9200/my_new_index/user/_bulk?pretty --data-binary @/cjf/es/e ...