為什么說(shuō)在網(wǎng)頁(yè)制作時(shí)應(yīng)該避免將表格用于網(wǎng)頁(yè)布局

2022-05-15    分類： 網(wǎng)站建設(shè)


如果你做網(wǎng)站建設(shè)開發(fā)已經(jīng)有很多年，比如說(shuō)2010年以前，一定知道當(dāng)時(shí)的網(wǎng)頁(yè)排版布局方式多半基于table方式，而不是現(xiàn)在的使用的div+css。顯然，學(xué)習(xí)編寫CSS布局會(huì)很棘手，特別是如果您熟悉使用表格來(lái)創(chuàng)建精美的Web頁(yè)面布局的話。可是，雖然HTML5允許表格進(jìn)行布局，但這并不是一個(gè)好建議，為什么說(shuō)在網(wǎng)頁(yè)制作時(shí)應(yīng)該避免將表格用于網(wǎng)頁(yè)布局？無(wú)論從網(wǎng)頁(yè)加載速度，還是搜索引擎收錄，亦或者網(wǎng)頁(yè)的排版局部開發(fā)效率等，我們均不建議使用老舊的table樣式。
table嵌套加載緩慢
就像搜索引擎一樣，大多數(shù)屏幕閱讀器按照網(wǎng)頁(yè)在HTML中的顯示順序閱讀網(wǎng)頁(yè)，而表格對(duì)于屏幕閱讀器來(lái)說(shuō)可能很難解析。這是因?yàn)楸砀癫季种械膬?nèi)容雖然是線性的，但在從左到右和從上到下閱讀時(shí)并不總是有意義的。另外，使用嵌套的表格，以及表格單元格上的不同跨度，可能會(huì)使頁(yè)面變得非常難以理解。這就是HTML5規(guī)范不建議使用表進(jìn)行布局的原因，也是HTML4.01不允許這樣做的原因?？稍L問(wèn)的網(wǎng)頁(yè)允許更多的人使用它們，并且是專業(yè)設(shè)計(jì)師的標(biāo)志。使用CSS，您可以將一個(gè)部分定義為屬于頁(yè)面的左側(cè)，但將其放在HTML中的最后一個(gè)位置。然后，屏幕閱讀器和搜索引擎都將首先讀取重要部分(內(nèi)容)，然后再閱讀不太重要的部分(導(dǎo)航)。
table布局很麻煩
即使您使用Web編輯器創(chuàng)建表格，您的網(wǎng)頁(yè)仍將非常復(fù)雜且難以維護(hù)。除了最簡(jiǎn)單的網(wǎng)頁(yè)設(shè)計(jì)之外，大多數(shù)布局表格都需要使用大量的AND屬性和嵌套表。構(gòu)建表格看起來(lái)似乎很容易，但一旦完成，您就需要維護(hù)它。六個(gè)月后，可能不太容易記住為什么嵌套表或一行中有多少個(gè)單元格，以此類推。更不用說(shuō)，如果您作為一個(gè)團(tuán)隊(duì)成員維護(hù)Web頁(yè)面，您必須向每個(gè)參與的人解釋這些表是如何工作的，或者希望他們?cè)谛枰M(jìn)行更改時(shí)花費(fèi)更多的時(shí)間。
CSS也可能很復(fù)雜，但它將表示從HTML中分離出來(lái)，并使其更易于長(zhǎng)期維護(hù)。此外，使用CSS布局，您可以編寫一個(gè)CSS文件，并設(shè)置所有頁(yè)面的樣式以使其看起來(lái)像這樣。然后，當(dāng)您想要更改站點(diǎn)的布局時(shí)，只需更改一個(gè)CSS文件，整個(gè)站點(diǎn)就會(huì)發(fā)生變化-不再一次檢查每個(gè)頁(yè)面來(lái)更新表以更新布局。
table布局不靈活
雖然可以創(chuàng)建具有百分比寬度的表布局，但它們的加載速度通常較慢，并且可能會(huì)顯著改變布局的外觀。但是，如果您對(duì)表使用指定的寬度，則最終會(huì)出現(xiàn)一個(gè)非常僵硬的布局，在與您自己的大小不同的監(jiān)視器上看起來(lái)不會(huì)很好。創(chuàng)建在許多顯示器、瀏覽器和分辨率上看起來(lái)很好的靈活布局相對(duì)容易。事實(shí)上，使用CSS媒體查詢，您可以為不同大小的屏幕創(chuàng)建單獨(dú)的設(shè)計(jì)。
對(duì)于相同的設(shè)計(jì)，嵌套表的加載速度比CSS慢。創(chuàng)建帶有表的花哨布局的最常見(jiàn)方法是“嵌套”表。這意味著一個(gè)(或多個(gè))表被放在另一個(gè)表中。嵌套的表越多，Web瀏覽器呈現(xiàn)頁(yè)面所需的時(shí)間就越長(zhǎng)。
在大多數(shù)情況下，表格布局使用比CSS設(shè)計(jì)更多的字符來(lái)創(chuàng)建。更少的字符意味著更少的下載。
table布局會(huì)影響搜索引擎的優(yōu)化
最常見(jiàn)的表格創(chuàng)建布局在頁(yè)面左側(cè)有導(dǎo)航欄，在右側(cè)有主要內(nèi)容。在使用表時(shí)，這(通常)要求HTML中顯示的第一個(gè)內(nèi)容是左側(cè)導(dǎo)航欄。搜索引擎根據(jù)內(nèi)容對(duì)頁(yè)面進(jìn)行分類，許多引擎確定顯示在頁(yè)面頂部的內(nèi)容比其他內(nèi)容更重要。因此，首先使用左側(cè)導(dǎo)航的頁(yè)面所包含的內(nèi)容看起來(lái)并不像導(dǎo)航那么重要。使用CSS，您可以將重要內(nèi)容放在HTML中，然后使用CSS確定其在設(shè)計(jì)中的位置。這意味著搜索引擎將首先看到重要的內(nèi)容，即使設(shè)計(jì)將其放在頁(yè)面的下方。
table布局并不總是能很好地打印
許多表格設(shè)計(jì)不能很好地打印，因?yàn)樗鼈儗?duì)打印機(jī)來(lái)說(shuō)太寬了。因此，為了使它們適合，瀏覽器將剪除表格，并打印下面的部分，從而導(dǎo)致非常不連貫的頁(yè)面。有時(shí)你得到的頁(yè)面看起來(lái)還不錯(cuò)，但整個(gè)右邊都不見(jiàn)了。其他頁(yè)面將在不同的紙張上打印部分。
使用CSS，您可以創(chuàng)建一個(gè)單獨(dú)的樣式表，僅用于打印頁(yè)面。
用于布局的table在HTML 4.01中無(wú)效
HTML4規(guī)范指出：“表不應(yīng)該僅僅用作布局文檔內(nèi)容的一種方式，因?yàn)檫@在呈現(xiàn)到非可視媒體時(shí)可能會(huì)出現(xiàn)問(wèn)題?！币虼耍绻帉懹行У腍TML4.01，則不能使用表進(jìn)行布局。您應(yīng)該只對(duì)表格數(shù)據(jù)使用表格，表格數(shù)據(jù)通?？雌饋?lái)像您可能在電子表格或數(shù)據(jù)庫(kù)中顯示的內(nèi)容。但是，HTML5更改了規(guī)則，現(xiàn)在用于布局的表雖然不推薦，但現(xiàn)在被認(rèn)為是有效的HTML。HTML5規(guī)范規(guī)定：“表不應(yīng)用作布局輔助工具?！边@是因?yàn)槠聊婚喿x器很難區(qū)分用于布局的表格，如前所述。使用CSS來(lái)定位和布局頁(yè)面是獲得用于創(chuàng)建表的設(shè)計(jì)的唯一有效的HTML4.01方法，HTML5也強(qiáng)烈建議使用這種方法。
用于布局的表格可能會(huì)影響您的工作前景
隨著越來(lái)越多的新設(shè)計(jì)師學(xué)習(xí)HTML和CSS，您在構(gòu)建表布局方面的技能將越來(lái)越少。是的，的確，客戶通常不會(huì)告訴您應(yīng)該使用哪種技術(shù)來(lái)構(gòu)建他們的網(wǎng)頁(yè)，但他們確實(shí)會(huì)提出以下要求：
  • 可訪問(wèn)性網(wǎng)頁(yè)：許多國(guó)家和公司要求可供屏幕閱讀器查看的設(shè)計(jì)越來(lái)越重要。
  • 可維護(hù)的網(wǎng)頁(yè)：即使你將來(lái)不打算維護(hù)它們，它們也可以隨身攜帶設(shè)計(jì)。
  • 靈活的設(shè)計(jì)：適用于多種瀏覽器、分辨率和設(shè)備的設(shè)計(jì)。
  • 快速下載頁(yè)面：速度變得越來(lái)越重要，甚至對(duì)搜索引擎優(yōu)化(SEO)也是如此。
  • 可打印設(shè)計(jì)：打印時(shí)沒(méi)有特殊腳本或額外頁(yè)面的頁(yè)面。
如果你不能滿足客戶的要求，他們就不會(huì)再來(lái)找你設(shè)計(jì)了-到此為止。你真的能承擔(dān)得起讓你的企業(yè)遭受損失，因?yàn)槟悴辉敢鈱W(xué)習(xí)和采用一種自上世紀(jì)90年代末以來(lái)就一直在使用的技術(shù)嗎？CSS可能很難學(xué)習(xí)，但任何值得付出的努力都是值得的。不要讓你的技能停滯不前。學(xué)習(xí)CSS，并按照構(gòu)建網(wǎng)頁(yè)的方式構(gòu)建網(wǎng)頁(yè)-使用CSS進(jìn)行布局。

網(wǎng)頁(yè)題目：為什么說(shuō)在網(wǎng)頁(yè)制作時(shí)應(yīng)該避免將表格用于網(wǎng)頁(yè)布局
文章地址：http://www.bm7419.com/news/153459.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供手機(jī)網(wǎng)站建設(shè)、外貿(mào)網(wǎng)站建設(shè)、小程序開發(fā)、做網(wǎng)站、靜態(tài)網(wǎng)站、動(dòng)態(tài)網(wǎng)站

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)

手機(jī)網(wǎng)站建設(shè)