表而不是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包裹的:)

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

    

    

    
        推荐阅读
        
            
                                
                    
                        程序员
                        如何在Chrome浏览器中的Chrome网站上添加主屏幕横幅广告？
                    

                    
                                                
                        如何解决《如何在Chrome浏览器中的Chrome网站上添加主屏幕横幅广告？》经验，为你挑选了1个好方法。 ...
                        [详细]
                    
                    

                


                                
                    
                        程序员
                        如何移动到离子上的下一个输入字段
                    

                    
                                                
                        如何解决《如何移动到离子上的下一个输入字段》经验，为你挑选了0个好方法。 ...
                        [详细]
                    
                    

                


                                
                    
                        程序员
                        Webgl:最远的飞机能见度
                    

                    
                                                
                        如何解决《Webgl:最远的飞机能见度》经验，为你挑选了1个好方法。 ...
                        [详细]
                    
                    

                


                                
                    
                        程序员
                        使用scanf for for循环
                    

                    
                                                
                        如何解决《使用scanfforfor循环》经验，为你挑选了1个好方法。 ...
                        [详细]
                    
                    

                


                                
                    
                        程序员
                        函数中传递地址和大小的点
                    

                    
                                                
                        如何解决《函数中传递地址和大小的点》经验，为你挑选了0个好方法。 ...
                        [详细]
                    
                    

                


                                
                    
                        程序员
                        如何检查是否存在第二个参数
                    

                    
                                                
                        如何解决《如何检查是否存在第二个参数》经验，为你挑选了1个好方法。 ...
                        [详细]
                    
                    

                


                                
                    
                        程序员
                        检查序列的列表
                    

                    
                                                
                        如何解决《检查序列的列表》经验，为你挑选了1个好方法。 ...
                        [详细]
                    
                    

                


                                
                    
                        程序员
                        如何将C运行时库与'ld'链接？
                    

                    
                                                
                        如何解决《如何将C运行时库与'ld'链接？》经验，为你挑选了1个好方法。 ...
                        [详细]
                    
                    

                


                                
                    
                        程序员
                        在列表中通过正则表达式过滤字符串
                    

                    
                                                
                        如何解决《在列表中通过正则表达式过滤字符串》经验，为你挑选了2个好方法。 ...
                        [详细]
                    
                    

                


                                
                    
                        程序员
                        Hadoop 2.6在/0.0.0.0:8032连接到ResourceManager
                    

                    
                                                
                        如何解决《Hadoop2.6在/0.0.0.0:8032连接到ResourceManager》经验，为你挑选了0个好方法。 ...
                        [详细]
                    
                    

                


                                
                    
                        程序员
                        如何在Safari中"复制为卷曲"？
                    

                    
                                                
                        如何解决《如何在Safari中"复制为卷曲"？》经验，为你挑选了0个好方法。 ...
                        [详细]
                    
                    

                


                                
                    
                        程序员
                        grep*做什么？
                    

                    
                                                
                        如何解决《grep*做什么？》经验，为你挑选了1个好方法。 ...
                        [详细]
                    
                    

                


                                
                    
                        程序员
                        如何使用ffprobe确定webm持续时间
                    

                    
                                                
                        如何解决《如何使用ffprobe确定webm持续时间》经验，为你挑选了1个好方法。 ...
                        [详细]
                    
                    

                


                                
                    
                        程序员
                        JavaFX将值从子级传递给父级
                    

                    
                                                
                        如何解决《JavaFX将值从子级传递给父级》经验，为你挑选了1个好方法。 ...
                        [详细]
                    
                    

                


                                
                    
                        程序员
                        getSupportActionBar().setTitle()vs toolbar.setTitle()
                    

                    
                                                
                        如何解决《getSupportActionBar().setTitle()vstoolbar.setTitle()》经验，为你挑选了1个好方法。 ...
                        [详细]
                    
                    

                


                                
                    
                        程序员
                        Flask永久会话:在哪里定义它们？
                    

                    
                                                
                        如何解决《Flask永久会话:在哪里定义它们？》经验，为你挑选了1个好方法。 ...
                        [详细]
                    
                    

                


                                
                    
                        程序员
                        ASP.Net 4非MVC API路由处理程序设计
                    

                    
                                                
                        如何解决《ASP.Net4非MVCAPI路由处理程序设计》经验，为你挑选了0个好方法。 ...
                        [详细]
                    
                    

                


                                
                    
                        程序员
                        如何在VC++中毒化标识符？
                    

                    
                                                
                        如何解决《如何在VC++中毒化标识符？》经验，为你挑选了1个好方法。 ...
                        [详细]
                    
                    

                


                                
                    
                        程序员
                        Python-Eve：在插入数据库之前，使用请求前事件挂钩修改数据
                    

                    
                                                
                        如何解决《Python-Eve：在插入数据库之前，使用请求前事件挂钩修改数据》经验，为你挑选了1个好方法。 ...
                        [详细]
                    
                    

                


                                
                    
                        程序员
                        为什么函数签名具有跟随其他参数的单位参数？
                    

                    
                                                
                        如何解决《为什么函数签名具有跟随其他参数的单位参数？》经验，为你挑选了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在ios的背景中连续显示"打开蓝牙以允许应用程序连接到附件"警报消息
                
                                
                    2如何检查javascript数组中是否存在密钥？
                
                                
                    3按位AND和OR运算的说明
                
                                
                    4max在一组列表上做了什么？
                
                                
                    5在R中的函数中保存单个对象：RData文件的大小非常大
                
                                
                    6以4k(3840*2160)分辨率缩放Tkinter GUI？
                
                                
                    7基于已安装的引擎,使用url_for获取基于约束的url
                
                                
                    8当app强制退出时如何恢复下载？
                
                                
                    9改变Tx蓝牙Linux无效
                
                                
                    10如何在Aurelia repeat.for中有条件地添加或删除CSS类？
                
                                
                    11ForkJoinPool.invoke()和ForkJoinTask.invoke()或compute()
                
                                
                    12多个广告尺寸的Google广告会导致失败
                
                                
                    13正则表达式(C#)对于RFC 4180的CSV
                
                                
                    14IntelliJ  - 查找未记录的公共方法
                
                                
                    15与'wss:// ...'的WebSocket连接失败:连接建立错误:net :: ERR_CONNECTION_CLOSED
                
                                
                    16为什么要将String转换为String？
                
                                
                    17c中的typedef枚举说明
                
                                
                    18用于组件的Typescript Angular 1.5 defintion文件
                
                                
                    19由于"signed char"和"char",系统头文件中的重定义错误
                
                                
                    20在行删除时如何获取gridview行值？
                
                            
        
    


    






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

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