重构之美-走在Web标准化设计的路上[深入语义:列表Tag(ul/ol)和表格Tag(table)的抉择。]

简介:

首先,大家儿童节快乐,我要去买份儿童套餐来温习温习。^_^

问题:XHTML中的列表Tag(ul/ol)和表格Tag(table)区别何在?对于单列多行下的数据表,如何判断和选择?

这是我在培训中提的第二个问题。如果说上一个问题“理解h系列的不合理”能够把人带入对结构,代码结构的思考中,那么这第二个问题我认为则是把人带进对语义,语义结构的思考中。

说到标题“深入语义”,其实并不是从现在才开始的,大家应该发现在之前的文章中,我总是会回到语义这个点上去展开思路,论述结构。关于语义这个概念非常重要,什么是语义?这个我想一展开又是一长篇大论,我现在也很难说得清,所以,我还是回到这篇文章的主题,泛泛而言吧。

我想大家肯定变狡猾了,先去W3查过对ul/ol和table的定义,嘿嘿,我也是。但是很遗憾的是该死的W3给的答案是Define a List, Define a Table. 这不是废话嘛?NND!说了等于没说,完全就好比等于是一团大便。什么是List嘛?什么是Table嘛?还有办法,金山糍粑!

List
英文【A series of names, words, or other items written, printed, or imagined one after the other】
中文【目录, 名单, 列表, 序列, 数据清单, 明细表, 条纹, [总称]各种上市证券】
Table
英文【An orderly arrangement of data, especially one in which the data are arranged in columns and rows in an essentially rectangular form.】
中文【表:数据中的一种有序排列,尤指其中的数据按基本上构成一个矩形的竖行和横行进行排列的一张表格】

好像也得不出什么所以然的结果,虽然好像已经有所提示了,怎么个提示法?问题的最关键在于单列多行的时候如何抉择?好,待我磨拳擦掌搓脚磨牙,试试看。

首先严正申明:由于没有准确的List和Table定义,所以和之前有法可依,有矩可循不一样,这次真正纯粹是个人的理解了,您完全可以视为胡说八道。我想还是和上次一样分两方面来分析,理论和实践。

理论先行,我先闭嘴,咱们看图说话,分别用List和Table列一段单行数据如下:(unorder和order并不是关键,随便了)

List
< ol >
    
< li > 数据一 </ li >
    
< li > 数据二 </ li >
    
< li > 数据三 </ li >
    
< li > 数据四 </ li >
    
< li > 数据五 </ li >
</ ol >
  1. 数据一
  2. 数据二
  3. 数据三
  4. 数据四
  5. 数据五
Table
< table >
    
< tr >
        
< td > 数据一 </ td >
    
</ tr >
    
< tr >
        
< td > 数据二 </ td >
    
</ tr >
    
< tr >
        
< td > 数据三 </ td >
    
</ tr >
    
< tr >
        
< td > 数据四 </ td >
    
</ tr >
    
< tr >
        
< td > 数据五 </ td >
    
</ tr >
</ table >
数据一
数据二
数据三
数据四
数据五

看出来什么没有?好像什么也看不出来,ul和ol的圆点数字说明不了什么问题,ul/ol的代码量比table少很多,也不能说明什么问题,table的边框?我故意加的。好,我们接着继续看,让我们把数据扩展一次再看。

List Expand
< ol >
    
< li > 数据一
    & nbsp;   
< ol >< li > AAA </ li ></ ol >
    
</ li >     
    
< li > 数据二
    & nbsp;   
< ol >< li > BBB </ li ></ ol >
    
</ li >   
    
< li > 数据三
    & nbsp;   
< ol >< li > CCC </ li ></ ol >
    
</ li >   
    
< li > 数据四
    & nbsp;   
< ol >< li > DDD </ li ></ ol >
    
</ li >   
    
< li > 数据五
    & nbsp;   
< ol >< li > EEE </ li ></ ol >
    
</ li >   
</ ol >
  1. 数据一
    1. AAA
  2. 数据二
    1. BBB
  3. 数据三
    1. CCC
  4. 数据四
    1. DDD
  5. 数据五
    1. EEE
Table Expand
< table  class ="table" >
    
< tr >
        
< td > 数据一 </ td >
        
< td > AAA </ td >
    
</ tr >
    
< tr >
        
< td > 数据二 </ td >
        
< td > BBB </ td >
    
</ tr >
    
< tr >
        
< td > 数据三 </ td >
        
< td > CCC </ td >
    
</ tr >
    
< tr >
        
< td > 数据四 </ td >
        
< td > DDD </ td >
    
</ tr >
    
< tr >
        
< td > 数据五 </ td >
        
< td > EEE </ td >
    
</ tr >
</ table >
数据一 AAA
数据二 BBB
数据三 CCC
数据四 DDD
数据五 EEE

