it-swarm.cn

为什么不在HTML中使用表格进行布局?

似乎是 一般意见 表不应该用于HTML中的布局。

为什么?

我从来没有(或很少诚实地)看到这方面的好论据。通常的答案是:

  • 将内容与布局分开是好的
    但这是一个谬误的论点; 陈词滥调 。我想使用表格元素进行布局与表格数据几乎没有关系。所以呢?我的老板在乎吗?我的用户在乎吗?

    也许我或我的开发人员必须维护一个网页关注......一个表不易维护吗?我认为使用表是 更容易 比使用div和CSS。

    顺便说一句......为什么使用div或span将内容与布局和表格分开?只使用div来获得一个好的布局通常需要很多嵌套的div。

  • 代码的可读性
    我认为这是相反的方式。大多数人都懂HTML,很少有人理解CSS。

  • SEO最好不要使用表格
    为什么?任何人都可以证明它是有证据的吗?或谷歌发表的声明表示,从SEO的角度来看,表格是不受欢迎的?

  • 表格较慢。
    必须插入额外的tbody元素。这是现代网络浏览器的花生。向我展示一些基准,其中使用表会显着减慢页面的速度。

  • 如果没有桌子,布局检修会更容易,请参阅 css Zen Garden
    大多数需要升级的网站也需要新内容(HTML)。新版本的网站只需要一个新的CSS文件的场景不太可能。 Zen Garden是一个不错的网站,但有点理论上。更不用说它 滥用 CSS。

我真的对使用divs + CSS而不是表格的好参数感兴趣。

665
Benno Richters

我将一个接一个地查看你的论点并尝试在其中显示错误。

将内容与布局分开是件好事但这是一个错误的论点;陈词滥调。

这根本不是谬误,因为HTML是故意设计的。滥用一个元素可能不是完全不可能的(毕竟,新的习语也用其他语言发展)但可能的负面影响必须得到平衡。此外,即使今天没有反对滥用<table>元素的论据,也可能会有明天,因为浏览器供应商对元素应用特殊处理方式。毕竟,他们知道“<table>元素仅用于表格数据”并且可能会使用这个事实来改进渲染引擎,在此过程中巧妙地改变<table>的行为方式,从而打破以前被误用的情况。

所以呢?我的老板在乎吗?我的用户在乎吗?

要看。你老板尖头发吗?然后他可能不在乎。如果她有能力,那么她会关心,因为用户

也许我或我的开发人员必须维护一个网页关注......一个表不易维护吗?我认为使用表比使用div和css更容易。

大多数专业网站开发人员似乎反对你[ 引用需要 ]。那些表实际上不太可维护应该是显而易见的。使用表格进行布局意味着更改公司布局实际上意味着更改每一页。这可能是 非常 昂贵。另一方面,明智地使用语义上有意义的HTML结合CSS 可能 将这些更改限制在CSS和使用的图片上。

顺便说一下...为什么使用div或span将内容与布局和表格分开?只使用div来获得一个好的布局通常需要很多嵌套的div。

深度嵌套的<div>s是一种反模式,就像表格布局一样。优秀的网页设计师不需要很多。另一方面,即使是这种深层嵌套的div也没有很多表格布局的问题。事实上,他们甚至可以通过逻辑划分部分内容来促进语义结构。

代码的可读性我认为这是另一种方式。大多数人都懂html,很少了解css。它更简单。

“大多数人”并不重要。专业人士很重要。对于专业人士而言,表格布局比HTML + CSS创造了更多问题。这就像说我不应该使用GVim或Emacs,因为记事本对大多数人来说更简单。或者我不应该使用LaTeX,因为MS Word对大多数人来说更简单。

SEO最好不要使用表格

我不知道这是否属实,不会将其作为论据,但这是合乎逻辑的。搜索引擎搜索 related data。虽然表格数据当然是相关的,但很少用户搜索。用户搜索页面标题中使用的术语或类似的显着位置。因此,将表格内容从过滤中排除并因此大大减少处理时间(和成本!)是合乎逻辑的。

表格较慢。必须插入额外的tbody元素。这是现代网络浏览器的花生。

额外的元素与表格较慢无关。另一方面,表的布局算法要困难得多,浏览器通常必须等待整个表加载才能开始布局内容。此外,布局的缓存将不起作用(CSS可以很容易地缓存)。之前已经提到过这一切。

向我展示一些基准,其中使用表会显着减慢页面的速度。

不幸的是,我没有任何基准数据。我自己会对此感兴趣,因为这个论点缺乏某种科学严谨性是正确的。

大多数需要升级的网站也需要新内容(html)。新版本的网站只需要新的css文件的情况不太可能发生。

一点也不。我曾经研究过几种情况,通过内容和设计的分离简化了设计。通常仍然需要更改一些HTML代码,但更改将始终更加局限。此外,有时必须动态地进行设计更改。考虑模板引擎,例如WordPress博客系统使用的模板引擎。表格布局实际上会杀死这个系统。我曾为类似的商业软件案件工作过。能够在不更改HTML代码的情况下更改设计是业务需求之一。

另一件事。表格布局使得自动解析网站(屏幕抓取)变得更加困难。这可能听起来微不足道,因为毕竟谁做到了?我很惊讶自己。如果相关服务不提供访问其数据的WebService替代方法,则屏幕抓取可以提供很多帮助。我在生物信息学领域工作,这是一个悲惨的现实。现代Web技术和Web服务尚未覆盖大多数开发人员,而且屏幕抓取通常是自动化获取数据过程的唯一方法。难怪许多生物学家仍然手动执行这些任务。对于数以千计的数据集。

497
Konrad Rudolph

这是我的程序员的答案来自 simliar线程

语义101

首先来看看这段代码,然后想一想这里有什么问题......

class car {
    int wheels = 4;
    string engine;
}

car mybike = new car();
mybike.wheels = 2;
mybike.engine = null;

当然,问题在于自行车不是汽车。汽车类对于自行车实例来说是不合适的类。代码没有错误,但语义不正确。它反映了程序员的糟糕表现。

语义102

现在将此应用于文档标记。如果您的文档需要显示表格数据,那么相应的标记将是<table>。但是,如果将导航放入表中,则会误用<table>元素的预期用途。在第二种情况下,您没有呈现表格数据 - 您(错误地)使用<table>元素来实现表达目标。

结论

访客会注意到吗?不,你老板在乎吗?也许。我们有时会像程序员一样偷工减料吗?当然。但是我们应该吗?不会。如果您使用语义标记,谁会受益?你 - 以及你的专业声誉。现在去做正确的事。

290
Carl Camera

明显的答案:见 CSS Zen Garden 。如果你告诉我你可以轻松地使用基于表格的布局(请记住 - HTML没有改变),那么一定要使用表格进行布局。

另外两个重要的事情是可访问性和SEO。

两者都关心信息的呈现顺序。如果基于表格的布局将其放在页面上第二个嵌套表格的第二行的第三个单元格中,则无法在页面顶部轻松显示导航。

