如何用<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 条评论
登录 后参与评论

相关文章

来自专栏流柯技术学院

selenium截取具体元素图片(python版)

element = driver.find_element_by_id("xx")

431
来自专栏杨逸轩 ' sBlog

利用JS生成当前页面二维码,简单实用

1866
来自专栏黄Java的地盘

CSS transition delay简介与进阶应用

我相信这是一个很常见的一个需求,有很多种方式能够实现,但是,其实现方式的原理各不相同,也有利有弊。

342
来自专栏青青天空树

认识基本的mfc控件

  几乎可以在每个windows程序中都看到按钮、复选框、文本框以及下拉列表等等,这些都是控件。而且很多常用的控件已经内置到操作系统当中了,在Visual C+...

542
来自专栏非著名程序员

Android字体大小怎么自适应不同分辨率?

今天有人问我,android系统不同分辨率,不同大小的手机,字体大小怎么去适应呢?其实字体的适应和图片的适应是一个道理的。 一、 原理如下: 假设需要适应320...

2068
来自专栏源哥的专栏

HTML中实现右键菜单功能

我们使用的应用系统很多都有右键菜单功能。但是在网页上面,点击右键一般显示的却是IE默认的右键菜单,那么我们如何实现自己的右键菜单呢?下面将讲解右键菜单功能的实现...

593
来自专栏专业duilib使用+业余界面开发

duilib中获取的控件的位置或者大小不对的可能的原因

1584
来自专栏快乐八哥

自定义的html radio button的样式

设计要求效果如下: ? <!-- .csharpcode, .csharpcode pre { font-size: small; color: black...

1616
来自专栏练小习的专栏

css实现未知宽度的正方形需求

今天群里有哥们问了一下,百分比宽度的正方形如何用css实现。其实就是不定宽的正方形如何用css实现。 第一个方法利用图片的等比例缩放,用base64写一个1*1...

1966
来自专栏向治洪

React-Native组件之 TabBarIOS和TabBarIOS.Item

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

21410

扫描关注云+社区