现在看出来了吗?仔细看看?还没有吗?还需要我继续扩展吗?

我直接说我的认知了:
table和ul/ol都能产生数据行,但是table的重心应该是在产生数据列,而ul/ol的重心应该是在产生数据级
所以对于单列多行的数据,扩展的趋势是产生的时候,使用ul/ol。扩展的趋势是产生的时候,使用table。

是的,我是这么区分的,趋势、级、列。我认为是隐藏的语义。

我想,你可能不会认可,觉得牵强,其实我也不是非常确定。

那么好,现在我再回到实践中来分析我的观点。

最常见的是网站中的新闻列表,特别是首页上的各栏目新闻列表,绝大部分都在使用ul/ol。我认为是种滥用,应该用table。这里要到后台程序开发中走走,新闻列表从数据库里产生出来,在数据库里,一条新闻由许多字段组成,首页上的简短新闻表和内页中的完整新闻表在一些情况下有可能是调用同一个存储过程或者SQL语句。不同的仅仅是数据的绑定,首页上的我可能只是绑定标题和时间,内页中或许会更完整一点,比如加上点击数、作者之类。如果一个新闻表有三列以上,你肯定不会使用ul/ol了。那么两列的和三列的有本质区别吗?我知道两列可以很容易用ul/ol实现,增加span嘛,那么三列呢?你说可以,给span加class。好吧,四列了,你还说可以吗?是的,我承认仍然可以做到,你烦不烦啊!

再说了,本来一个样式就可以内外定义完同样的新闻表,分开后你又要定义ul/ol,又要定义table,不是多此一举吗?最重要的还是在扩展的趋势上,如果数据一旦向列扩展,ul/ol将非常困难。你说是吗?

ul/ol不是用来取代或者模拟table的,table用于表状数据,什么数据是表状数据,扩展趋势是列的数据,哪怕它只有一列也应该视为表状数据而使用table。那么什么时候使用ul/ol?级。具体点菜单上,树上。

当然有些时候数据又有列又有级,这时就会出现混用的情况,相对复杂点了,但我觉得判断还是在级和列上,谁为重?

The End.


本文转自爆牙齿博客园博客,原文链接:http://yuntian.cnblogs.com/archive/2006/06/01/414400.html,如需转载请自行联系原作者

相关文章
|
6月前
|
前端开发
Web前端---表格和表单
Web前端---表格和表单
72 1
|
6月前
|
存储 前端开发
web前端开发----------表格
web前端开发----------表格
154 0
|
16天前
|
XML JSON 安全
Web服务是通过标准化的通信协议和数据格式
【10月更文挑战第18天】Web服务是通过标准化的通信协议和数据格式
139 69
|
2月前
|
前端开发 程序员
【前端web入门第二天】01 html语法实现列表与表格_合并单元格
本文介绍了HTML中的列表与表格的使用方法。列表包括无序列表(`&lt;ul&gt;`嵌套`&lt;li&gt;`)、有序列表(`&lt;ol&gt;`嵌套`&lt;li&gt;`)和定义列表(`&lt;dl&gt;`嵌套`&lt;dt&gt;`和`&lt;dd&gt;`)。
59 19
|
5月前
|
Web App开发 移动开发 前端开发
Web网页制作-知识点(3)——HTML5新增标签、CSS简介、CSS的引入方式、选择器、字体属性、背景属性、表格属性、关系选择器 二
Web网页制作-知识点(3)——HTML5新增标签、CSS简介、CSS的引入方式、选择器、字体属性、背景属性、表格属性、关系选择器 二
49 1
|
5月前
|
移动开发 前端开发 HTML5
Web网页制作-知识点(3)——HTML5新增标签、CSS简介、CSS的引入方式、选择器、字体属性、背景属性、表格属性、关系选择器一
Web网页制作-知识点(3)——HTML5新增标签、CSS简介、CSS的引入方式、选择器、字体属性、背景属性、表格属性、关系选择器 一
78 1
|
5月前
|
移动开发 前端开发 数据安全/隐私保护
Web网页制作-知识点(2)——常用文本标签、列表标签、表格标签、Form表单、块元素与行内元素(内联元素)
Web网页制作-知识点(2)——常用文本标签、列表标签、表格标签、Form表单、块元素与行内元素(内联元素)
37 0
|
监控 安全 测试技术
用 Python 撸一个 Web 服务器-第7章:重构——更好的组织代码
用 Python 撸一个 Web 服务器-第7章:重构——更好的组织代码
|
前端开发
web前端-HTML图像,表格,列表的使用
web前端-HTML图像,表格,列表的使用
257 0
|
存储 前端开发 Java
一文概览设计Web API 中的细节
一文概览设计Web API 中的细节
187 0