表而不是DIV

作者：保佑欣疼你的芯疼 | 2023-09-06 09:01

如何解决《表而不是DIV》经验，为你挑选了10个好方法。

整个"桌子与分区"的事情几乎没有错过这个标志.它不是"桌子"或"div".这是关于使用语义html.

即使div标签在精心布局的页面中也只占很小的一部分.不要过度使用它.如果你正确地将你的html放在一起,你不应该需要那么多.列表,字段集,图例,标签,段落等内容可以替代div或span经常用来完成的大部分内容.Div应该主要用于指示逻辑div ision,并且在绝对必要时仅用于额外布局.表格也是如此; 有表格数据时使用它,但不是.

然后你有一个更加语义的页面,你不需要在CSS中定义很多类; 您可以直接定位标签.也许最重要的是,你有一个页面,将比分与谷歌来有趣,比同等表格或DIV重页好得多.最重要的是,它可以帮助您更好地与部分受众群体建立联系.

因此,如果我们回过头来看一下表格与div的比较,我认为我们实际上已经达到了div过度使用且表格未被充分使用的程度.为什么？因为当你真正考虑它时,有许多东西属于"表格数据"的类别,往往被忽视.例如,在这个网页上的答案和评论.它们由多个记录组成,每个记录具有相同的字段集.它们甚至存储在一个sql server表中,大声喊叫.这是表格数据的确切定义.这意味着一个html表标签绝对是一个很好的语义选择,可以像Stack Overflow上的帖子一样布局.同样的原则也适用于许多其他事情.使用表格标签来设置三列布局可能不是一个好主意,但它'

1> Joel Coehoor..：

整个"桌子与分区"的事情几乎没有错过这个标志.它不是"桌子"或"div".这是关于使用语义html.

同意.多年前,当我第一次离开基于表格的布局时,我将整个"使用div"的口头禅钻进我的大脑.结果代码的语义更少.一旦你了解了HTML及其提供的所有内容,你就会学会编写有意义的代码,这一切都变得简单了.

看看大型网站在哪里使用表格很有意思.获取适用于Firefox的WebDeveloper插件,并使用可以概述表格的功能.然后去大型网站.你会在一些有趣的地方看到桌子.例如,亚马逊有一个表格,根据窗口拉伸的宽度显示可变数量的产品.几乎所有东西都是最好的div,但是当你考虑旧的浏览器时,一些表格会更好.

我必须不同意StackOverflow使用表来分隔帖子和评论.基本上,我有一个拇指规则:如果表只有`tr`标签,请改用`div`s.

@Joel Coehoorn即使我同意DIV滥用,我也会在TABULAR数据上坚持使用TABLES.虽然今天的SO布局可能有点在表格方面,但DATA本身并不是TABULAR.因此,表格将不受影响.

2> Jon Limjap..：

当我提交的数据确实是表格式的.

我发现有些网页设计师在某些网站上使用表格数据上的div是荒谬的.

我将拥有的另一个用途是表单,特别是标签:文本框对.这在技术上可以在div框中完成,但是在表中执行此操作要容易得多,并且可以说标签:文本框对实际上是表格式的.

标签/文本框对应使用标签.通过一点工作_ {display:block; float:left;} _,您可以将字段集中的所有标签设置为具有所需宽度.

不,区别在于Label/TextBox组合允许您根据需要将其显示为表格布局,如果您想要不同的东西则不允许.使用表*将*强制为表格布局,如果您决定采用不同的方向,则更难以在以后更改它.

3> netrox..：

