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

相关文章

来自专栏Java后端技术

CSS应用给网页元素的几种方式总结

  直接在HTML标签中使用style进行定义样式。如:<p style="color:red;">这里是红色文字</p>.

381
来自专栏腾讯云商业智能分析团队的专栏

普通表格常见设置

表格组件是以表格的形式展现数据的载体,表格可以绑定任意一查询的多个字段。根据是否给字段使用统计函数来区分,可划分为细节数据表格和汇总表格。

971
来自专栏分享达人秀

学会使用CardView,简单实现卡片式布局效果

还记得我们一共学过了多少UI控件了吗?都掌握的怎么样啊 安卓中一些常用控件学习得差不多了,今天再来学习一个新的控件CardView,在实际开发中...

2467
来自专栏React Native开发圈

React Native悬浮按钮组件

因为用到了react-native-vector-icons图标组件,需要做下link。如果你项目中已经使用了react-native-vector-icons...

652
来自专栏coding

v-if与v-show实例

1254
来自专栏Web 开发

getBoundingClientRect

今天fix一个拖拽库的IE8bug,发现DOM元素有一个getBoundingClientRect的方法。

930
来自专栏流柯技术学院

selenium切换窗口后定位元素出现问题的解决方案

在做UI自动化的过程中,有时需要由一个窗口跳转到另一个窗口,这时直接去定位页面元素,可能会出现问题,这时,我们需要将driver与新的窗口进行绑定。

1692
来自专栏向治洪

检查app的activity是否在当前

APP开发中经常会遇到这种需求,需要检查当前的APP是不是可见的,比如,如果是可见的就维持一个socket长连接,如果切到后台不可见了,就断开这个连接。And...

1809
来自专栏无所事事者爱嘲笑

不定高元素的高度transition动画实现

1734
来自专栏Material Design组件

Material Design — 底部导航(Bottom Navigation)

3609

扫码关注云+社区