如何用<dl>标签做表格而不用table标签

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

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

  <dl> 标签是定义列表(definition list),结合<dt>(定义列表中的项目)和<dd>(描述列表中的项目),并将它们设置为同行显示就能实现表格的效果,如下图所示

用dl标签制作表格

  定义一下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>标签做表格收录图

目录
相关文章
|
16天前
|
敏捷开发
【sgCreateTableColumn】自定义小工具:敏捷开发→自动化生成表格列html代码(表格列生成工具)[基于el-table-column]
【sgCreateTableColumn】自定义小工具:敏捷开发→自动化生成表格列html代码(表格列生成工具)[基于el-table-column]
|
1月前
|
前端开发 JavaScript
基础标签应用
基础标签应用
13 2
|
7月前
|
前端开发
前端笔记,table标签中td宽度不受控制的坑
前端笔记,table标签中td宽度不受控制的坑
|
7月前
|
存储 前端开发 API
标签(1)(详解)
标签(1)(详解)
element table表格表头动态渲染效果demo(整理)
element table表格表头动态渲染效果demo(整理)
|
8月前
表格标签
表格标签
22 0
|
10月前
|
存储 API
【ElementUI】Table表格动态合并
【ElementUI】Table表格动态合并
144 0
uiu
|
移动开发 前端开发 数据安全/隐私保护
HTML 基础【2】 -- 表格标签 / 表单标签
HTML 基础【2】 -- 表格标签 / 表单标签
uiu
113 0
HTML 基础【2】 -- 表格标签 / 表单标签
uiu
|
前端开发 UED 容器
HTML 基础【1】 -- 入门介绍 / 基本结构 / 块级标签 / 行内标签(下)
HTML 基础【1】 -- 入门介绍 / 基本结构 / 块级标签 / 行内标签(下)
uiu
111 0
HTML 基础【1】 -- 入门介绍 / 基本结构 / 块级标签 / 行内标签(下)
uiu
|
XML 移动开发 搜索推荐
HTML 基础【1】 -- 入门介绍 / 基本结构 / 块级标签 / 行内标签(上)
HTML 基础【1】 -- 入门介绍 / 基本结构 / 块级标签 / 行内标签(上)
uiu
136 0
HTML 基础【1】 -- 入门介绍 / 基本结构 / 块级标签 / 行内标签(上)

热门文章

最新文章