所以你的答案是可维护性,可访问性和SEO。

不要偷懒。即使他们有点难以学习,也要做正确的事情。

104
erlando

请参阅此重复的问题。

您忘记的一个项目是可访问性。例如,如果您需要使用屏幕阅读器,则基于表格的布局也不会转换。如果您为政府工作,支持屏幕阅读器等可访问的浏览器可能是 required

我也认为你低估了你在问题中提到的一些事情的影响。例如,如果您既是设计师又是程序员,那么您可能无法完全理解它将表示与内容分开的程度。但是一旦你进入一个他们是两个不同角色的商店,优势就会变得更加清晰。

如果你知道自己在做什么并且拥有好的工具,那么CSS确实比布局表有明显的优势。虽然每个项目本身可能不合理放弃表格,但总的来说它是值得的。

91
Joel Coehoorn

不幸的是,CSS Zen Garden不能再被用作良好的HTML/CSS设计的例子。实际上,他们最近的所有设计都使用图形进行剖面标题。这些图形文件在CSS中指定。

因此,一个网站的目的是显示保持设计内容的优势,现在定期提交将内容放入设计的可行性。 (如果要更改HTML文件中的节标题,则不显示节标题)。

这只表明即使那些主张严格的DIV和CSS宗教,也不能遵循自己的规则。您可以将其作为指导,了解您如何密切关注它们。

54
James Curran

无论如何,这不是决定性的论点,但使用CSS,您可以采用相同的标记并根据介质更改布局,这是一个很好的优势。例如,对于打印页面,您可以安静地禁止导航,而无需创建适合打印的页面。

48
expedient

一张布局表不会那么糟糕。但是大多数时候你只能用一张桌子就无法获得所需的布局。很快你就会有2或3个嵌套表。这变得非常麻烦。

  • 它IS很难阅读。这不符合意见。只有更多的嵌套标签,它们上没有识别标记。

  • 将内容与演示文稿分开是一件好事,因为它可以让您专注于您正在做的事情。混合两个导致难以阅读的膨胀页面。

  • 样式的CSS允许您的浏览器缓存文件,后续请求更快。这太棒了。

  • 桌子锁定你的设计。当然,并不是每个人都需要CSS Zen Garden的灵活性,但我从未在一个我不需要在这里和那里稍微改变设计的网站上工作过。使用CSS更容易。

  • 桌子很难打造。你没有太多的灵活性(即你仍然需要添加HTML属性来完全控制表的样式)

我可能在4年内没有使用表格来表示非表格数据。我没有回头。

我真的很想建议阅读 CSS Mastery Andy Budd。这是梦幻般的。

图片来自ecx.images-Amazon.com http://ecx.images-Amazon.com/images/I/41TH5NFKPEL._SL500_BO2,204,203,200_PIsitb-dp-500-arrow,TopRight,45,-64_OU01_AA240_SH20_.jpg

45
Ben Scheirman

将内容与布局分开是很好的
但这是一个谬误的论点;陈词滥调

这是一个谬误的论点,因为HTML表格是布局!内容是表中的 data ,表示是表本身。这就是为什么有时从CSS中分离CSS非常困难的原因。你不是将内容与演示文稿分开,而是将演示文稿与演示文稿分开!一堆嵌套的div与表没有什么不同 - 它只是一组不同的标签。

将HTML与CSS分离的另一个问题是,他们需要彼此密切了解 - 你真的无法将它们完全分开。无论你做什么,HTML中的标签布局都与CSS文件紧密结合。

我认为table vs divs可以归结为你的应用程序的需求。

在我们开发的应用程序中,我们需要一个页面布局,其中的部分将动态调整其内容的大小。我花了几天时间尝试使用CSS和DIV进行跨浏览器工作,这是一个彻头彻尾的噩梦。我们切换到表格,它只是 工作

但是,我们的产品拥有非常封闭的受众(我们销售带有Web界面的硬件),并且我们不关心可访问性问题。我不知道为什么屏幕阅读器不能很好地处理表格,但我想如果这是它的方式,那么开发人员必须处理它。

36
17 of 26

CSS/DIV - 它只是设计男孩的工作,不是吗。我花了数百小时调试DIV/CSS问题,在互联网上搜索标记的一部分与一个不起眼的浏览器一起工作 - 这让我很生气。你做了一点改变,整个布局出现了可怕的错误 - 在那里,eath就是其中的逻辑。花费数小时以这种方式移动3像素,然后用另外两个像素移动它们以使它们全部排成一行。这对我来说似乎完全没错。仅仅因为你是一个纯粹主义者并且某些事情“不是正确的事情”并不意味着你应该在所有情况下使用它,特别是如果它让你的生活更轻松1000倍。

所以我最终决定,纯粹基于商业原因,虽然我保持最低限度使用,如果我预计20小时工作以正确放置DIV,我会坚持在桌子上。这是错误的,它使纯粹主义者感到不安,但在大多数情况下,它花费的时间更少,管理成本也更低。然后,我可以集中精力让应用程序按照客户的需要运行,而不是让纯粹主义者满意。他们确实支付了账单和我对执行CSS/DIV使用的经理的论证 - 我只想指出客户也支付他的工资!

所有这些CSS/DIV参数发生的唯一原因是由于CSS的缺点,并且因为浏览器彼此不兼容,如果它们是,那么世界上一半的网页设计师将失去工作。

当你设计一个Windows窗体时,你不要试图在放置它们之后移动控件,所以我觉得我很奇怪你为什么要用web表单来做这个。我根本无法理解这种逻辑。获得正确的布局以及问题所在。我认为这是因为设计人员喜欢调情创意,而应用程序开发人员则更关心的是实际使应用程序正常工作,创建业务对象,实现业务规则,确定客户数据的相互关系,确保客户满足客户需求要求 - 你知道 - 就像现实世界的东西。

不要误会我的意思,这两个论点都是有效的,但请不要批评开发人员选择更简单,更合理的方法来设计表单。我们经常要担心比在div上使用表格的正确语义更重要的事情。

举个例子 - 基于这个讨论,我将一些现有的tds和trs转换为div。 45分钟搞乱它试图让一切都排在一起,我放弃了。 TD在10秒后回来 - 直接在所有浏览器上工作,没有更多事情要做。请尽量让我理解 - 你有什么理由可以让我以任何其他方式去做!

23
Tim Black

布局应该很容易。有关如何在CSS中实现带有页眉和页脚的动态三列布局的文章的事实表明它是一个糟糕的布局系统。当然你可以让它工作,但在网上有数百篇关于如何做的文章。对于与表格类似的布局,几乎没有这样的文章,因为它显然是显而易见的。无论你对表和CSS表示什么,这一事实都解开了:CSS中基本的三列布局通常被称为“圣杯”。

如果这不能让你说“WTF”那么你真的需要现在放下kool-aid。