我曾经做过纯CSS,但我放弃了追求有利于混合表/ css方法作为最实用的方法.具有讽刺意味的是,这也是因为可访问性.曾经尝试过在Sidekick上做CSS吗？什么样的恶梦!曾经见过如何在新浏览器上呈现基于CSS的网站？元素会重叠或只是无法正确显示我必须关闭CSS.曾经尝试调整基于CSS的网站的大小？如果他们在浏览器中使用缩放功能,它们看起来很糟糕并且经常对盲人有害!如果你使用表格,那么它们的扩展性会更好.当人们谈论可访问性时,我发现很多人都没有线索,这让我很烦,因为我是残疾人而他们不是.他们真的和盲人一起工作过吗？聋人？如果可访问性是主要问题,为什么99%的视频没有封闭标题？许多CSS纯粹主义者使用AJAX但没有意识到AJAX经常使内容无法访问.

实际上,可以将单个表作为主要布局使用LONG,因为如果单元格是堆叠的(您在移动设备上看到的东西),则在逻辑流程中提供信息.CSS理论听起来很棒但在现实生活中部分可行,有太多黑客攻击,这违背了"纯洁"的理想.

由于使用CSS with tables方法,我节省了大量设计网站的时间,并且维护更加容易.更少的黑客,更直观.我收到的电话更少,说"我插入了一个DIV,现在它看起来都搞砸了!" 更重要的是,绝对没有可访问性问题.

4> Jorge Córdob..：

通常,每当您不使用表格提供布局时.

表 - >数据

分区 - >布局

(主要是)

5> JacquesB..：

注意:在询问问题时,出于某些布局目的使用表格的实际原因.由于浏览器的改进,这不再是必要的,所以我更新了答案.

当数据在逻辑上具有二维结构时,应使用HTML -elements.如果数据可以按行和列结构化,并且您可以有意义地将标题应用于行和列,那么您可能具有表格数据.

我只有一行或一列数据,那么它不是表格数据 - 它只是线性内容.在将其视为表格数据之前,您至少需要两行和两列.

一些例子:

使用表格放置侧边栏和页眉/页脚.这不是表格数据,而是页面布局.像css grid或flexbox这样的东西更合适.

将表用于报纸式列.这不是表格数据 - 您仍然可以线性读取它.像css列这样的东西更合适.

6> Radu094..：

我会区分公共网站的HTML(表no-no-no,divs yes-yes-yes)和半公共或私有Web应用程序的HTML,我倾向于更喜欢表甚至页面布局.

"表格不好"的大多数可敬的原因通常只是针对公共网站的问题,而不是webapps的问题.如果我可以通过使用TABLE而不是复杂的CSS + DIV来获得相同的布局并且在浏览器之间具有更一致的外观,那么我通常会继续使用TABLE.

7> Pat..：

正如许多海报已经提到的那样,您应该使用表格来显示表格数据.

表格在HTML 3.2中引入,这里是关于其用法的规范中的相关段落:

[tables]可用于标记表格材料或用于布局目的......

@Matthew:HTML 3.2充满了表现性的html,比如FONT-tag,BGCOLOR属性等.这是当时的折衷方案(因为这些标签是由Netscape引入并广泛使用的),但是表现性的html从未被认为是好的练习,其中大部分都在HTML 4中再次被弃用.

8> PJ...：

同意托马斯 - 一般的经验法则是如果在spreedsheet上有意义,你可以使用表格.否则不是.

只是不要使用表格作为页面的布局,这是人们对它们的主要问题.

9> Ben Scheirma..：

我可以看到表格的表格的论点,但有一个更好的选择...你只需要卷起袖子学习CSS.

例如:


  New Blog Post

  Title:
  

  Body:

您可以使用该html并将表单布局为并排标签或文本框顶部的标签(这更容易).拥有灵活性确实有帮助.它的HTML也比同等表的HTML少.

有关CSS表单的一些优秀示例,请查看以下优秀示例:

http://jeffhowden.com/code/css/forms/

http://www.sitepoint.com/article/fancy-form-design-css/

http://www.smashingmagazine.com/2006/11/11/css-based-forms-modern-solutions/



10> Chuck..：
我通常会选择表格来显示表格类型信息(名字,姓氏,地址等),其中多行的衬里标签和字段很重要.我用于布局的DIV.

