dl列表是使用了HTML dl、dt、dd标签的数据列表。首先我们使用dl(definition list-自定义列表)标签来容纳整个数据结构,然后我们使用dt(自定义标题)标签和dd(自定义描述)标签来容纳数据中的标题和内容。

Example:

<dl>
<dt>Name: </dt>
<dd>Martin</dd>
<dt>Age: </dt>
<dd>23</dd>
<dt>Gender: </dt>
<dd>Male</dd>
<dt>Day of Birth:</dt>
<dd>13th September 1996</dd>
</dl>

效果:

传统的table数据列表我们要为每行添加tr标签,然后还要在其中为标题和数据各加一个th和td标签。

Example:

<table>
<tbody>
<tr>
<td class="title">Name:</td>
<td class="text">Martin</td>
</tr>
<tr>
<td class="title">Age:</td>
<td class="text">23</td>
</tr>
<tr>
<td class="title">Gender:</td>
<td class="text">Male</td>
</tr>
<tr>
<td class="title">Day of Birth:</td>
<td class="text">13th September 1996</td>
</tr>
</tbody>
</table>

效果:

总结:比较dl和table数据列表,dl列表更加简洁,但是table表格仍然被很多人用来作为网页中数据表现的必需品,比如个人信息数据列表等。事实上,使用HTML的dl、dt、dd标签会让你节省更多的代码,更能让代码符合内容的语义化。当然,table也有它的用武之地,那就是很大数据量的数据表,但是小型的数据列表和表单完全可以不使用table哦!

易混淆的table列表和dl表格的更多相关文章

  1. css常见的易混淆属性和值的区别(一)

    css的属性很多,每一个属性的值也很多,组合起来便有成千上万种.不同属性之间的相互组合也可以产生不同的样式,css真是一种优美的样式设计语言.下面对工作中常见的易混淆的属性和值进行总结: 1. lin ...

  2. Day46(列表标签,表格标签,表单标签,css的引入方式,css选择器)

    一.列表标签 列表标签分为三种. 1.无序列表<ul>,无序列表中的每一项是<li> 英文单词解释如下: ul:unordered list,“无序列表”的意思. li:lis ...

  3. lua中易混淆函数

    lua中易混淆的函数 ipairs和pairs: ipairs只能顺序遍历table,遇到key不是数字就会退出 pairs可以遍历table中所有元素 ----------------------- ...

  4. RWD Table Patterns – 响应式表格解决方案

    在显示复杂的表格数据的时候,相信 Web 开发人员都碰到过显示不下的情况.RWD Table Patterns 是一个很好的响应式表格解决方案.它采用移动优先以及渐进增强的设计理念,在不支持响应式的浏 ...

  5. C#中一些易混淆概念总结

    C#中一些易混淆概念 这几天一直在复习C#基础知识,过程中也发现了自己以前理解不清楚和混淆的概念.现在给大家分享出来我的笔记: 一,.NET平台的重要组成部分都是有哪些 1)FCL (所谓的.NET框 ...

  6. C#中易混淆的知识点

    C#中易混淆的知识点 一.引言 今天在论坛中看到一位朋友提出这样的一个问题,问题大致(问题的链接为:http://social.msdn.microsoft.com/Forums/zh-CN/52e6 ...

  7. a链接易混淆与form表单简易验证用法详解

    链接可以说遍布互联网,比如你想提供一个可以跳转到百度首页的链接给网友,那么代码如下: <a href="http://www.baidu.com">百度一下,你就知道& ...

  8. JavaScript中易混淆的DOM属性及方法对比

    JavaScript中易混淆的DOM属性及方法对比 ParentNode.children VS Node.prototype.childNodes ParentNode.children:该属性继承 ...

  9. [Swift-2019力扣杯春季初赛]1. 易混淆数

    给定一个数字 N,当它满足以下条件的时候返回 true: 把原数字旋转180°以后得到新的数字. 如 0, 1, 6, 8, 9 旋转 180° 以后,得到了新的数字 0, 1, 9, 8, 6 . ...

随机推荐

  1. 2 手写Java LinkedList核心源码

    上一章我们手写了ArrayList的核心源码,ArrayList底层是用了一个数组来保存数据,数组保存数据的优点就是查找效率高,但是删除效率特别低,最坏的情况下需要移动所有的元素.在查找需求比较重要的 ...

  2. tableView刷新指定的cell 或section和滚动到指定的位置

    转自:http://blog.csdn.net/tianyou_code/article/details/54426494 //一个section刷新 NSIndexSet *indexSet=[[N ...

  3. Codeforces 176B【计数DP】

    题意: 给你两个串s1,s2和一个K, 有一种操作是在一个串切开然后交换位置, 问s1有多少种方法经过K次这样的操作变成s2: 思路: (从来没接触过计数DP...还是太菜...参考了[大牛blog] ...

  4. Levenberg-Marquardt

    c++ opencv L-M源码 http://www.shenlejun.cn/article/show.asp?id=97 什么是最优化,可分为几大类? 答:Levenberg-Marquardt ...

  5. python+smtplib 发送测试报告到邮箱

    之前有介绍过怎样快速的搭建一个python测试框架 python+unittest 搭建简易的接口测试框架 这里介绍一下,怎样使用smtplib将测试报告发送到邮箱,这样使用jenkins定时巡检,执 ...

  6. st表求区间最大值

    Input 第一行给出一个数字N,接下来N+1行,每行给出一个数字Ai,(0<=i<=N<=1E6)接来给出一个数字Q(Q<=7000),代表有Q个询问每组询问格式为a,b即询 ...

  7. 洛谷1005(dp)

    1.不要贪,缩小区间去dp就好. 2.预处理指数. 3.__int128可还行. #include <cstdio> #include <cctype> #include &l ...

  8. split()分割字符串用法

    <script type="text/javascript"> var str="How are you doing today?" documen ...

  9. vue http请求 vue-resource使用方法

    1.安装vue-resource扩展: npm install vue-resource 2.在main.js中引入 import http from 'vue-resource' 3.使用方法 // ...

  10. 顾问Advisor Aspectj注解

    顾问Advisor  通知 advice PointcutAdvisor  一个接口  是顾问的一种. . 任意单个字符 + 重复1到多次 * 重复0到多次 NameMetchMethodPointc ...