我喜欢CSS。它提供了令人惊叹的造型选项和一些很酷的定位工具,但作为布局引擎,它是有缺陷的。需要某种类型的动态网格定位系统。一种直接的方法,可以在不知道尺寸的情况下在多个轴上对齐方框。如果你把它称为<table>或<gridlayout>或其他什么,我不会给出该死的,但这是CSS缺少的基本布局功能。

更大的问题是,由于不承认缺少功能,CSS狂热者已经从可能的所有内容中恢复了CSS。如果CSS提供了像世界上基本上所有其他布局引擎一样体面的多轴网格定位,我会非常乐意停止使用表格。 (你确实意识到除了W3C以外,所有人都已经用多种语言多次解决了这个问题,对吗?没有其他人否认这样的功能很有用。)

叹。足够的发泄。来吧,把头伸回沙里。

21
needlestack

根据508合规性(对于视觉上受到影响的屏幕阅读器),表格应仅用于保存数据而不用于布局,因为它会导致屏幕阅读器发生故障。或者我被告知了。

如果为每个div指定名称,也可以使用CSS将它们全部整理在一起。按照你需要的方式来坐他们只是一种痛苦。

19
Rob

这是最近一个项目的html部分:

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
    <title>{DYNAMIC(TITLE)}</title>
    <meta http-equiv="content-type" content="text/html;charset=utf-8" />
    <meta http-equiv="Content-Style-Type" content="text/css" />
    <link rel="stylesheet" type="text/css" href="./styles/base.css" />
</head>
<body>
    <div id="header">
        <h1><!-- Page title --></h1>
        <ol id="navigation">
            <!-- Navigation items -->
        </ol>
        <div class="clearfix"></div>
    </div>
    <div id="sidebar">
        <!-- Sidebar content -->
    </div>
    <!-- Page content -->
    <p id="footer"><!-- Footer content --></p>
</body>
</html>

这是与基于表格的布局相同的代码。

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
    <title>{DYNAMIC(TITLE)}</title>
    <meta http-equiv="content-type" content="text/html;charset=utf-8" />
    <meta http-equiv="Content-Style-Type" content="text/css" />
    <link rel="stylesheet" type="text/css" href="./styles/base.css" />
</head>
<body>
    <table cellspacing="0">
        <tr>
            <td><!-- Page Title --></td>
            <td>
                <table>
                    <tr>
                        <td>Navitem</td>
                        <td>Navitem</td>
                    </tr>
                </table>
            </td>
        </tr>
    </table>

    <table>
        <tr>
            <td><!-- Page content --></td>
            <td><!-- Sidebar content --></td>
        </tr>
        <tr>
            <td colspan="2">Footer</td>
        </tr>
    </table>
</body>
</html>

我在基于表格的布局中看到的唯一清洁是我对我的缩进过度热心的事实。我确信内容部分还有两个嵌入式表。

另一件需要考虑的事情: filesizes 。我发现基于表格的布局通常是CSS对应的两倍。在我们的高速宽带上,这不是一个大问题,但它是在拨号调制解调器的人。

18
Ross

我想补充一点,基于div的布局更容易保持,进化和重构。只需对CSS进行一些更改即可重新排序元素并完成。根据我的经验,重新设计使用表的布局是一场噩梦(如果有嵌套表,则更多)。

您的代码也具有来自 语义 观点的含义。

14
Guido

CSS布局通常对于可访问性要好得多,只要内容以自然顺序出现并且没有样式表就有意义。而且,屏幕阅读器不仅仅是基于表格的布局:它们也使移动浏览器更难以正确呈现页面。

此外,使用基于div的布局,您可以非常轻松地使用打印样式表来执行很酷的操作,例如从打印页面中排除页眉,页脚和导航 - 我认为使用打印页面执行此操作是不可能的,或者至少要困难得多。基于表格的布局。

如果你怀疑使用div而不是使用表格来分离内容与布局的分离,请查看 CSS Zen Garden中的基于div的HTML ,看看如何更改样式表可以彻底改变布局,并思考关于在基于表格的情况下是否可以实现相同种类的布局...如果您正在进行基于表格的布局,则不太可能使用CSS来控制单元格中的所有间距和填充(如果你是,你几乎肯定会发现在第一时间使用浮动div等更容易。不使用CSS来控制所有这些,并且由于表格指定HTML中从左到右和从上到下的顺序,表格往往意味着您的布局在HTML中变得非常固定。

实际上我认为在不改变div的情况下完全改变基于div和CSS的设计的布局是非常困难的。但是,使用基于div和CSS的布局,可以更容易地调整各种块之间的间距以及它们的相对大小。

13
MB.

事实上这是一个激烈争论的问题,这证明了W3C未能预测将要尝试的布局设计的多样性。使用divs + css进行语义友好的布局是一个很好的概念,但实现的细节是如此有缺陷,以至于它们实际上限制了创作自由。

我试图将我们公司的一个站点从桌子切换到divs,这让我很头疼,因为我完全放弃了我投入的工作时间并回到了桌子上。试图与我的divs搏斗以获得对垂直对齐的控制已经诅咒我的主要心理问题,只要这场辩论肆虐,我将永远不会动摇。

人们必须经常提出复杂而丑陋的变通方法以实现简单的设计目标(例如垂直对齐)这一事实强烈地表明规则不够灵活。如果规格足够,那么为什么高调的网站(如SO)发现有必要使用表和其他解决方法来修改规则?

13
DLH

DIV中没有任何论据对我有利。

我会说:如果鞋子适合,请穿上它。

值得注意的是,如果不是不可能找到一个好的DIV + CSS方法来渲染内容在两列或三列中,这在所有浏览器中都是一致的,并且仍然看起来像我想要的那样。

在我的大多数布局中,这给平衡提供了一点平衡,尽管我感到内疚使用它们(dunny为什么,人们只是说它很糟糕所以我试着听它们),最后,实用主义观点是它只是我更容易和更快地使用TABLE。我没有按小时付款,所以桌子对我来说更便宜。

13
Radu094

我想使用表格元素进行布局与表格数据几乎没有关系。所以呢?我的老板在乎吗?我的用户在乎吗?

谷歌和其他自动化系统关心,在许多情况下它们同样重要。对于非智能系统来说,语义代码更容易解​​析和处理。

12
ceejayoz

由于必须使用涉及由某些应用程序生成的6层嵌套表的网站,并且已经生成了无效的HTML,实际上是一个3小时的工作来纠正它以打破一个小的改变。

这当然是边缘情况,但基于表格的设计是不可维护的。如果你使用css,你将样式分开,所以在修复HTML时你不必担心破坏。

另外,请尝试使用JavaScript。将单个表格单元格从一个位置移动到另一个表格中的另一个位置。执行相当复杂的div/span只能复制粘贴。

“老板在乎吗”

如果我是你的老板。你会在乎的。 ;)如果你重视自己的生活。

8
Kent Fredric

布局灵活性
想象一下,你正在创建一个包含大量缩略图的页面。
DIVs
如果您将每个缩略图放在DIV中,向左浮动,可能其中10个适合连续。使窗口变窄,BAM - 它连续6个,或2个,或者多个适合。
表:
你必须明确说明连续多少个细胞。如果窗口太窄,则用户必须水平滚动。

