- 浏览: 121776 次
- 性别:
- 来自: 上海
文章分类
最新评论
table数据列表
传统table的数据列表代码如下所示。我们要为每行添加tr标签,然后还要在其中为标题和数据各加一个td标签,由于标签都是td,想要添加样式的话还要为每个td添加class属性。
<table> <tbody> <tr> <td class="title">Name:</td> <td class="text">Squall Li</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">26th May 1986</td> </tr> </tbody> </table>
一下是相应的CSS代码,我们为之前在HTML中声明的class添加样式。
/*TABLE LIST DATA*/ table { margin-bottom:50px; } table tr .title { background:#5f9be3; color:#fff; font-weight:bold; padding:5px; width:100px; } table tr .text { padding-left:10px; }
从以上代码可以看出,使用table标签,如果想使用CSS来对内容进行修饰或修改的话,需要为td单元格添加一些相应的class属性。这样无形中增加了自己的工作量,代码会稍微变多了一些。代码变多意味着什么?意味着网站的流量在浪费、增加更多的产生Bug的几率以及后期维护更困难。
dl、dt、dd数据列表
现在让我们来看看使用了HTML dl、dt、dd标签的数据列表。首先我们使用dl(definition list-自定义列表)标签来容纳整个数据结构,然后我们使用dt(自定义标题)标签和dd(自定义描述)标签来容纳数据中的标题和内容。
<dl> <dt>Name: </dt> <dd>Squall Li</dd> <dt>Age: </dt> <dd>23</dd> <dt>Gender: </dt> <dd>Male</dd> <dt>Day of Birth:</dt> <dd>26th May 1986</dd> </dl>
而在css代码中,我们仅需让dt和dd向左浮动即可。
/*DL, DT, DD TAGS LIST DATA*/
dl { margin-bottom:50px; } dl dt { background:#5f9be3; color:#fff; float:left; font-weight:bold; margin-right:10px; padding:5px; width:100px; } dl dd { margin:2px 0; padding:5px 0; }
从dl、dt、dd的实例中你应该能明显的看出它们的代码更简洁更平滑更符合语义化了吧。
发表评论
-
如何使iframe透明
2010-07-18 16:38 669<html> <head><m ... -
li中的span右浮动下沉问题
2010-07-14 23:05 1053问题: 新闻列表中为了显示时间,加了个span<li& ... -
dedeCMS 标签学习
2010-06-03 14:58 1102最近在做一个dedecms的模 ... -
dede站怎么在首页调用单页的内容?【cms】
2010-06-03 11:45 1805我们知道,单页内容的模板调用标签是 {dede:field.c ... -
修改V5.6默认模板颜色样式的默认色为其它颜色--DeDe技巧
2010-06-02 04:22 1218打开 /templets/default/js/changeS ... -
jquery 下拉菜单- sub menu
2010-05-10 16:50 796http://javascript-array.com/sc ... -
jquery 滑动条-Slider
2010-05-10 15:33 1785效果如图: -
js预加载图片
2010-04-28 13:39 1570<script type="text/java ... -
CSS 圆角自扩展按钮
2010-04-22 13:51 806我们用 A 包含一个 SPAN 标签来实现此效果:预览 &l ... -
CSS 实现文字、图片垂直对齐(vertical-align)专题文章
2010-04-22 13:13 1621垂直对齐在 Firefox 和 IE7 等最新浏览器中,已经不 ... -
用 CSS 实现图片替换文字
2010-04-22 13:02 835介绍一下Gilder/Levin 的方法 <h2 ... -
css布局精髓
2010-04-20 17:45 610http://blog.html.it/layoutgala/ ... -
在HTML中调用XML数据
2010-04-13 18:20 1066<html> <head> < ... -
鼠标经过时变色的表格
2010-04-13 18:13 856<html> <head> < ... -
表格隔行变色
2010-04-13 18:12 737<html> <head> < ... -
xml与css-1
2010-04-13 18:05 582<?xml version="1.0" ...
相关推荐
如果你仍然在使用传统table来创建数据列表,那么请继续往下看,看看使用HTML的dl、dt、dd标签是如何让你的工作更轻松… table数据列表 传统table的数据列表代码如下所示。我们要为每行添加tr标签,然后还要在其中为...
现在,越来越多的前端开发er们开始使用xHTML+CSS替代最初的table布局完成网页的整体布局,... 如果你仍然在使用传统table来创建数据列表,那么请继续往下看,看看使用HTML的dl、dt、dd标签是如何让你的工作更轻松… ta
div-dl-dt-dd 图文混编 table-tr-td 规整数据 form-table-tr-td 表单布局 块标签:基本块级标签 标题:h1-h6 段落:p 水平线:hr 常用布局标签 有序:ol-li 无序:ul-li 定义描述:dl-dt-dd ...
div+css再牛*也无法完全取代table,很多时候还是需要用到表格,这里就不探讨孰优孰劣,什么时候要用表格什么时候用div了。
简单标签、图片标签img、音频/视频标签vedio/audio、链接标签a、列表标签ul>li ol>li dl>dt/dd 、表格标签table、 表单标签form等。适合前端新手
网页制作小技巧:dl dt dd标签用法----2008年9月15日 头部属性全接触----2008年9月15日 两个表格[Table]可以左右排放吗----2008年9月15日 marquee基本语法的全解释----2008年9月14日 HTML4.0不常用标签特性示例-...
比如可能很多人一次都没见过的标签:dl, dt, dd, cite, q, dfn, ins, del, var等等。 1. dl, dt, dd系列定义列表 网站重构让很多人知道了ul, ol和li,但是在列表的家族里面还有一个dl,就是“定义列表”。比如说词典...
网页基本组成:音频,视频,链接,图片,文字 web标准的好处 1.让web的发展前景更加广阔 ...</dl> <dl>是自定义列表,<dd>解释<dt> <table> 表格 <tr> 单元格内文字 ...... ...... </table>
描述选择器:“h4 .charge”地点选择器内部:“dl .summary-table” 在包含“位置”的 dt 标签之后的 dd 标签内赞助商选择器内部:“dl .summary-table” 在包含“赞助商”的 dt 标签之后的 dd 标签内完整状态内表...
body,article,aside,ul,li,ol,caption,dd,dl,dt,footer,header,nav,section,table,thead,tbody,tr,td,th,h1,h2,h3,h4,h5,h6,div,p 将img转化为image 将a转化为navigator 将span,s,b,i,strong转化为text 安装...
本文实例讲述了jQuery实现转动随机数抽奖效果的方法。分享给大家供大家参考。具体实现方法如下: <!Doctype html> <html> ...body,h1,h2,h3,h4,h5,h6,p,ul,ol,li,form,img,dl,dt,dd,table,th,td
对css里的元素如:html, body, div, ... strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td的初始化
EasyDrag 是一个用来实现页面元素拖拉的 jQuery 插件。 在没遇到easydrag插件之前,想实现一个弹出框并不是一件轻而易举的事情!...body,h1,h2,h3,h4,h5,h6,p,ul,ol,li,form,img,dl,dt,dd,table,th,td,bloc
1、特殊文本的实现 页面的空格以及一些特殊字符需要通过转义字符的方式体现 1、 表示一个空格 2、< 表示 < 3、> 表示 > 4、© 表示© Demo : 1、创建一个页面 02-text.html 2、在页面...
html,address,blockquote,body,dd,div,dl,dt,fieldset,form,frame,frameset,h1,h2,h3,h4,h5,h6,noframes,ol,p,ul,center,dir,hr,menu,pre { display:block} li { display:list-item} head { display:none} table { ...
<dd>* 点击上传资源即表示您确认该资源不违反资源分享的使用条款,并且您拥有该资源的所有版权或者上传资源的授权</dd> </dl> <!-- right area --> <!-- hot Tag --> 我的Tag ...
dl, dt, dd, ul, ol, li, /* list elements 列表元素 */ pre, /* text formatting elements 文本格式元素 */ form, fieldset, legend, button, input, textarea, /* form elements 表单元素 */ th, td, /* table ...
jquery特效 幻灯片效果,效果图如下: 代码如下: <... /* CSS Document */ body,h1,h2,h3,h4,h5,h6,p,ul,ol,li,form,img,dl,dt,dd,table,th,td,blockquote,fieldset,div,strong,label,em{margin:0;padding