专栏首页前端重点笔记易混淆的table列表和dl表格

易混淆的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哦!

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 前端和后端交互的方式

    注意在使用ajax提交form表单时,提交按钮应为type=“button”,然后为其绑定点击事件,而不应该为type=“submit”,因为submit按钮会...

    IT人一直在路上
  • call,apply,bind详解

    我们知道bind,call,apply的作用都是用来改变this指向的,那为什么要改变this指向呢?请看下面的例子:

    IT人一直在路上
  • jquery jQuery快速入门

    维护IE678是一件让人头疼的事情,一般我们都会额外加载一个CSS和JS单独处理。值得庆幸的是使用这些浏览器的人也逐步减少,PC端用户已经逐步被移动端用户所取代...

    IT人一直在路上
  • CSS 控制鼠标划过,图片放大效果

    版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/u011415782/article/de...

    用户3056046
  • <tbody>

    <tbody> 标签定义HTML表格的主体内容。使用<tbody>元素,可以将表格分为一个单独的部分。其一般同<thead>和<tfoot>元素组合起来使用,前...

    Html5知典
  • underscore.js,js工具库

    windseek
  • VS2008(C#)制作网页Tab标签切换方法(二)

    <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Tab_JScript.aspx.cs" Inh...

    阳光岛主
  • <thead>标签

    <thead> 标签定义HTML表格的表头,并用于组合HTML表格的头部内容。<thead>应与<tbody>和<tfoot>标签结合起来使用。<tbody>元...

    Html5知典
  • 用JS实现表格中隔行显示不同颜色

    用JS实现表格中隔行显示不同颜色  第一种:  <style>  tr{bgColor:expression(      this.b...

    闵开慧
  • 像 google 一样测试系列之五:流程与覆盖率篇

    有了用例,还需持续跑起来,并能有覆盖率。如何让 Local Unit Tests和Instrumented Tests 都支持脚本执行?

    腾讯移动品质中心TMQ

扫码关注云+社区

领取腾讯云代金券

玩转腾讯云 有奖征文活动