可维护性
与上述情况相同。现在,您要向第三行添加三个缩略图。
DIV:
添加它们。布局将自动调整。
表: 将新单元格粘贴到第三行。 哎呀! 现在那里的物品太多了。从该行中切出一些并将它们放在第四行。现在那里的物品太多了。从那一排切掉一些...(等)
当然,如果您使用服务器端脚本生成行和单元格,这可能不是问题。

7
Nathan Long

我认为这艘船已经航行了。如果你看一下行业的发展方向,你会发现CSS和开放标准是该讨论的赢家。这反过来意味着大多数html工作,除了表单,设计师将使用div而不是表。我很难,因为我不是CSS大师,但就是这样。

7
Thomas Wagner

此外,请不要忘记,表格在移动浏览器上不能很好地呈现。当然,iPhone有一个kick-ass浏览器,但每个人都没有iPhone。表格渲染可以是现代浏览器的花生,但它是移动浏览器的一堆西瓜。

我个人发现许多人使用太多的<div>标签,但在适度的情况下,它可以非常干净且易于阅读。你提到人们阅读CSS比阅读表更难;在'代码'方面可能是真的;但是在阅读内容方面(视图>源代码),使用样式表比使用表格更容易理解结构。

5
Swati

看起来你只是习惯于表,就是这样。将布局放在表格中会限制您只使用该布局。使用CSS你可以移动位,看看 http://csszengarden.com/ 不,布局通常不需要很多嵌套的div。

由于没有用于布局和正确语义的表格,因此HTML更加清晰,因此更易于阅读。为什么不能理解CSS的人会尝试阅读它?如果有人认为自己是web开发者,那么掌握CSS是必须的。

SEO的好处来自于能够将最重要的内容放在页面上方并具有更好的内容到标记比率。

http://www.hotdesign.com/seybold/

5
Rimantas

围绕语义标记的整个想法是标记和表示的分离,包括布局。

Div不是替换表,它们在将内容分成相关内容块(,)时有自己的用途。当您没有技能并且依赖于表格时,您通常必须将内容分离到单元格以获得所需的布局,但在使用语义标记时,您不需要触摸标记来实现演示。在生成标记而不是静态页面时,这非常重要。

开发人员需要停止提供暗示布局的标记,以便我们这些具有呈现内容技能的人可以继续我们的工作,并且开发人员不必回到他们的代码来在演示需求发生变化时进行更改。

5
Steve Perks
  • 508合规性 - 屏幕阅读器能够理解您的标记。
  • 等待渲染 - 表格不会在浏览器中呈现,直到它到达</table>元素的末尾。
5
Rick Glos

这不是关于'divs是否比布局表更好'。理解CSS的人可以非常直接地使用“布局表”复制任何设计。真正的胜利是使用HTML元素来实现它们的目的。您不将表用于非表格数据的原因与您不将整数存储为字符串的原因相同 - 当您将其用于设计目的时,技术可以更轻松地工作。如果有必要使用表格进行布局(由于20世纪90年代早期的浏览器缺点),它肯定不是现在。

4
domgblackwell

值得搞清楚CSS和div,以便中心内容列在页面布局中的侧边栏之前加载和渲染。但是,如果您正在努力使用浮动div来将徽标与某些赞助文本垂直对齐,只需使用该表并继续生活。禅宗园的宗教信仰并没有带来太多的好处。

将内容与表示分离的想法是对应用程序进行分区,以便不同类型的工作影响不同的代码块。这实际上是关于变革管理。但是编码标准只能以肤浅的方式检查代码的当前状态。

依赖于编码标准“将内容与表示分离”的应用程序的更改日志将显示跨垂直孤岛的并行更改模式。如果对“内容”的更改总是伴随着“演示”的更改,那么分区有多成功?

如果您真的想要高效地对代码进行分区,请使用Subversion并查看更改日志。然后使用最简单的编码技术 - div,表,JavaScript,包含,函数,对象,延续,等等 - 来构建应用程序,以便以简单和舒适的方式进行更改。

3
Patrick May

表不是通常比CSS更容易或更易于维护。但是,有一些特定布局问题,其中表确实是最简单和最灵活的解决方案。

在表示性标记和CSS支持相同类型的设计的情况下,CSS显然更可取,没有人会认为font-标签比在CSS中指定排版更好,因为CSS提供的功能与font-标签相同,但是以更清洁的方式。

但是,表的问题基本上是Microsoft Internet Explorer中不支持CSS中的表布局模型。因此,表和CSS是not等效的。缺少的部分是 类似网格的行为 表,其中单元格的边缘垂直和水平对齐,而单元格仍然展开以包含其内容。在没有硬编码某些维度的情况下,这种行为在纯CSS中很难实现,这使得设计变得僵硬和脆弱(只要我们必须支持Internet Explorer - 在其他浏览器中,这很容易通过使用display:table-cell来实现)。

因此,表格或CSS是否更可取的问题并不是真正的问题,但这是一个关于识别使用表格可以使布局更灵活的特定情况的问题。

not使用表的最重要原因是可访问性。 Web内容可访问性指南 http://www.w3.org/TR/WCAG10/ advice再次使用表格进行布局。如果您担心可访问性(在某些情况下您可能在法律上有义务),即使表格更简单,您也应该使用CSS。请注意,您可以始终使用CSS创建与表相同的布局,它可能只需要更多的工作。

3
JacquesB

由于创建布局所需的代码量,使用表格布局的工具可能会变得异常沉重。默认情况下,SAP的Netweaver Portal使用TABLE来布局其页面。

我当前演出的生产SAP门户有一个主页,其HTML重量超过60K,深度为七个表,在页面内三次。添加Javascript,误用16个内部类似表问题的iframe,过于繁重的CSS等,页面重量超过5MB。

花时间降低页面重量,以便您可以利用带宽与用户进行互动活动,这是值得的。

3
Mike Cornell

DOM操作在基于表格的布局中很难实现。

使用语义div:

$('#myawesomediv').click(function(){
    // Do awesome stuff
});

有桌子:

$('table tr td table tr td table tr td.......').click(function(){
    // Cry self to sleep at night
});

现在,被授予,第二个例子是一种愚蠢的,你总是可以将ID或类应用于表或td元素,但这将增加语义值,这是表支持者如此强烈反对的。

3
Chris Fletcher

我很惊讶地看到一些问题尚未涵盖,所以这里是我的2美分,除了之前提出的所有非常有效的观点:

0.1。 CSS和SEO:

a)CSS通常允许在页面中的任何位置放置内容,从而对SEO产生非常重要的影响。几年前,搜索引擎一直非常重视“页面上”因素。页面顶部的某些内容被认为与页面的相关性高于位于底部的内容。蜘蛛的“页面顶部”意味着“在代码的开头”。使用CSS,您可以在代码的开头组织关键字丰富的内容,并将其放置在页面中您喜欢的任何位置。这仍然有些相关,但页面因素对页面排名的重要性越来越小。