当然桌子是用DIV包裹的:)

        但修复宽度是不是更错？宽度应该是字体大小的乘积,尤其是.考虑输出媒体上的可访问性和差异.并且应该定义更多宽度比(可能是最小/最大尺寸,以合适的单位),而不是绝对尺寸.     

    

    

    
        推荐阅读
        
            
                                
                    
                        程序员
                        调用函数时将列表转换为*args
                    

                    
                                                
                        如何解决《调用函数时将列表转换为*args》经验，为你挑选了2个好方法。 ...
                        [详细]
                    
                    

                


                                
                    
                        程序员
                        通过引用递归函数
                    

                    
                                                
                        如何解决《通过引用递归函数》经验，为你挑选了1个好方法。 ...
                        [详细]
                    
                    

                


                                
                    
                        程序员
                        获取.net 4中的连接字符串
                    

                    
                                                
                        如何解决《获取.net4中的连接字符串》经验，为你挑选了3个好方法。 ...
                        [详细]
                    
                    

                


                                
                    
                        程序员
                        Visual C++/CLI(CLR)空指针
                    

                    
                                                
                        如何解决《VisualC++/CLI(CLR)空指针》经验，为你挑选了1个好方法。 ...
                        [详细]
                    
                    

                


                                
                    
                        程序员
                        使用Javascript变量设置Cookie域
                    

                    
                                                
                        如何解决《使用Javascript变量设置Cookie域》经验，为你挑选了1个好方法。 ...
                        [详细]
                    
                    

                


                                
                    
                        程序员
                        用"&nbsp;"替换空白区域 使用Jquery
                    

                    
                                                
                        如何解决《用"&nbsp;"替换空白区域使用Jquery》经验，为你挑选了1个好方法。 ...
                        [详细]
                    
                    

                


                                
                    
                        程序员
                        我可以从Firebug的Net面板中复制网页发出的HTTP请求列表吗？
                    

                    
                                                
                        如何解决《我可以从Firebug的Net面板中复制网页发出的HTTP请求列表吗？》经验，为你挑选了1个好方法。 ...
                        [详细]
                    
                    

                


                                
                    
                        程序员
                        Oracle"(+)"运算符
                    

                    
                                                
                            
                        
                                                
                        如何解决《Oracle"(+)"运算符》经验，为你挑选了4个好方法。 ...
                        [详细]
                    
                    

                


                                
                    
                        程序员
                        如何在groovy中进行方法别名？
                    

                    
                                                
                        如何解决《如何在groovy中进行方法别名？》经验，为你挑选了1个好方法。 ...
                        [详细]
                    
                    

                


                                
                    
                        程序员
                        C++初始化匿名结构
                    

                    
                                                
                        如何解决《C++初始化匿名结构》经验，为你挑选了1个好方法。 ...
                        [详细]
                    
                    

                


                                
                    
                        程序员
                        正则表达式:^和\ A之间的差异
                    

                    
                                                
                        如何解决《正则表达式:^和\A之间的差异》经验，为你挑选了1个好方法。 ...
                        [详细]
                    
                    

                


                                
                    
                        程序员
                        查找对象数组中属性的最大值
                    

                    
                                                
                        如何解决《查找对象数组中属性的最大值》经验，为你挑选了9个好方法。 ...
                        [详细]
                    
                    

                


                                
                    
                        程序员
                        mysql二进制比较不使用索引
                    

                    
                                                
                        如何解决《mysql二进制比较不使用索引》经验，为你挑选了0个好方法。 ...
                        [详细]
                    
                    

                


                                
                    
                        程序员
                        如何开始使用Visual Basic for Applications？
                    

                    
                                                
                        如何解决《如何开始使用VisualBasicforApplications？》经验，为你挑选了4个好方法。 ...
                        [详细]
                    
                    

                


                                
                    
                        程序员
                        汇编语言中的选择排序
                    

                    
                                                
                        如何解决《汇编语言中的选择排序》经验，为你挑选了1个好方法。 ...
                        [详细]
                    
                    

                


                                
                    
                        程序员
                        取消UIView动画
                    

                    
                                                
                        如何解决《取消UIView动画》经验，为你挑选了1个好方法。 ...
                        [详细]
                    
                    

                


                                
                    
                        程序员
                        android禁用音频控制器的搜索栏
                    

                    
                                                
                        如何解决《android禁用音频控制器的搜索栏》经验，为你挑选了1个好方法。 ...
                        [详细]
                    
                    

                


                                
                    
                        程序员
                        PHP:我可以在array_map函数中获取索引吗？
                    

                    
                                                
                        如何解决《PHP:我可以在array_map函数中获取索引吗？》经验，为你挑选了2个好方法。 ...
                        [详细]
                    
                    

                


                                
                    
                        程序员
                        linux的sort命令的不寻常行为
                    

                    
                                                
                        如何解决《linux的sort命令的不寻常行为》经验，为你挑选了1个好方法。 ...
                        [详细]
                    
                    

                


                                
                    
                        程序员
                        android无法通过通知播放声音
                    

                    
                                                
                        如何解决《android无法通过通知播放声音》经验，为你挑选了1个好方法。 ...
                        [详细]
                    
                    

                


                

            
        
    

    
        吐了个 "CAO" !
        
            
                吐个槽吧,看都看了
            
            
                
                                        会员登录 | 用户注册
                                    
                
            
        

        
    























    

    
        
            
            
                
                    
                
            

            
                保佑欣疼你的芯疼            

            
                这个屌丝很懒，什么也没留下！            
            
            

                                
                    
                    关注作者
                            

        
    


    
        Tags | 热门标签
        
            
                                
                    ajax
                
                                
                    bootstrap
                
                                
                    chart
                
                                
                    chrome
                
                                
                    css
                
                                
                    css3
                
                                
                    firebug
                
                                
                    firefox
                
                                
                    html
                
                                
                    html5
                
                                
                    javascript
                
                                
                    jquery
                
                                
                    json
                
                                
                    node.js
                
                                
                    npm
                
                                
                    postman
                
                                
                    vue.js
                
                                
                    webkit
                
                                
            
        
    


    
        RankList | 热门文章
        
            
                                
                    1为什么我不能在"while"上称之为"gist"？(Perl 6)
                
                                
                    2如何在iOS 8和9中14天后重复本地通知
                
                                
                    3Apple News使用什么来确定何时显示图像？
                
                                
                    4Nodejs承诺不能正常工作？
                
                                
                    5Spring Stomp Web Sockets Client for Android
                
                                
                    6ObjectList/Repeater的QML DefaultProperty
                
                                
                    7如何在IntelliJ中一次对多个错误应用“快速修复”？
                
                                
                    8给出ReferenceError的mocha命令:未定义窗口
                
                                
                    9如何使用PHP获取服务器响应时间
                
                                
                    10CUDA流压缩算法
                
                                
                    11ListView.set.adapter导致NullPointerException
                
                                
                    12如果在Swift中为nil,那么赋值的速记？
                
                                
                    13警告:"pecl/mongo"已弃用,以支持"channel:/// mongodb"
                
                                
                    14条纹Webhook响应
                
                                
                    15使用dplyr删除所有列总和为零
                
                                
                    16在C中请求密码程序
                
                                
                    17在PHP7 Apache/2.4.7(Ubuntu)上安装phpmyadmin时遇到问题
                
                                
                    18使用javascript正则表达式从字符串中提取子字符串
                
                                
                    19在laravel 4中使用bootstrap datepicker时,在昨天之前禁用日期
                
                                
                    20在HTML5 SharedWorker中的socket.io Websocket连接
                
                            
        
    


    






    DevBox开发工具箱 | 专业的在线开发工具网站    京公网安备 11010802040832号  |  京ICP备19059560号-6 

    Copyright © 1998 - 2020 DevBox.CN. All Rights Reserved  devBox.cn 开发工具箱  版权所有