超越起点 追随自由

我看不见，我的明天，但今天，绝不重复昨天；顺风是滑翔，逆风才是飞翔，火烧过才能化凤凰！
  博客园 :: 首页 :: 新随笔 :: 联系 :: 订阅 订阅 :: 管理 ::
  294 随笔 :: 16 文章 :: 1118 评论 :: 24 Trackbacks
重构之美－走在Web标准化设计的路上[深入语义：列表Tag（ul/ol）和表格Tag（table）的抉择。]

连接
◆《重构之美》总目录
上一篇：重构之美－走在Web标准化设计的路上[复杂表单：Reloaded]
下一篇：The End.

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

问题：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.

连接
◆《重构之美》总目录
上一篇：重构之美－走在Web标准化设计的路上[复杂表单：Reloaded]
下一篇：The End.

---------------------垃圾部分－－－－－－－－－－－－－－－－－－

..
            <div class="personinfo">
                <h2><span>个人信息</span></h2>
                <div>
                    <h3><span>购房人</span></h3>
                    <table>
                        <tr>
                            <td><span>选择</span></td>
                            <td>姓名</td>
                            <td>性别</td>
                            <td>年龄</td>
                            <td>关系</td>
                            <td>户籍所在地</td>
                        </tr>
                        <tr>
                            <td><input type="checkbox" /></td>
                            <td><select /></td>
                            <td><input /></td>
                            <td><input /></td>
                            <td><select /></td>
                            <td><input /></td>
                        </tr>
                    </table>
                </div>            
                <div>
                    <h3><span>家庭成员</span></h3>
                    <table>
                        <tr>
                            <td><span>选择</span></td>
                            <td>姓名</td>
                            <td>性别</td>
                            <td>年龄</td>
                            <td>关系</td>
                            <td>户籍所在地</td>
                            <td>工作单位</td>
                            <td>编辑</td>
                            <td>删除</td>
                        </tr>
                        <tr>
                            <td><input type="checkbox" /></td>
                            <td><select /></td>
                            <td><input /></td>
                            <td><input /></td>
                            <td><input /></td>
                            <td><input /></td>
                            <td><input /></td>
                            <td><button /></td>
                            <td><button /></td>
                        </tr>
                    </table>
                    <p>
                        <button />
                    </p>
                </div>
            </div>
<h1>大便蛔虫的表单标题</h1>
<div>
    <h2>导航</h2>
    <div>
        <button>新增</button>
        <button>刷新</button>
    </div>
    <div>
        <h3>当前批次采用的标准为</h3>
        <div>
            <label>本人补贴</label>
            <asp:label id="" Runat="server"></asp:label>
        </div>
        <div>
            <label>本人工龄补贴</label>
            <asp:label id="" Runat="server"></asp:label>
        </div>
        <div>
            <label>配偶补贴</label>
            <asp:label id="" Runat="server"></asp:label>
        </div>
        <div>
            <label>配偶工龄补贴</label>
            <asp:label id="" Runat="server"></asp:label>
        </div>
        <div>
            <label>特殊补贴</label>
            <asp:label id="" Runat="server"></asp:label>
        </div>
    </div>
    <iewc:treeview id="" ExpandLevel="1" runat="server" AutoPostBack="True"></iewc:treeview>