b)当布局移动到CSS时,HTML页面更轻,因此加载搜索引擎蜘蛛的速度更快。 (蜘蛛不打扰下载外部css文件)。快速加载页面是包括Google在内的多个搜索引擎的重要排名考虑因素

c)SEO工作通常需要测试和更改事物,这对于基于CSS的布局来说更方便

0.2。 生成的内容:

与等效的CSS布局相比,表格更容易编程生成。

foreach ($comment as $key=>$value)
{
   echo "<tr><td>$key</td><td>$value</td></tr>";
}

生成表格既简单又安全。它是独立的,可以很好地集成到任何模板中。使用CSS做同样的事情是相当困难的,可能根本没有任何好处:难以编辑飞行中的CSS样式表,添加样式内联与使用表格没有区别(内容不与布局分开)。

此外,当生成表时,内容(在变量中)已经与布局(在代码中)分离,使其易于修改。

这就是为什么一些设计精良的网站(例如SO)仍然使用表格布局的原因之一。

当然,如果需要通过JavaScript对结果采取行动,div就值得一试。

0.3。 快速转换测试

在找出适合特定受众的内容时,能够以各种方式更改布局以确定哪些内容可以获得最佳结果非常有用。基于CSS的布局使事情变得相当容易

0.4。 针对不同问题的不同解决方案

布局表通常被废除,因为“每个人都知道div和CSS”是要走的路。

然而事实上,表格创建起来更快,更易于理解,并且比大多数CSS布局更强大。 (是的,CSS可以很强大,但在不同的浏览器和屏幕分辨率上通过网络快速浏览表明它并不常见)

桌子有许多缺点,包括维护,缺乏灵活性......但是不要让宝宝洗澡用水。解决方案有很多专业用途,既快速又可靠。

前段时间,我不得不使用表重写一个干净简单的CSS布局,因为很大一部分用户会使用旧版本的IE,而CSS的支持非常糟糕

就我而言,我厌倦了下意识的反应“哦,不!表格布局!”

至于“它不是为了这个目的,因此你不应该这样使用它”的人群,是不是那种虚伪?您如何看待在大多数浏览器中使用的所有CSS技巧?他们是出于这个目的吗?

3
Sylverdrag

因为维护一个使用表的站点是很好的,并且需要更长的时间来编写代码。如果你害怕漂浮的div,那就去学习吧。它们并不难理解,它们的效率大约高出100倍,而屁股的痛苦减少了一百万倍(除非你不理解它们 - 但是,嘿,欢迎来到电脑世界)。

任何考虑使用表格进行布局的人都不希望我维护它。这是呈现网站最倒退的方式。感谢上帝,我们现在有一个更好的选择。我永远不会回去。

令人害怕的是,有些人可能不会意识到使用现代工具创建网站所带来的时间和能量效益。

3
Chuck Le Butt
  1. 尝试合并/拆分10/20的深度colspan/rowspan。不止一次,我不得不压抑自己的直觉,开始与某人打架。 [!]
  2. 尝试更改源代码顺序而不更改可见顺序。 [SEO,可用性,......]
  3. 我们正在看的非常(非常简单)的页面是~150K。我敢打赌,使用适当的CSS几乎可以减半。 [SEO(是的,SEO,阅读最新的Google规范等),perfo,...]
  4. 尝试制作一个可以在任何宽度下工作的迭代器模板。
  5. 在这个基于表格的SO的媒介中讨论这个问题可以 引起一个奇点并摧毁我们所有人
2
Halil Özgür

严格区分表示和内容的问题让我大致类似于将头文件与C++中的实现文件分开。这是有道理的,但它也可能是一种痛苦。见证Java和C#,其中类在单个源文件中定义。较新语言的作者注意到一些导致程序员头疼的事情,他们摆脱了它。这似乎是这次讨论的要点。一方面说CSS太难了,另一方面说一个人必须成为CSS大师。

对于简单的布局问题,为什么不弯曲表示必须完全分开的规则呢?新标签(或div标签的一些扩展)如何允许我们直接在HTML中控制演示文稿?毕竟,我们不是已经将演示文稿泄露到HTML中吗?看看h1,h2 ...... h6。我们都知道这些控制演示。

读取代码(和HTML是代码)的能力非常重要。大师倾向于忽视使编程环境尽可能地为大众所接受的重要性。认为只有专业程序员才重要,这是非常短视的。

2
user825628

对我来说一个很大的问题是表格,特别是嵌套表格,比正确布局的css实现需要更长的时间来呈现。 (你 可以 使css一样慢)。

所有浏览器都会更快地渲染css,因为每个div都是一个单独的元素,因此可以在用户阅读时加载屏幕。 (对于大型数据集等)。我在那个实例中使用了css而不是表,甚至没有处理布局。

嵌套表(单元格内的表格等)在找到最后一个“/ table”之前不会呈现给浏览器窗口。更糟糕的是 - 一个定义不明确的表有时甚至不会渲染!或者当它发生时,事情就会行为不端。 (不要与“TD”等合适地进行深入研究)

我在大多数情况下使用表格,但是当涉及到大数据以及为最终用户快速渲染屏幕的愿望时 - 我会尽力利用CSS提供的功能。

2
Tim Fischer

我必须以这两种方式做网站,加上第三种,可怕的“混合”布局,包括表格,div和样式:Divs/CSS很方便。

你必须将三个div深度嵌套以匹配一个表格单元格的代码权重,直接蝙蝠。该效果与嵌套表一起扩展。

我也更喜欢进行一次布局更改,而不是对我网站中的每个页面进行一次更改。

我用divs/css完全控制演示的各个方面。桌子以可怕的方式搞乱,特别是在IE浏览器中,我从来没有选择不支持的浏览器。

我维护或重新设计divs/css网站的时间只是表格中的一小部分。

最后,我可以使用CSS和几乎任何脚本语言创新多个可切换的布局。对于桌子来说,这是不可能的。

在做出决定时,您的投资回报率会好运。

2
John Dunagan

例如:您希望将页面的主要内容区域居中,但为了包含其中的浮动内容,需要将其浮动。 CSS中没有“float:center”。

这不是在中心元素中“包含浮动”的唯一方法。所以,根本不是一个好的论据!

在某种程度上,这是一个错误的前提,即“divs vs tables”的事情。

将页面快速划分为三列?桌子更容易,说实话。但是没有专业人士再将它们用于布局,因为它们将页面元素的位置锁定在页面中。

真正的论点是“通过CSS完成定位(希望在远程文件中)”,而不是“在页面中通过HTML完成定位”。当然每个人都可以看到前者的好处而不是后者的好处?

  1. 大小 - 如果您的页面布局在HTML中,在页面中,它不能被缓存,并且必须在每个页面上重复。如果您的布局位于缓存的CSS文件中,而不是页面中,则可以节省大量带宽。
  2. 多个开发人员可以同时在同一页面上工作 - 我处理HTML,其他人在CSS上工作。不需要存储库,没有覆盖,文件锁定等问题。
  3. 进行更改更容易 - 不同浏览器中的布局会出现问题,但您只需修复一个文件即CSS文件即可对其进行排序。
  4. 可访问性,如前所述。表假设二维布局适用于每个人。这不是某些用户查看您的内容的方式,而是Google查看您的内容的方式。

