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

  我们都知道很多的内容编辑器(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>

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏向治洪

React-Native组件之 TabBarIOS和TabBarIOS.Item

TabBarIOS 组件简介 目前的APP内,大部分都是选项与选项之间切换,比如:微信、微博、QQ空间…,在iOS中,我们可以通过TabItem类进行实现,那么...

356100
来自专栏LeeCen

UIScrollView控件实现图片轮播

12010
来自专栏做全栈攻城狮

.Net程序员快速学习安卓开发-布局和点击事件的写法

我们新建一个layout布局文件时,默认就是相对布局。相对布局是相对于非相对布局来说的。顾名思义,相对布局就是 相对于某些控件位置的布局。所有的控件都是相对位置...

14440
来自专栏知道一点点

bootstrap快速入门笔记(七)-表格,表单

2,条纹表格:通过 .table-striped 类可以给 <tbody> 之内的每一行增加斑马条纹样式。

27530
来自专栏云端架构

【云端架构】前端CSS3技巧:fit-content水平居中

当我们让一个模块水平居中首先想到的肯定是margin:0 auto;有木有?那么今天给大家介绍一个fit-content属性,不知道有没有同学用过,如果用过那么...

457110
来自专栏Felix的技术分享

绘制可自由伸缩的输入框背景

23160
来自专栏杨龙飞前端

checkbox的常见问题

23950
来自专栏别先生

HTML入门的简单学习

1:HTML简介     1.1:HTML(Haper Text Markup language):超文本标记语言     超文本就是指页面内可以包含图片,链接...

565100
来自专栏闻道于事

其他标签及框架集

今天学习了其他一些标签以及框架集。 <marquee> ... </marquee> 1 <marquee direction="down" heigh...

32670
来自专栏性能与架构

微信小程序示例 - 交互组件

消息提示框 toast ? 代码结构 <toast bindchange="..."> 消息内容 </toast> 属性 duration - 消息显示...

46280

扫码关注云+社区

领取腾讯云代金券