易混淆的table列表和dl表格
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表格的更多相关文章
- css常见的易混淆属性和值的区别(一)
css的属性很多,每一个属性的值也很多,组合起来便有成千上万种.不同属性之间的相互组合也可以产生不同的样式,css真是一种优美的样式设计语言.下面对工作中常见的易混淆的属性和值进行总结: 1. lin ...
- Day46(列表标签,表格标签,表单标签,css的引入方式,css选择器)
一.列表标签 列表标签分为三种. 1.无序列表<ul>,无序列表中的每一项是<li> 英文单词解释如下: ul:unordered list,“无序列表”的意思. li:lis ...
- lua中易混淆函数
lua中易混淆的函数 ipairs和pairs: ipairs只能顺序遍历table,遇到key不是数字就会退出 pairs可以遍历table中所有元素 ----------------------- ...
- RWD Table Patterns – 响应式表格解决方案
在显示复杂的表格数据的时候,相信 Web 开发人员都碰到过显示不下的情况.RWD Table Patterns 是一个很好的响应式表格解决方案.它采用移动优先以及渐进增强的设计理念,在不支持响应式的浏 ...
- C#中一些易混淆概念总结
C#中一些易混淆概念 这几天一直在复习C#基础知识,过程中也发现了自己以前理解不清楚和混淆的概念.现在给大家分享出来我的笔记: 一,.NET平台的重要组成部分都是有哪些 1)FCL (所谓的.NET框 ...
- C#中易混淆的知识点
C#中易混淆的知识点 一.引言 今天在论坛中看到一位朋友提出这样的一个问题,问题大致(问题的链接为:http://social.msdn.microsoft.com/Forums/zh-CN/52e6 ...
- a链接易混淆与form表单简易验证用法详解
链接可以说遍布互联网,比如你想提供一个可以跳转到百度首页的链接给网友,那么代码如下: <a href="http://www.baidu.com">百度一下,你就知道& ...
- JavaScript中易混淆的DOM属性及方法对比
JavaScript中易混淆的DOM属性及方法对比 ParentNode.children VS Node.prototype.childNodes ParentNode.children:该属性继承 ...
- [Swift-2019力扣杯春季初赛]1. 易混淆数
给定一个数字 N,当它满足以下条件的时候返回 true: 把原数字旋转180°以后得到新的数字. 如 0, 1, 6, 8, 9 旋转 180° 以后,得到了新的数字 0, 1, 9, 8, 6 . ...
随机推荐
- Warning: The Copy Bundle Resources build phase contains
在编译程序时,遇到了这样的Waring: Warning: The Copy Bundle Resources build phase contains this target's Info.pl ...
- (未使用AOP)使用ThreadLocal对象把Connection和当前线程绑定, 从而使一个线程中只有一个能控制事务的对象
每个连接都有自己的独立事务,会造成数据的不一致 这组操作应该要么一起操作成功,要么一起操作失败, 应该使用同一个连接,只有一个能控制事务的对象 需要使用ThreadLocal对象把Connection ...
- java保留小数位数
System.out.println(String.format("%.5f",new Main().minRadius(n,m)));
- ACM心理过程
ACM 都已经一个学期过去了,然后还是很菜很菜,比起别人真的是差到一种境界好么???因为自身的太多原因,因为学的不够精,因为懒惰,因为学习的方法,因为自身对未来的不渴望.因为自满,因为自己的自甘堕落, ...
- C#基础知识回顾
值类型和引用类型 值类型存在栈上,结构,枚举,数值类型 引用类型存在堆上,数组,类,接口,委托 把值类型存到引用类型中就是封箱,耗时 引用类型中的值类型是存在堆上,不是栈上,但是作为参数传递时,还是会 ...
- [Xcode 实际操作]九、实用进阶-(5)使用正则表达式判断格式是否正确
目录:[Swift]Xcode实际操作 本文将演示使用正则表达式判断邮箱的格式是否正确. 在项目导航区,打开视图控制器的代码文件[ViewController.swift] import UIKit ...
- 第二篇 Nosql讲解之windows下memcache的安装(一)
memcached基本概念 1.Memcached是danga的一个项目,最早是LiveJournal服务的,最初为了加速LiveJournal访问速度而开发的,后来被很多大型的网站采用. 官方网站: ...
- FFT与NTT的模板
网上相关博客不少,这里给自己留个带点注释的模板,以后要是忘了作提醒用. 以洛谷3803多项式乘法裸题为例. FFT: #include <cstdio> #include <cmat ...
- wmq的队伍 BIT优化dp
http://oj.xjtuacm.com/problem/14/ wmq的队伍 发布时间: 2017年4月9日 17:06 最后更新: 2017年4月9日 17:07 时间限制: 2000m ...
- JVM-GC日志分析
程序运行时配置如下参数: -Xms20M -Xmx20M -Xmn10M -verbose:gc -XX:+PrintGCDetails -XX:SurvivorRatio= -XX:+PrintGC ...