考虑一下:

[ picture ] [ picture ] [ picture ]
[ caption ] [ caption ] [ caption ]

表示包含6个单元格的表的两行。能够看到二维表格布局的人会在每张图片下看到一个标题。但是使用语音合成或PDA,以及搜索引擎蜘蛛,就是这样

picture picture picture caption caption caption

随着桌子的到位显而易见的关系消失了。

DIV和CSS是否更适合于 简单地在HTML页面上布置矩形以在尽可能短的时间内实现给定的设计? 不,他们可能不是。但我不是在快速布置矩形来实现给定的设计。我想的是更大的画面。

2
AmbroseChapel

内容和布局之间的分离使您可以更轻松地为您的网站生成适合打印的布局或不同的皮肤(样式),而无需创建不同的html文件。某些浏览器(如Firefox)甚至支持从视图菜单中选择样式表。

而且我认为维持无表格布局更容易。您不必担心rowpans,colspans等。您只需创建一些container-div并将内容放在您需要的位置。而且我说它也更具可读性(<div id="sidebar"> vs <tr><td>...</td><td>...<td>sidebar</td></tr>)。

这只是你需要学习的一点'技巧'(一旦你掌握了这个技巧,我认为它更容易,更有意义)。

2
Grad van Horck

要回应“表格较慢”的论点 - 你正在考虑渲染时间,这是错误的指标。很多时候,开发人员会写出一个巨大的表来完成页面的整个布局 - 这大大增加了要下载的页面的大小。无论喜欢与否,仍然有大量的拨号用户。

另请参阅:过度使用ViewState

1
Greg Hurlman

从过去的经验来看,我不得不去DIV。即使在OOP中,主要目的是减少对象之间的耦合,因此这个概念可以应用于DIVS和表。表用于保存数据,而不是用于在页面周围排列。 DIV专门用于排列页面周围的项目,因此设计应使用DIV,表格应用于存储数据。

此外,编辑用表格制作的网站很难(在我看来)

1
Richard

div和CSS定位允许更灵活的设计,从而更容易修改和模板化您的网页。

也就是说,如果你对灵活性不感兴趣,那么使用表而不是通过CSS变形为表的某些div肯定会更容易和更快地敲除。我倾向于在敲击设计时使用表格,以使其看起来更快一点。

1
workmad3

当我使用CSS设计我的布局时,我通常会给每个主要部分提供自己的根(体级)div,并使用相对/绝对定位将其放入适当的位置。这比表格更灵活,因为我不限于我可以使用行和列表示的排列。

此外,如果我决定要重新排列布局(比如说我希望导航栏现在在右边),我可以简单地在一个地方改变元素的位置(CSS文件),HTML也不会。我必须改变。如果我使用表格进行操作,我将不得不进入并查找信息并进行大量属性修改,复制和粘贴以获得相同的效果。

事实上,使用CSS,我甚至可以让我的 用户 选择他们希望他们的布局如何工作。只要内容区域的一般大小没有改变,我就可以使用一些PHP scripting根据用户首选项输出我的CSS,并允许他们将网站重新排列为他们自己喜欢。再一次,可以使用表格,但更难以维护。

最后,CSS允许表永远不会提供的一个主要好处:能够根据显示设备重新格式化内容。 CSS允许我使用与我用于显示器的打印机完全不同的样式集(包括位置,格式等)。这也可以扩展到其他媒体,一个很好的例子是Opera Show,它允许一个巧妙设计(和非常标准)的CSS增强页面被视为幻灯片放映。

因此,最终,灵活性和管理才是真正的赢家。通常,CSS允许您对布局进行更多操作。关于基于表格的布局没有 技术上 非标准,但为什么要限制自己?

1
Nicholas Flynt

过去,屏幕阅读器和其他辅助功能软件难以有效地处理表格。在某种程度上,这在屏幕阅读器中由读者在“桌子”模式和“布局”模式之间切换来处理,这取决于它在桌子内看到的内容。这通常是错误的,因此用户在浏览表格时必须手动切换模式。在任何情况下,大型的,通常高度嵌套的表格在很大程度上仍然很难使用屏幕阅读器进行导航。

当div或其他块级元素用于重新创建表并且高度嵌套时,情况也是如此。 div的目的是用作fomating和layout元素,因此,用于保存类似的信息,并将其放在屏幕上供视觉用户使用。当屏幕阅读器遇到页面时,它经常忽略任何布局信息,基于CSS,以及基于html属性(对于所有屏幕阅读器都不是这样,但对于最流行的,例如JAWS,Windows Eyes和Orca for Linux就是这样)。

为此,表格数据,即具有逻辑意义的数据,可以在两个或多个维度中排序,具有某种标题,最好放在表格中,并使用div来管理页面上内容的布局。 (另一种思考“表格数据”的方法是尝试以图表的形式绘制它...如果你不能,它可能不是最好的表示在表格中)

最后,使用基于表的布局,为了实现对页面上元素位置的细粒度控制,经常使用高度嵌套的表。这有两个影响:1。)每页增加代码大小 - 由于导航和通用结构通常是使用表格完成的,因此每个请求都会通过网络发送相同的代码,而基于div/css的布局会提取css文件一次,然后使用较少的罗嗦div。 2.)高度嵌套的表需要更长时间才能使客户端的浏览器呈现,从而导致加载时间略微减慢。

在这两种情况下,“最后一英里”带宽的增加以及更快的个人计算机都可以减轻这些因素,但不过,它们仍然是许多站点存在的问题。

考虑到所有这些,正如其他人所说,表格更容易,因为它们更加面向网格,允许更少的思考。如果预计相关网站不会长期存在,或者无法维护,那么做最简单的工作可能是有意义的,因为它可能是最具成本效益的。但是,如果预期的用户群可能包含大部分残疾人,或者如果该网站将由其他人长期维护,那么花时间预先以简洁易懂的方式做事可能会最终得到更多回报。

1
cdeszaq