</div>
<div>
    <h2>表单内容</h2>
    <div>
        <h3>申请人信息</h3>
        <div>
            <label>本人姓名</label>
            <asp:textbox id="" Runat="server"></asp:textbox>
        </div>
        <div>
            <label>身份证号码</label>
            <asp:textbox id="" Runat="server"></asp:textbox>
        </div>
        <div>
            <label>本人工龄（年）</label>
            <asp:textbox id="" Runat="server"></asp:textbox>
            <asp:regularexpressionvalidator id="REVY" runat="server" Display="Dynamic" ValidationExpression="\d{0,2}" ErrorMessage="必须输入整数"
        ControlToValidate="txt_WorkAge"></asp:regularexpressionvalidator>
        </div>
        <div>
            <label>工作单位</label>
            <asp:label id="" Runat="server"></asp:label>
        </div>
        <div>
            <label>职务或职称</label>
            <asp:textbox id="" Runat="server"></asp:textbox>
        </div>
    </div>
    <div class="personinfo">
        <h3>现住房信息</h3>
        <div>
            <label>现住房地址</label>
            <asp:textbox id="" Runat="server"></asp:textbox>
        </div>
        <div>
            <label>建筑面积（平方米）</label>
            <asp:textbox id="" Runat="server"></asp:textbox>
        </div>
        <div>
            <label>其中个人按市场价自购面积（平方米）</label>
            <asp:textbox id="" Runat="server"></asp:textbox>
        </div>
        <div>
            <label>现住房性质</label>
            <asp:textbox id="" Runat="server"></asp:textbox>
        </div>
        <div>
            <label>补贴住房面积标准（平方米）</label>
            <asp:textbox id="" Runat="server"></asp:textbox>
        </div>
        <div>
            <label>申请住房补贴理由</label>
            <asp:dropdownlist id="" Runat="server"></asp:dropdownlist>
        </div>
        <div>
            <label>申请住房补贴标准</label>
            <asp:radiobuttonlist id="" runat="server" RepeatDirection="Horizontal">
                <asp:ListItem>无房户一次性补贴</asp:ListItem>
                <asp:ListItem>一次性补面积差</asp:ListItem>
            </asp:radiobuttonlist>
        </div>
    </div>
    <div>
        <h3>配偶信息</h3>
        <div>
            <label>配偶姓名</label>
            <asp:textbox id="" Runat="server"></asp:textbox>
        </div>
        <div>
            <label>配偶身份证号码</label>
            <asp:textbox id="" Runat="server"></asp:textbox>
        </div>
        <div>
            <label>配偶工龄</label>
            <asp:textbox id="" Runat="server"></asp:textbox>年
            <asp:regularexpressionvalidator id="" runat="server" Display="Dynamic" ValidationExpression="\d{0,2}" ErrorMessage="必须输入整数"
            ControlToValidate=""></asp:regularexpressionvalidator>
        </div>
        <div>
            <label>配偶工作单位</label>
            <asp:textbox id="" Runat="server"></asp:textbox>
        </div>
        <div>
            <label>职务或职称：</label>
            <asp:textbox id="" Runat="server"></asp:textbox>
        </div>
    </div>
    <div>
        <h3>享受住房分配或货币补贴情况</h3>
        <div>
            <label>（１）已享受房改购房面积（平方米）</label>
            <asp:textbox id="" Runat="server"></asp:textbox>
        </div>
        <div>
            <label>（２）已享受购房补贴（元）</label>
            <asp:textbox id="" Runat="server"></asp:textbox>
        </div>
        <div>
            <label>（３）已享受住房补贴（元）</label>
            <asp:textbox id="" Runat="server"></asp:textbox>
        </div>
        <div>
            <asp:button id="" Text="计算" Runat="server"></asp:button>
            <label>本次补贴面积（平方米）</label>
            <cc1:acceptnumber id="" runat="server"></cc1:acceptnumber>
        </div>
    </div>
    <div>
        <h3>住房补贴</h3>
        <div>
            <label>本人补贴（元）</label>
            <asp:textbox id="" Runat="server"></asp:textbox>
        </div>
        <div>
            <label>本人工龄补贴（元）</label>
            <asp:textbox id="" Runat="server"></asp:textbox>
        </div>
        <div>
            <label>配偶补贴（元）</label>
            <asp:textbox id="" Runat="server"></asp:textbox>
        </div>
        <div>
            <label>配偶工龄补贴（元）</label>
            <asp:textbox id="" Runat="server"></asp:textbox>
        </div>
        <div>
            <label>特殊补贴（元）</label>
            <asp:textbox id="" Runat="server"></asp:textbox>
        </div>
        <div>
            <label>合计（元）</label>
            <asp:textbox id="" Runat="server"></asp:textbox>
        </div>
        <div>
            <label>实际发放补贴（元）</label>
            <asp:textbox id="" Runat="server"></asp:textbox>
        </div>
    </div>
    <div>
        <h3>请申请人根据不同情况填写</h3>
        <div>
            <label>现购房地址</label>
            <asp:textbox id="" Runat="server"></asp:textbox>
        </div>
        <div>
            <label>售房单位</label>
            <asp:textbox id="" Runat="server"></asp:textbox>
        </div>
        <div>
            <label
posted on 2006-06-01 01:20 爆牙齿 阅读(2290) 评论(7)  编辑 收藏 所属分类: 4、奋斗 、《重构之美》

评论

#1楼  2006-06-01 07:04 王传炜      
好文章，我很少用到ul/ol
  回复  引用  查看    

#2楼  2006-06-01 07:55 一帆(老鼠粮仓之路)      
我用ul和li，他怎么死也不显示前面的小图标？
#contentTd ul
{
padding:0;
margin:0;
display:inline;
list-style:none;
}
#contentTd li
{
padding:0;
margin:0;
display:block;
float:left;
}

#contentTd li.rssTitle
{
margin:0;
margin-right:4px;
padding-top:5px;
padding-bottom:3px;
padding-left:5px;
color:#333;
background:#fff url(img/arrowList.gif) no-repeat center left;
width:74%;
}
  回复  引用  查看    

#3楼  2006-06-01 13:47 木野狐      
@一帆(老鼠粮仓之路)

list-style 设成 none 当然显示不了了。
  回复  引用  查看    

#4楼  2006-06-01 13:55 myy [未注册用户]
HTML/XHTML为什么不干脆直接提供“又有列又有级”这种标签呢？

  回复  引用    

#5楼  2006-06-12 16:58 流氓兔子雨 [未注册用户]
或许我们可以将list看成是table的一种情况呢！我们只不过应用了表格的合并罢了
  回复  引用    

#6楼  2007-02-01 11:17 怿飞 [未注册用户]
对于表状数据用table，对于菜单树用ul/ol，让结构更具语义化。复杂的结构用混合方式来解决。写得很深入，易懂！比较赞同爆牙的观点。可能现在的点在于，没有考虑可扩展性，只是更多了来模拟效果，形似却神不似！
  回复  引用    

#7楼  2008-06-30 21:34 长沙小能      
不错的说！先留名！
  回复  引用  查看    


标题  
姓名  
主页
Email (只有博主才能看到) 
验证码 *