如何用<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>标签做表格收录图

目录
相关文章
|
JavaScript 前端开发
Vue antdv 定制主题配置(高低版本配置问题)
Vue antdv 定制主题配置(高低版本配置问题)
597 0
|
9月前
|
数据采集 存储 机器学习/深度学习
最新AI大模型数据集解决方案:分享两种AI高质量代码数据集生产方案
本文分享了两种构建高质量AI代码数据集的解决方案。第一种是传统方式,结合动态住宅代理与手动处理,通过分页读取和数据清洗生成结构化数据;第二种是利用Web Scraper API工具,实现自定义配置、自动化抓取及云端存储。两种方法各具优势,适合不同需求和技术水平的团队。同时,文章还提供了专属优惠福利,助力提升数据采集效率,为AI大模型训练提供支持。
317 5
最新AI大模型数据集解决方案:分享两种AI高质量代码数据集生产方案
|
计算机视觉
【CV大模型SAM(Segment-Anything)】如何保存分割后的对象mask?并提取mask对应的图片区域?
【CV大模型SAM(Segment-Anything)】如何保存分割后的对象mask?并提取mask对应的图片区域?
【CV大模型SAM(Segment-Anything)】如何保存分割后的对象mask?并提取mask对应的图片区域?
|
弹性计算 运维 Linux
运维工程师必备的摸鱼神器:阿里云智能助手OS Copilot
OS Copilot 概述与体验评测摘要 阿里云的OS Copilot是一款基于大模型的智能操作系统助手,作为高级运维工程师,体验者发现它在系统诊断和性能优化上尤其有用,简化了如重置ECS密码和安全组配置等任务,提升了工作效率。 OS Copilot的易用性和安全性得到肯定,操作手册详细且交互性强,减少了用户在不同页面间切换的需要。在辅助编程方面,它能帮助非专业开发者编写和理解代码,对运维工作中的开发技能补充有很大帮助。与GitHub Copilot等产品相比,OS Copilot的独特之处在于结合了Linux操作的支持。
566 3
运维工程师必备的摸鱼神器:阿里云智能助手OS Copilot
|
存储 Ubuntu Linux
VMware虚拟机配置Linux Ubuntu操作系统
本文介绍基于VMware Workstation Pro虚拟机软件,配置Linux Ubuntu操作系统环境的方法~
786 1
VMware虚拟机配置Linux Ubuntu操作系统
|
安全 JavaScript PHP
URL百分号编码
URL百分号编码
|
SQL 数据库
SQL中CASE WHEN THEN ELSE END的用法详解
SQL中CASE WHEN THEN ELSE END的用法详解
3431 2
|
Python
Python3下requests库发送multipart/form-data类型请求
[本文出自天外归云的博客园] 要模拟multipart/form-data类型请求,可以用python3的requests库完成。代码示例如下: #请求的接口url url = "url" #假设待上传文件与脚本在同一目录下 dir_path = os.
4819 0
springboot引入本地jar包,并且打jar包时包含本地jar
springboot引入本地jar包,并且打jar包时包含本地jar
404 0
|
算法 IDE Java
springBoot导入本地jar并且要求通过maven打包到项目的jar中|Unable to open nested jar file 'BOOT-INF/lib/xxxxxx.jar'
springBoot导入本地jar并且要求通过maven打包到项目的jar中|Unable to open nested jar file 'BOOT-INF/lib/xxxxxx.jar'