我仍然不太明白divs/CSS如何在考虑测试数量时更容易更改页面设计,以确保更改适用于所有浏览器,尤其是所有黑客等等。这是一个非常令人沮丧和乏味的过程,浪费了大量的时间和金钱。值得庆幸的是,508立法仅适用于美国(免费的土地 - 是的权利)因此,因为我在英国,我可以开发我选择的任何风格的网站。与流行的(美国)信仰相反,在华盛顿制定的立法并不适用于世界其他地区 - 谢天谢地。在立法生效的那一天,它一直是网页设计领域的美好一天。我认为随着我在IT行业长达25年,我变得越来越愤世嫉俗,但我确信这种立法只是为了保护工作。实际上,任何人都可以将合理的网页与几张表拼凑在一起。使用DIVs/CSS完成此操作需要更多的努力和知识。根据我的经验,谷歌可能需要花费数小时才能找到解决相当简单问题的方法,并在充满理想主义狂热者的论坛中阅读难以理解的文章,所有人都在争论“正确”的做事方式。你不能只是在水中浸泡你的脚趾,并在每种情况下使事情正常工作。在我看来,缺乏一个明确的指南来使用DIVS/CSS“开箱即用”,适用于所有情况,在浏览器上工作,并使用“普通”语言编写,没有极客说话,也有气味一点保护主义。
我是一名应用程序开发人员,我认为,与创建基本应用程序,设计和实现业务对象以及创建数据库相比,确定布局问题并对所有浏览器进行测试需要花费两倍的时间。后端。我的时间=金钱,对我和我的客户都是如此,所以如果我不拒绝所有专业DIV/CSS论据,支持削减成本和为我的客户提供物有所值,我很抱歉。也许它只是开发人员的工作方式,但在我看来,更改复杂的表结构比修改DIVs/CSS要容易得多。值得庆幸的是,现在似乎可以找到这些问题的解决方案 - 它叫做WPF。

1
Tim Black

我认为没有人关心网站如何设计/实施,当它表现得很好而且工作得很快。

我在HTML标记中使用“table”和“div”/“span”标记。

让我举几个论据,为什么我选择div:

  1. 对于一个表你必须写至少3个标签(table,tr,td,thead,tbody),对于Nice设计,有时你有很多嵌套表

  2. 我喜欢在页面上有组件。我不知道如何解释,但会尝试。假设你需要一个徽标,这个徽标必须放在下一页的内容上,只需放一小块。使用表格,您必须剪切2张图像并将其放入2个不同的TD中。使用DIV你可以有一个简单的CSS来根据需要进行排列。您最喜欢哪种解决方案?

  3. 当有超过3个嵌套表来做某事我想用DIV重新设计它

但我仍然使用表格:

  1. 表格数据

  2. 正在扩大自我的内容

  3. 快速解决方案(原型),因为DIVs盒模型在每个浏览器上都不同,因为许多生成器都在使用表格等

1
Dani

通过仍然使用表格进行布局,我们在div方面的创新上缺失了。

许多人提出了解决方案,使div的创建布局更容易。最流行的是网格架构。有基于这种架构的动态布局生成器。退房:1)960.gs和(http://grids.heroku.com/)2)蓝图和很多晚了。

我没有在表格布局的架构和工具方面看到太多创新。

我会说,除了所有的理论,实际上用CSS和div布局更快。相反,在这方面的创新使它比任何事情都容易。

1
Pixelgrey

表格适用于HTML,您可以将它们放在一起用于简单或临时的操作。如果你正在建立一个大型网站,你应该使用div和CSS,因为随着网站的变化,它会更容易维护。

1
Adam Rosenfield

1:是的,您的用户确实关心。如果他们使用屏幕阅读器,它将丢失。如果我使用任何其他试图从页面中提取信息的工具,遇到不用于表示表格数据的表会产生误导。

分隔内容可以使用div或span,因为 这正是这些元素的含义 。当我,搜索引擎,屏幕阅读器或其他任何东西遇到一个表元素时,我们希望这意味着“以下是表格数据,在表格​​中表示”。当我们遇到一个div时,我们期望“这是一个用于 div ide我将内容分成不同部分或区域的元素。

2:可读性:错了。如果所有演示代码都在css中,我可以阅读html,我将理解页面的内容。或者我可以阅读CSS并理解演示文稿。如果html中的所有内容都混杂在一起,我必须在精神上删除所有与演示相关的位,然后才能看到内容和内容是什么。而且,我很害怕见到一个不懂css的网页开发人员,所以我真的不认为这是一个问题。

3:表格较慢:是的,它们是。原因很简单:在呈现表之前,必须完全解析表, 包括 它们的内容。可以在遇到div时呈现div,甚至 之前 它的内容已被解析。这意味着div将在页面加载完成之前显示。

然后还有奖励,表格更脆弱,并且在不同的浏览器中不会总是呈现相同的,具有不同的字体和字体大小以及可能导致布局变化的所有其他因素。表是一种很好的方法,可以确保您的网站在某些浏览器中关闭一两个像素,在用户更改字体大小时无法很好地扩展,或以其他任何方式更改其设置。

当然#1是最重要的一个。许多工具和应用程序依赖于网页的语义。通常的例子是视障用户的屏幕阅读器。如果您是网络开发人员,您会发现很多大公司可能会雇用您在网站上工作, 要求 即使在这种情况下也可以访问该网站。这意味着你必须考虑你的HTML的语义。使用语义网或更相关的微格式,RSS阅读器和其他工具,您的页面内容不再仅通过浏览器进行查看。

1
jalf

我很抱歉我的英语,但这是另一个原因:

我在一些政府组织工作,不使用TABLE的首要原因是残疾人。他们使用机器“翻译”网页。

问题是这个“翻译机器”如果由TABLE完成则无法读取网站。为什么?因为TABLE适用于DATAS。

事实上,如果你使用TABLES,你必须为每个CELLS指定一些信息,让残疾人知道他们在TABLE中的位置。想象一下,你有一个大桌子,并且必须放大才能在屏幕上看到只有一个单元格:你必须知道你在哪一行。

因此,使用了DIV,并且残疾人可以简单地阅读文本,并且当他们不必在那里时,不会得到关于行/列的一些奇怪的信息。

我也更喜欢使用TABLE来制作快速简单的模板,但我现在已经习惯了CSS ...它很强大,但你真的要知道你在做什么...... :)

1
RVeur23

Flex有一个用于在垂直列中放置东西的标签。我不认为他们得到整个布局/内容的事情要么诚实,但至少他们已经解决了这个问题。

就像许多对CSS感到沮丧的人一样,我看起来也很容易找到一个简单的答案,当我以为我找到了它时,我感到很兴奋,然后当我在Chrome中打开页面时,我的希望破灭了。我绝对没有足够的技巧说这是不可能的,但我没有看到有人提供同行评审的示例代码,明确证明它可以可靠地完成。

那么来自这个岛屿的CSS方面的人是否可以推荐用于布置垂直柱的思维方式/方法?我已尝试在第二行和第三行中进行绝对定位,但最终会出现重叠的内容,如果页面缩小,浮点数会出现类似问题。

如果对此有一个答案,我会欣喜若狂 - 做正确的事 - 告诉我类似的事情,“嘿,你试过**流程:垂直|横向”和我完全没有你的头发。

1
Shanimal

Google对表格中包含的文字内容的优先级非常低。我正在给当地一家慈善机构提供一些SEO建议。在检查他们的网站时,它使用表来布局网站。查看每个页面,无论我在Google搜索框中使用的页面上的单词或单词组合,这些页面都不会出现在任何热门搜索页面中。 (但是,通过在搜索中指定网站,页面被返回。)一页是通过正常标准编写的良好副本,以便在搜索中产生良好的结果,但仍然没有出现在返回的搜索结果的任何第一页中。 (请注意,此文本位于表格中。)然后,我在页面上发现了一段文本,这些文本位于div而不是表格中。我们在搜索引擎中放了一些div中的一些单词。结果?它在搜索结果中排在第2位。

1
Simon Measures

我曾经知道一个表一次加载,换句话说,当连接速度很慢时,表格所在的空间保持空白,直到加载整个表格为止,另一方面,div与数据来源一样快速地从上到下加载并且无论它是否已经完成。

1
Davy

当您需要确保元素需要保留在布局中的特定物理关系中时,请使用表。对于数据,表通常是最好的布局元素,因为您不希望列以uxexpected方式换行并混淆关联。

人们还可以争辩说,必须保留在特定关系中的非数据元素也应该在表格中呈现。

灵活的CSS布局非常适合适用于移动设备和大屏幕以及打印和其他显示类型的内容,但有时,内容只需要以非常特定的方式显示,如果需要屏幕阅读器无法轻松访问它,它很有道理。

1
Sal

我尽可能地避免使用TABLE,但是当我们设计复杂的表单时,混合多个控件类型和不同的标题位置以及非常严格的分组控制,使用DIV是不可靠的或者通常几乎不可能。

现在,我不会争辩说这些表单不能重新设计以更好地适应基于DIV的布局,但对于其中一些我们的客户坚持不改变以前版本的现有布局(用经典ASP编写),因为它平行于用户熟悉的纸质表格。

因为表单的表示是动态的(其中某些部分的显示基于案例的状态或用户的权限),我们使用堆叠的DIV集合,每个DIV包含逻辑分组的表单元素的TABLE。 TABLE的每一列都被分类,以便它们可以由CSS控制。这样我们就可以关闭表单的不同部分而不会出现在DIV中包装行的问题。

1
CMPalmer

几年前我研究过屏幕阅读器和表格的问题,并提出了与大多数开发人员认为相矛盾的信息:

http://www.webaim.org/techniques/tables/

“你可能会听到一些可访问性提倡者说布局表是一个坏主意,而且应该使用CSS布局技术。他们所说的有道理,但说实话,使用表格进行布局并不是最糟糕的在可访问性方面你可以做的事情。只要表格的设计考虑了可访问性,各种残疾人士都可以轻松访问表格。“

1
Rimian

我相信这是一个与一般问题有关的问题。当HTML诞生时,没有人能够预见它的广泛使用。另一项技术在其成功的重压下几乎崩溃了。当HTML页面用 vi 写在绿色文本终端上时,TABLE就是向页面访问者呈现数据所需的全部内容,而且它主要是以表格形式表示的数据。

我们都知道事情是如何演变的。 TABLE最近比较不合时宜,但有很多理由喜欢DIV和基于CSS的布局(可访问性不是最后一个)。当然我不能写一个CSS来挽救我的生命:-)而且我认为图形设计专家应该随时待命。

那就是说......即使在现代网站中也有很多数据应该在表格中呈现。

1
Manrico Corazzi

如果您支持表格角度,请找一个带有表格的网站,然后自己制作一个屏幕阅读器 - 关闭屏幕阅读器并关闭显示器。

然后尝试使用Nice语义正确的div布局网站。

你会看到差异。

如果表中的数据是表格式而不是布局页面,则表格不是邪恶的。

1
Allen Hardy

根据我对表的了解,如果嵌套的表太多,浏览器在呈现页面时会有很大的开销。

1 - 浏览器等待呈现最终视图等待,直到加载整个表。

2 - 渲染表的算法很昂贵,而且不是一次性的。浏览器在获取内容时会尝试渲染计算内容的宽度和高度。所以,如果你有嵌套表,比如说,浏览器已收到第一行,第一个单元格内容量很大,宽度和高度没有定义,它将计算宽度并渲染第一行,平均值当它获得第2行时,第2行将有大量内容!它现在将计算第二行单元格的宽度。第一行怎么样?它将递归计算宽度。这在客户方面很糟糕。 (以示例为例)作为程序员,您将优化诸如获取数据的时间,优化的数据结构等等。您可以优化服务器端的内容,比如in2 secs,但最终用户可以获得最终视图8秒这有什么不对? 1.可能是网络很慢!如果网络很好怎么办?什么是网络在接下来的1秒内提供内容?这额外的5秒消耗在哪里?要担心 - 浏览器可能会花费大量时间来估算和渲染表格!

如何优化表格?如果您正在使用表格,我建议,始终为单元格定义宽度。这并不能保证浏览器只会盲目地采用这个宽度,但是在决定初始宽度时浏览器会有很大的帮助。

但是,最后,div是很好的方式,因为浏览器可以缓存CSS;而表不缓存!

1
Biranchi Panda

用作纯布局的表确实会对可访问性造成一些问题(我听说过)。但是我明白在这里被问到的是,通过使用表格以确保页面上某些内容的正确对齐,您在某种程度上削弱了网络。

我听过人们之前认为,FORM标签和输入实际上是数据,应该允许它们进入表格。

使用表来确保一些元素正确对齐的原因导致代码的大量增加往往包括单个DIV如何满足其所有需求的示例。它们并不总是包含10行CSS和他们必须为IE5,IE5.5,IE6,IE7编写的特殊浏览器黑客......

我认为它仍然是在你的设计中使用平衡。表格在工具箱中,只记得它们的用途......

0
HB

当然,OP有点结束,这些争论看起来如此周,并且很容易被反击。

网页是Web开发人员的领域,如果他们说div和CSS比对我来说足够好的表更好。

如果布局是由服务器应用程序生成的表实现的,那么新布局意味着更改应用程序,重新构建和重新应用应用程序,就像只更改css文件一样。

另外,可访问性。用于布局的表使网站无法访问,因此请勿使用它们。这是毫无疑问的,更不用说非法了。

0
Ian

超短的答案:使用表格设计可维护的网站很困难,并且使用标准的方法很简单。

网站不是表格,它是相互交互的组件集合。将其描述为表格没有意义。

0
Rich Bradshaw

在维护内容的同时进行现场维护和设计检修(一直发生,特别是在电子商务中):

内容和设计通过表格混合在一起=更新内容和设计。

内容与设计分开=更新设计,可能还有一些内容。

如果我按照自己的方式使用它,我会将我的内容保存在PHP中_生成XML,在XSLT中转换为标记,并使用CSS和Javascript进行交互。对于Java方面的事情,JSP向JSTL生成标记。

0
mltorrefranca

使用DIV,您可以轻松切换内容。例如,你可以这样做:

Menu | Content

Content | Menu

Menu
----
Content

在CSS中更改它很容易,而不是在HTML中。您还可以提供多种样式(右手,左手,小屏幕专用)。

在CSS中,您还可以在用于打印的特殊样式表中隐藏菜单。

另一个好处是,您的内容在代码中始终采用相同的顺序(首先是菜单,后面是内容),即使在视觉上它也是以其他方式呈现。

0
ofaurax